みなさんこんにちは!
ITプロパートナーズ(https://itpropartners.jp/)新卒2年目の藤井です!
今年の4月から関西支社立ち上げにあたり大阪に赴任、
現在立ち上げに関連する業務全般を行なっております!
実は先日、毎月渋谷で行なっている#ProLabo(プロラボ)もくもく会がなんと、、、
関西に進出いたしました~🎉🎉
今回はそちらの様子をレポートにまとめました!!
ぜひご覧ください!
続きを読むみなさんこんにちは!
ITプロパートナーズ(https://itpropartners.jp/)新卒2年目の藤井です!
今年の4月から関西支社立ち上げにあたり大阪に赴任、
現在立ち上げに関連する業務全般を行なっております!
実は先日、毎月渋谷で行なっている#ProLabo(プロラボ)もくもく会がなんと、、、
関西に進出いたしました~🎉🎉
今回はそちらの様子をレポートにまとめました!!
ぜひご覧ください!
続きを読むITプロパートナーズでエンジニアをしているもりと申します。
少し今更感がありますが、ContentfulとNuxtでJAM Stackなブログを作ってみました!
まずJAM Stackという聞き慣れない言葉がでてきましたが、JAM Stackとは
Javascript + Api + Markup のことで、HTMLをサーバーサイドで生成してレンダリングするのではなく、javaScriptでapiから取得したデータをもとにデプロイ時にHTMLを生成する最新のweb開発アーキテクチャのことです。
詳しくはこちら
今回はContentfulをAPIとして、Nuxtを静的サイトジェネレーターとして使用することで
JAM Stackとして実装していきます。
Contentful
Nuxt
ContentfulとはヘッドレスCMSと呼ばれるコンテンツ管理サービスで、WordPressのように記事の作成や管理ができます。
WordPressと違うのは、Contentfull側でViewのレンダリングは行わず、完全にAPIベースである点です。
記事のデータはAPIを介して取得するため、フロントエンドは自分の好きな技術で好きなように作ることができます。
まずはContentfulのアカウントを作成していきましょう。
Try for free とあるのでこちらからアカウントを作成します 。
今回はGithubと連携を行います。
名前やメールアドレスなどの必要事項を入力し signUp してアカウントの作成完了です。
次に スペース という大枠になるものを作成します。
スペースとはContentfulの一番大きな領域で、1プロジェクト = 1スペースになります。
公式によると開発用とProduction用といった単位でスペースを作成することもありだそうです。
今回はブログを1つ作成するだけなので、スペースは1つでOKです。
早速スペースを作成していきましょう。
まずは左側にあるメニューからCreate spaceをクリックします。
space作成用のモーダルが表示されるので、最初にspaceのタイプを選択します。
今回はFreeプランで作成します。
次にスペース名を決めます。
今回はシンプルにblogとしておきました。
あとはConfirm & CreateSpaceをクリックしてスペースの作成完了です!
次にモデルを作成していきましょう。
モデルとはContentfulで作成する記事などのコンテンツのことです。
例えば、 title top_image create_atのように、一つのコンテンツに持っておきたい情報を名前と型を決めて登録します。
今回はブログ記事なので、タイトルやTOP画像、作成日、本文などの情報を持つ記事モデルを作成してみたいと思います。
先程スペースを作成したので、TOPページに戻るとCreate spaceが Completedになっていると思います。
そのすぐ下にあるDefine the structure の Create a content type をクリックします。
モデルの名前と説明を入力しCreateをクリックしましょう。
今回はブログの記事なのでシンプルにarticleとしました。
次に、このモデルにフィールドを設定していきます。
作成後に右側にあるAdd Fieldをクリックします。
クリックすると追加するフィールドの型を決めるモーダルが表示されるので、Textを選択します。
フィールドの名前を入力してCreateします。
これでText型のブログのタイトルを表すフィールドの作成が完了です。
今回は合計5つのフィールドを作成しました。
これで、1つのコンテンツ(記事)はここで設定した5つのフィールドを持つことができるようになりました!
スペース、モデルの作成が終わったので、実際にコンテンツ(記事)を作成してみましょう。
TOPページには、先程Modelも作成が終わったので、 Define the structureもCompletedになっているかと思います。
Create your contnet の Add an entry からコンテンツを作成していきます。
このように先程設定したフィールドの中身を入力していきましょう。
実際の本文はフィールドタイプをrichTextにしたので、このように文章の途中に自由に画像を差し込んだり、太字にしたり といったことが可能です。
記事の作成が終わったら、右上のpublishをクリックして作成完了です。
Contentfulでブログ記事の作成が完了したので、次はそのブログを表示するフロントエンドの部分の作成を行います。
今回はNuxtを使用してそのフロントエンド部分を作成していこうと思います。
NuxtとContentfulの連携については公式に手順が載っているのでこちらに沿って説明して行きたいと思います。
では早速Nuxtのアプリケーションを作成していきましょう。
まずはvue-cliを使ってNuxtの新規アプリケーションを作成します。
vue-cliのinstall
$ yarn global add @vue/cli-init
nuxtアプリケーションの作成
$ vue init nuxt/starter アプリケーション名
これでnuxtのアプリケーションが作成できたので早速Nuxtを起動してみましょう。
作成したNuxtアプリケーション配下に移動して必要なmoduleをinstallします。
$ yarn install
installが完了したら実際に起動してみます。
$ yarn dev
上記コマンドでbuildが開始され、URLが表示されるのでクリックしてみましょう。
成功していれば、このような画面が表示されます。
Nuxtのアプリケーションの作成が完了したので、次はContentfulと連携するのに必要なModuleをinstallします。
$ yarn add contentful
contentfulと連携するにはapiのキーが必要になるのでそちらを作成しましょう。
作成が必要なのは
・space id
・access token
の2つです
contentfulのページのヘッダーにあるsettingsからAPIkeysページに移動します。
ページに移動すると、SpaceIDとAccessTokenなどが自動で生成されているのでこちらのキーを使用してcontentfulと連携をしていきます。
contentfulのキーの作成が終わったらそのキーを保存しておく場所をNuxt側に作ります。
プロジェクト直下にenv.jsを作成して以下のようにします。
// ./env.js
{
"CTF_SPACE_ID": "先程作成した Space ID",
"CTF_CDA_ACCESS_TOKEN": "先程作成したContent Delivery API - access token"
}
※こちらgitignoreに指定するのをお忘れなく
先程installしたcontentful用のmoduleを使うためにpluginを作成します
// ./plugins/contentful.js
const contentful = require('contentful')
const env = require('../env.js');
const config = {
space: process.env.CTF_SPACE_ID,
accessToken:process.env.CTF_CDA_ACCESS_TOKEN
}
// export `createClient` to use it in pagecomponents
module.exports = {
createClient () {
return contentful.createClient(config)
}
}
これでNuxtとcontentfulの連携の設定は完了です。
連携の設定が完了したので、次はContentfulから先程書いた記事を取得します。
今回はJAM Stackにするので、buid時に全ての記事データを取得してjsonに固めます。
ではまずデータを取得するmoduleを作成しましょう。
modulesディレクトリ配下に、先程作成したcontentful連携用のpluginを使用して
データ取得する処理を書きます。
その後、取得したデータをjsonファイルとして指定ディレクトリに出力します。
// ./modules/createStaticJson.js
import { createClient } from '../plugins/contentful.js';
import env from '../env.js';
import fs from 'fs';
const outputPath = 'static/json/article.json';
/**
* Contentfulから取得したデータをjsonファイルとして出力します。
*/
export default async function outputStaticData() {
const client = createClient();
// contentfulからデータを取得
const articles = await client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
});
// jsonとして出力する
fs.writeFile(
outputPath,
JSON.stringify(articles),
err => {
if (err) {
throw err;
}
},
);
};
取得したjsonはstatic/json/article.jsonに配置するので、指定ディレクトリにはあらかじめ空のjsonファイルを作成しておきましょう。
// ./static/json/article.json
{}
これでデータの取得、jsonファイル出力処理は完了です!
データを取得する処理ができたので、その処理の呼び出し元を作っていきます。
今回は nuxt generateという nuxtアプリケーションを静的ファイルとして出力するコマンドを使用していきます。
そのため、このgenerateが実行されたタイミングでデータを取得するようにしましょう。
nuxt.config.jsのgenerateの中に以下のように処理を追加します。
まず、先程作成したデータを取得してjsonにする処理を呼びます。
// ./nuxt.config.js
import Articls from './static/json/article.json';
import outputStaticData from './modules/createStaticJson';
module.exports = {
generate: {
async routes() {
// contentfulからデータを取得してjsonにexportする
await outputStaticData();
// 取得したjsonからページを動的生成する
return Articls.items.map(i => {
return `articles/${i.fields.id}`;
});
}
},
// --- 以下省略 ----
その後に取得したデータから動的なページを生成します。
なぜこのような処理をする必要があるかというと
nuxt generateコマンドで静的ページとして出力した場合、
article/{id} のような動的URLのページは生成できないからです。
今回は
/ 記事一覧ページ
article/{記事ID} 記事詳細ページ
というページ構成で作成するので
contentfulから取得した記事IDをもとに記事詳細ページのroutingを追加しています。
最後に、実際に表示するページ部分を作成して行きます。
/ 記事一覧ページ
article/{記事ID} 記事詳細ページ
という構成にします
root /
├ pages/
├ index.vue
articles/
└ _id.vue
pages 配下の構成がそのままルーティングになるので、こんな感じでvueファイルを配置していきましょう。
ここではポイントだけ説明をしていきたいと思います。(vueの説明は省きます)
まず、取得したjsonの記事データを表示する方法ですが、jsonをimport してcomputedで参照するのが良いでしょう。
// ./pages/index.vue
const Articls = require('~/static/json/article.json');
export default {
computed: {
articles(){
return Articls.items;
}
}
}
詳細ページに関してはurlから対象の記事のデータを抽出します。
// ./pages/article/_id.vue
const Articls = require('~/static/json/article.json');
export default {
computed: {
article(){
const id = this.$router.params.id;
return Articls.items.find(i => i.fields.id == id);
}
}
// 以下省略
今回contentfulでrichテキストを使用して文章の途中に画像をいれたり、太文字にしたり
といったことを行っています。この richText を表示する部分は少し処理が必要です。
// ./pages/article/_id.vue
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
export default {
methods: {
toHtmlString(obj) {
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
`<img src="${fields.file.url}"/>`,
},
}
return documentToHtmlString(obj, options);
}
},
// 以下省略
このように変換するモジュールがライブラリにあるので、こちらを使用して変換の処理を行う必要があります。
template内ではv-htmlで指定し、変換メソッドを指定すればOKです。
// ./pages/article/_id.vue
<template>
<div v-html="toHtmlString(article.fields.body)"></div>
</template>
// 以下省略
アプリケーションの実装が完了したので、次は実際にデプロイします。
今回はNetlifyという静的なサイトを無料でホスティングできるサービスを利用して
githubにpushしたら自動でデプロイされるようにします。
事前準備として、先程作成したアプリケーションをgithuにpushします。
$ yarn generate
nuxt generateで静的ファイルとしてビルドしましょう。
実行後にdistというディレクトリが作成されていると思います。
次に先程作成されたdistディレクトリをgit.ignoreから外します。
最後にgit pushでgithubにpushしたら準備完了です。
次にhttps://app.netlify.com/signupからNetlifyのアカウントを作成しましょう。
今回はgithubと連携したいのでgithubアカウントでsignupします。
アカウント作成後のTOPページからgithubのリポジトリと連携していきます。
New site from Gitをクリックします。
GitHubを選択して認証します。
Only select repositoriesを選択肢、連携するgithubのリポジトリを選択します。
先程連携したリポジトリを選択肢します。
連携するリポジトリの設定を行います。
① pushがあった場合にhookするブランチを選択します。
今回は masterを選択しておきます。
② pushがあった場合に実行するコマンドを入れます。
コマンドは何も実行しないので未指定でOKです。
③ 実際にホスティングする対象となるディレクトリを入力します。
NuxtGenerateを行ったときのデフォルトディレクトリはdistなので今回はdistを指定してましょう。
最後に Deploy site でデプロイが開始されます 。
ビルドが成功するとこのようにURLが表示されます。
以上でデプロイ設定は完了です。
以降はコンテンツをcontentfulで更新したら、ローカルでnuxt generateを実行し
githubにpushすることで自動でデプロイができます。
これでJAMStackなブログが完成しました!!!
いかがだったでしょうか?
比較的お手軽に構築からデプロイまで出来たかと思います。
今回のブログは完全な静的サイトなので画像など最適化したりすれば阿部寛の速度も夢ではないかもしれません。(笑)
サンプルは以下に置いておくので参考にどうぞ
サンプルブログ
https://reverent-saha-5d7aec.netlify.com/
サンプルソースコード
https://github.com/frostnday/contentful_nuxt_sample
こんにちは!エンジニアのとみたです。
ささやかなネタですが、CSSで実装できるスプライトアニメーションで遊んでみました。
Twitterのいいねボタンのエフェクトにも使われています。
今回は、弊社が開催しているもくもく会の非公式キャラクター(笑)「プロラボくん」に動いてもらいます
スプライトアニメーション用の画像はこちら。
7つの絵を少しずつ動かします。
Illustratorで作成しました。
基準になる絵と枠を一つ作成して、横に並べます。
ここから少しずつ変化をつけていくように作成します。
アニメーションが動いたときに、滑らかに描画されます。pngだと思った以上にギザギザに...。
vue-cliを使って新規プロジェクトを作成します。
今回はApp.vueをそのまま書き換えてしまいます。
まず先程のSVGデータを表示します。
HTMLはこちら。
<template>
<div id="area">
<div class="wrap">
<div class="prorabokunSmile"></div>
</div>
</div>
</template>
cssはこちら。
.prorabokunSmile {
background: url(./assets/purorabokun_smile.svg) no-repeat;
background-size: cover; //高さをheightに合わせる
width: 100px; //1コマ目の大きさ
height: 126px; //1コマ目の大きさ
display: inline-block;
margin: 0 50px;
}
HTMLはこちら。smileクラスを追加します。
<template>
<div id="area">
<div class="wrap">
<div class="prorabokunSmile smile"></div>
</div>
</div>
</template>
cssはこちら。
smileクラスと、@keyframesを追加しています。
.prorabokunSmile {
background: url(./assets/purorabokun_smile.svg) no-repeat;
background-size: cover;
width: 100px;
height: 126px;
display: inline-block;
margin: 0 50px;
}
.smile {
animation: animationSmile 1s steps(6) infinite;
}
@keyframes animationSmile {
to {
background-position: -600px 0;
}
}
画像を横方向に動かしているだけなのですが、
step関数を使い6段階に切り分けて表示させます。
step関数の値は、最初に表示される分を差し引いて、コマ数から1引いた値になります。
今回は7コマのアニメーションなのでsteps(6)となります。
アニメーションには任意の名前をつけ、@keyframesと紐づけます。
brackground-positionの値は、widthの値*steps関数の値をマイナスさせた値にすると、うまく動きました。100pxの6倍で-600px、といった具合に。
ボタンをクリックすると、 アニメーションが動き出すようにしたい。
<template>
<div id="area">
<div class="wrap">
<div class="prorabokunSmile"
v-bind:class="{ smile: isActive }"
></div>
</div>
<button v-on:click="move">笑顔!</button>
</div>
</template>
jsの指定はこのようにしました。
<script>
export default {
name: 'app',
data () {
return {
isActive: false
}
},
methods: {
move: function () {
this.isActive = !this.isActive
},
}
}
</script>
「笑顔!」ボタンをクリックするとmoveメソッドが動き、isActiveが切り替わり、アニメーションが定義されたsmileクラスが付与されてキャラクターが動いて見える...といった流れです。
お気に入り登録ボタンや画面遷移にも応用していけそうですね!
ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です!
採用以外でも、様々なイベントを開催予定です!ぜひオフィスに遊びに来てください!
今年の3月にオフィスが増床、広くてオシャレなイベントスペースが使えるようになりました!
月に数回開催している「プロラボ」「もくもく会」ではたくさんの方に参加いただいています!
柳澤です。
本日のブログを担当します。
よろしくお願いします。
ITプロパートナーズは現在5つの事業をやっています。
上記のサービスは全てPHPを使っています。
事業立ち上げ初期の技術選択はとても大切であると考えており、なぜ弊社はPHPを使い続けているのかをお話したいと思います。
弊社では自社サービスであっても弊社に登録いただいているITプロフェッショナルと一緒に開発する機会が多くあります。
現在開発中のGraspy(https://graspy.jp/)では社員以外は在宅で仕事をしてもらう機会も多く、リモートワークで活躍いただいています。
弊社の登録者は2018年12月時点で約2万人に登録いただいており、内訳は以下のようになっています。
9,115人と約半数がエンジニアとしての登録になります。
登録者のプログラミング言語別の割合が以下になります。
PHP、Javascriptを得意とするエンジニアが全体の約1/3の割合となっています。
弊社の場合、登録いただいているITプロとチームを結成してプロダクト開発に臨んでいます。
上記は開発言語にPHPを使い続けている理由のひとつでもあります。
僕のエンジニアキャリアはJavaからスタートしました。
Java → C# → PHP → Objective-C → Android Java → PHP と経験してきたのですが、生産性を考えたら当時PHPで開発するという選択がベストだと判断しました。
もちろんPHP以外の言語にも興味はありましたし、他のスタートアップはRubyで開発しているからうちもRubyでやりたい、という気持ちも正直ありました。
ただ会社の立ち上げ当初で人数が少ない中、自分がチームに一番貢献できることはやはり、PHPでサービスをつくるということでした。
上でも書きましたが、やはりスタートアップはRubyで開発している企業が多く、弊社のITプロ紹介サービスでもRubyエンジニアを企業様に紹介する機会がすごく多いです。
GoやScalaで開発するという技術的挑戦をしている企業もよく耳にしてましたし、うちも新しい言語や技術に挑戦していくべきではないかと悩んだりもしました。
エンジニアの集まりに参加すると、未だにPHPを使っている古い企業と思われてしまうのではないかと勝手に思い込み、胸を張って「PHP使ってます」と言えませんでした。
この劣等感は自分達が提供するサービスに誇りを持ち、多くの人に価値を提供できるサービスに成長させることによって解消されると考えています。
どんな言語を使っても、結局誰にも使われないサービスであれば意味ないですよね。
以下の3つのポイントが重要だと考えています。
スピード感ある開発を行うにはそれまでのノウハウの蓄積が重要であると考えています。
今までずっとPHPで開発してきたので、ゼロから新しい開発言語を使用して開発するよりも圧倒的に早くサービスをリリースすることが可能です。
サービスの柔軟性、自由度があることにより、試験的にチャレンジできる機会が増えます。
PHPは自由度が高すぎるが故にスパゲッティコードになりがちだという問題がありますが、弊社ではフレームワークをちゃんと理解してつかうことにより、ある程度制約を設けています。
フレームワーク構造を理解し、適切な使い方をするためにペアプログラミング開発を行っています。
サービスがスケールすると開発エンジニアの人数も増やさなければなりません。
難易度の高い言語を開発で選択した場合、採用に苦労します。
市場にはやはりPHPエンジニアエンジニアが多いという印象があり、弊社の登録状況からもやはりPHPエンジニアが一番採用しやすいことがわかります。
人が採用できないが故にプロダクトの成長を止めたくありません。
2018年10月に新サービスをリリースしました。
どんな技術を使っているか紹介します。
「未来を掴む」キャリア形成プラットフォーム Graspy
Graspyでは以下を使用しています。
サーバサイド開発言語:PHP7
フロントサイド開発言語:Nuxt.js、Vue.js
フレームワーク:Laravel5.5
webサーバ:nginx
DB:RDS(Amazon Aurora)
クラウドサーバ:aws(EC2、S3、ELB、route53、cloudfront、他)
その他:docker、SPA、ADR、スクラム開発、Git Flow
昨年のVueフェスではGoldスポンサーをさせていただきました。
先月のLaravelカンファレンスでもスポンサーとして参加させていただきました。
今後はフロントでNuxt.jsやVue.jsに積極的に取り入れ、スポンサー活動も続けて行なっていきたいと思っています。
現在の弊社のサービスは4年前のスタート当時に比べたら使ってもらえる機会も圧倒的に増え、従業員や弊社に関わってくれるITプロもだいぶ増えました。
まだ通過点ではありますが、現在の状況を見ると初期開発をPHPで行うという判断は間違っていなかったと思います。
僕自身は色々な経験や出会いをもたらしてくれたPHPという言語に感謝しています。
PHPを使ってプロダクトを成長させ、多くの人に使ってもらえるサービスにしていくことでPHPコミュニティに貢献できれば嬉しいです。
ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です!
少し技術的なことに投資できるフェーズになってきました。
今回Nuxt.jsやVue.jsを取り入れたように、チャンスがあれば新しいチャレンジもしていきたいと考えています。
ちょっとでも興味を持っていただけたら、まずはお話しましょう。
お気軽にご連絡ください!
ITプロパートナーズのパートナーズ事業部エンジニアチームのリーダーをしている三宅(@miyakey7)です。
今回はITプロパートナーズで、初めてエンジニア主体でサービスの企画から開発までを担った話をしたいと思います。
開発したサービスはSNSのつながりを活用した、ソースコード共有サービス「ReviewMe」です!
2018年度下半期が始まる10月、事業部長直下にエンジニア2人と、19卒でエンジニアとして入社するインターン1人の、4人体制でこのプロジェクトは始まりました。
プロジェクトの目的は、本来の業務(ITプロパートナーズメインサイトの開発)とは別に、業務時間を使って新しい取り組み(サービスの開発)に挑戦しよう、ということです。
開発段階では業務委託のデザイナーさんも加わり5人体制になりました。
普段は事業部長がプロダクトオーナーとしてタスクやサービスの方向を決めるのに対し、今回はエンジニアがプロダクトオーナーになります。
これにより、以下のようなことも今回はエンジニアで決定しました。
当然、サービス内容もエンジニアが中心で決めます。今回は以下の軸をベースに開発するサービスを決定しました。
これらを元に「最短の期間で最小の機能」を作っていきました。
結果として
という機能を中心に作成しました。
詳しくはもう一人のエンジニアでもある、ちゃんなか(@channaka0531)の記事にまとまっています。サービスの方向性決定に言及した内容になっています!
サービス名ももちろんエンジニアが決めます!
今回は商標も取る予定でした。
最初に付けた名前は「PULLREQ(プルリク)」。エンジニアならすぐにイメージが出来る言葉であり、サービス内容を端的に表した素敵な名前でした。
しかし、皆さんご存知の通り、GitHubのPULL REQUEST機能の略称から来ているこの言葉。識別性の観点から、商標を取ることは出来ませんでした。。。(正確には取れる見込みが薄いとのこと)
画像も出来てました..お蔵入りがもったいないのでここに貼っておきます..。
※ちなみに商標調査は代行でお願いすると1回で数万円程度、登録申請代行で内容にもよりますが最小で15万円以上、申請から取得までは時期によって違うらしいですが10ヶ月程かかるそうです!(結構かかりますね..)
200を超える名前案をエンジニア3人で出し尽くしました。
その結果、偶然後ろを通った今回のプロジェクトに全く関わっていないエンジニアの一声
「ReviewMe(レビューミー)」
コレで決まりました!意外なところに答えは落ちているものです。
ReviewMeはデザイン含め、その全てを「1ヶ月」で作りました。
実際にエンジニアが手を動かしたのは2週間程度です!
このスピード感はエンジニアだけで詳細の仕様を口頭+Slackで詰めれた事で実現できたのだと思います。もちろん上長への報告はありますが、プロダクトオーナーである自責が開発を進める上で、大きく影響を与えていたと感じます。
最短の期間を目指していたため、慣れ親しんだ環境を最優先に選定しました。
・Laravel 5.7
・Vue.js
・jQuery(少しだけ)
一度、サイトのオープンソース化も考えましたが、一旦はprivateで開発しております。
ローカル環境は全てdockerでまとめました。
スクラム開発のタスク管理として利用しました。
IFTTTの機能によりReviewMeでシェアしたツイートなどを収集できます。更にその内容をSlackに通知することも出来ます。
コミュニケーションツールはSlackです。多くの議論の結果がSlackに残っています。
ビジネスフレームワーク用に利用しました!詳細は次に書いております!
今回はサービスの強み、弱み、価値を明確にするためにリーンキャンバスを利用しました。リーンキャンパスは端的に表すこと、時間をかけすぎないことが重要で、頭の整理に役立ちます。その内容をチームで共有できるので、非常に効果的です。
以下はその時使った枠組みになります!
こちら実際の進め方としてはRealtimeBoardの機能を使い、オンライン上でテキストを埋めていきました!URLで共有出来、お互いの反映がリアルタイムで反映されるので便利でした。
twitter上のユーザーの意見を迅速に取得しながら開発改善を行っています!
目標時間は要望ツイートから24時間以内です!
以下はエディタの言語選択にElixirが無いという意見を頂き、対応致しました!
使っていて気になる点、要望があればツイートしていただくと幸いです!
弊社イベントスペースではエンジニアが主体で運営しているもくもく会(ProLabo)が月に1回開かれています。
毎回100人を超える応募を頂き、多くのエンジニアやデザイナーが参加していただけています。
今回初期ユーザーとユーザーヒアリングの対象をProLabo参加者に限定しました。
協力してくださった皆さん本当にありがとうございます!
ProLaboは駆け出しのエンジニアや、普段は別の仕事をしながら休日はプログラミングを勉強している方達もたくさん参加しており、そういった人達に使ってもらい意見を直接聞かせてもらいました。
検索がない
などの貴重な意見を貰い、機能開発に役立てることが出来ました!
今回はじめてPRTimesに載せるプレスリリースの内容を考えました。
普段は何気なく読んでいる記事ですが、実際に自分のサービスで書くとなると、表現一つ取ってもサービスの方向性とずれてないか気になります。
記事で表現する際に再度サービスと向き合い、コレって何のためにあるんだっけと考えるきっかけが起き、自分の作ったサービスですが理解が深まるといった経験ができました。
弊社が掲げるバリューの一つに「家族に誇れるサービスを」というものがあります。これは、提供するサービスに誇りを持ち続けられるように、お客様の声に耳を傾けサービスを改善し続けるべきだということ、どんなに規模が拡大しても、一人一人がお客様への提供価値を考え続けるチームでいること、そして「自分の家族に心から薦められるサービスである」 ということをクオリティの基準にする、というバリューです。
私達は全てのサービス開発において、このバリューを大切にしながらを作ることを心掛けています。もちろん今回も同じで、サービスを作る側として立ち返る際の大事な指標になりますし、個人的にとても共感の強いバリューの1つです。
もちろん、今は考えていませんがサービスが終わる時を考えることも時には必要かもしれません。サービスを生み出したなら、エンジニアはその最後まで見届けたいというのが私の本音です。(もちろん色んな理由でこれが難しい事は理解しています。)
意思決定の方法は以下の点で考えています。
・サービスに誇りを持って、お客様に価値を提供出来ているか
・サービスの成長性/継続性
・コスト面
上から順に重要な指標として置いています。
最後が来ないに越した事はありませんが、もし終わらせるなら自分で決断したいと思っています。それがサービスを生むということであり、使ってもらってる人達への責任だと考えます。
そしてReviewMeは絶対終わらせないように頑張ります!!
今回エンジニア主体でサービスの企画から開発までを行なったことで、これまで以上にビジネス的視点を持って開発に取り組めるようになりました。
その点において、本来やらない開発以外の実務の経験(広報、サービス名検討、商標取得、ビジネスフレームワーク、KPI設定)は非常に有意義なもので、そこから得た学びをサービスに役立てることが出来たと感じています!
また新規でミニマムなサービス開発においては、エンジニアドリブンはエンジニアにとってもサービスにとっても良い開発手段だと思いました!
少人数でまだまだ未熟な開発体制ですが、これからサービスと共に最高のプロダクトチームへと成長できるよう頑張ります。
今後はサービスをグロースさせていくことに注力していくことになります。
エンジニアとしてサービスを開発するだけでなく、サービスをグロースするための視点を養えるチャンスだと思います。そういった経験や視点の話もこれから書いていけたらいいなと考えています!
弊社ではサービスにコミットする経験やフェーズに興味のあるエンジニアを絶賛募集中です!僕たちと一緒にReviewMeを作りませんか?
興味ある方は是非フラットにお話し出来ればと思います!
こんにちは! ITプロパートナーズ(https://itpropartners.jp/)インターンの栗岡です!
普段は、Laravelで自社サービスの開発をしたり、新卒採用関係の業務をやっています。
今回は、1月30日に弊社渋谷オフィスで行われたNuxt.js/Vue.jsで開発しているスタートアップ企業によるLTイベントのレポートを行います!
弊社のエンジニアの米川も登壇しました!
続きを読む
intee 担当エンジニアの五藤です。
弊社では、フロントエンドの処理ではVue.jsを採用することが多いです。
そんなVue.jsですが、最近新バージョンがリリースされました。
今回注目すべきはここです。
— today we are excited to announce the release of Vue 2.6 “Macross”!
しかもリリース記事には何やらそれっぽい戦闘機の画像が。ちゃんと可変ギミックもありそう
ソフトウェアやライブラリの開発で、いわゆる正式名称やバージョン番号とは別に、愛称のような物を付けるケースがあります。
有名どころでは、Android OSの「Lolipop」「KitKat」のようなお菓子縛りや、MacOS では「Mavericks」「Sierra」など、カリフォルニアの地名が付けられています。
開発コードをつける背景としては
などなどです。
version | 開発コードネーム | 日本語名称 | アニメ初出年 | 制作会社 |
v2.6 | Macross | 超時空要塞マクロス | 1982年 | タツノコプロ |
v2.5 | Level E | レベルE | 2011年 | Studioピエロ✕david production |
v2.4 | Kill la Kill | キルラキル | 2013年 | TRIGGER |
v2.3 | JoJo's Bizarre Adventure | ジョジョの奇妙な冒険 | 1993年 | A.P.P.P |
v2.2 | Initial D | 頭文字D | 1998年 | スタジオコメット、ぎゃろっぷ他 |
v2.1 | Hunter X Hunter | HUNTER✕HUNTER | 1999年 | スタジオディーン、日本アニメーション他 |
v2.0 | Ghost in the Shell | GHOST IN THE SHELL / 攻殻機動隊 | 1995年 | Production I.G |
v1.0 | Evangelion | 新世紀エヴァンゲリオン | 1995年 | タツノコプロ、GAINAX |
v0.12.0 | Dragon Ball | ドラゴンボール | 1986年 | 東映動画 |
v0.11.0 | Cowboy Bebop | カウボーイビバップ | 1998年 | サンライズ |
v0.12.0 | Blade Runner | - | 1982年 | - |
v0.12.0 | Animatrix | アニマトリックス | 2003年 | スクウェアUSA、STUDIO 4℃、マッドハウス他 |
・・・予想以上にアニオタだぞこれ!?
海外アニメファンの評価が高い「攻殻機動隊」「カウボーイビバップ」「ドラゴンボール」辺りを押さえつつ、2010年台の「キルラキル(2013-2014)」「レベルE(2011)」あたりを混ぜてみたりと、結構なこだわりようです。
そして命名にはルールがあり、Animatrix から Macross まで、綺麗に先頭の頭文字がアルファベット順に並んでいます。 (頭文字Dのイニシャルが「D」ではなくて「I」扱いなのは若干納得がいかない)
ちなみに最初期は
「Animatrix(超有名SF映画「マトリックス」のアニメスピンオフ作品)
「Blade Runner(カルト的な人気を誇る古典SF映画)」
と、どちらかといえばSF路線の名前をつけていたけど、少しずつ吹っ切れてきた模様。
また、Vue.jsの作者である Evan Youの個人サイトのプロフィールには
Outside of programming and helping my wife take care of our two kids, I enjoy video games, karaoke, sushi and collecting watches.
プログラミングと育児以外では 、ビデオゲームやカラオケ、寿司、時計の収集が趣味です。
とあります。ものすごくアニメが好き!というのを全面に押し出しているわけではないですが、コードネームの並びを見る限りは、結構なアニメ好きなのが見て取れます。
(なお、後述の予想サイトには、Kazuponさんを始めとしたContributorも次Verの予想を書き込んでいるため、コードネームはEvan氏が一人で決めている可能性が高いです。)
アルファベット順、というルールがある以上、予想したくなるのが人の常、ということで、次バージョンのコードネームの予想を議論するサイトもすでに出来ていたりします。
最新の2.6に対するissueでは「Macross」と「Monster」が2大予想になっていたので、見事的中していた模様。
折角なので本ブログでも次バージョンを予想してみます。
大本命は、忍者をフューチャーした世界観と、圧倒的なアクション作画で海外から圧倒的な支持を得ているこの作品。海外においては、アニメ好き=NARUTO好き、と言っても過言ではありません。
過去のコードネームで「DRAGON BALL」「攻殻機動隊」などの超有名作品をしっかりと押さえていることを考えると非常に可能性は高いです。
という雰囲気すらします。むしろ、この先Vue.jsのシェアが伸びてきた場合、Vue.jsのコードネームに採用される=超有名アニメとして認められる 、というコンセンサスが社会的に形成されることも十分考えられるので、むしろ、
「この流れでNARUTOを外していいのか?」
という雰囲気すら感じられます。
微妙に何を言っているのかわかりませんが、2.7.0はかなりの可能性で「NARUTO」が採用されると言って間違いがないと思います。
エヴァンゲリオンで一般層を巻き込んだ空前のアニメブームが起きていた90年代後半時代に、重厚なSF設定と軽妙なシナリオで人気を博した名作です。唯一対抗馬になりそうなのはこれくらいでしょうか。
有力な要素
懸念点
個人的には好きなんですけどね、ナデシコ。
言わずとしれたジブリアニメの雄ですね。
有力な要素
懸念点
ジブリアニメ自体は非常に有力なのですが、
「NARUTO」か「ナウシカ」の2択だと、NARUTOを選ぶような気がするんですよね・・・。
これが「NARUTO」と「ナデシコ」の2択だと、ナデシコを選ぶ可能性がありそうに感じてしまうのは、なんとなくアニメファンの業みたいなものを感じます。
以上、Vue.jsのコードネーム界隈の話でした!
フロントエンド界隈では確固たる地位を得たVue.jsですが、本筋とは別に、こんな楽しみ方も提供していることを知ってもらえれば幸いです!
続きを読む