サービス企画〜リリースまでを AWS Amplify と Working Backwards をフル活用して爆速でやってみた
builders.flash をご覧の皆様、こんにちは！
クラスメソッド株式会社コンサルティング部 ソリューションアーキテクトの門別です。
2020 年の 1 月から 3 月まで『Amazon 流のイノベーションの考え方である Working Backwards を学んで自らサービスを企画し、5 人チームで実際に模擬プロジェクトを約 2 ヶ月で開発する』という、AWS 主催の APN Next Generation Engineer Leader Dojo、略して『ANGEL Dojo』という新人エンジニア育成プログラムに参加させて頂きました。
ANGEL Dojo では最終的に「日本を元気にするモノを作る」事が目標で、毎週 2 回ほど AWS に関する講義まで行って頂き、ANGEL Dojo が終わる頃には AWS を中心とする技術の知識はもちろん、「実際にプロジェクトを進めてみないとわからないような事」をたくさん学べたため、本記事にてご紹介していきます！
※ANGEL Dojoの詳細についてはこちらの記事をご覧ください。
実際に作った物
私たちのチームでは、『中途半端で終わらせない。問題とミニブログで技術を学ぶエンジニア向け学習サービス』である、『Loop I/O』を作成しました。
Loop I/O では複数の課題が提供されており、「ユーザーは興味のある課題を選んで解き(インプット)、工夫した点、詰まった点、学べた点などをミニブログとして書いて提出 (アウトプット) できるサービス」となっており、これらを繰り返していくことで継続的な学習をできるサービスです。
物凄くわかりやすく言ってしまえば、「プログラミング学習サイトと技術ブログ投稿サイト」を組み合わせたものです。
実際の問題一覧画面はこんな感じで、面白そうな技術に関する課題が複数提供されています。
課題画面では左側に表示される問題を解きつつ、右側に詰まったこと、工夫したところなどを Markdown で書き、解き終わったらプレビューで確認しつつブログを投稿することができます。
公開したブログは一覧から見ることができ、他の人がどのように回答したのかをのぞいてどんなアプローチで解いたのかを見てみる、なんてこともできます。
これらのサービスをメンバー 5 人で企画〜設計まで約 2 ヶ月で作成しました。
実際の業務も並行で行なったため、1 週間の稼働のうち 3 分の 1 程度の工数しかかけられませんでしたが、非常にスピーディーに開発を行うことができました。
サービス企画の難しさ、Working Backwards の考え方と答え
ANGEL Dojo では Amazon 流のイノベーションの考え方、「Working Backwards」という方法を用いて企画を進めていきます。
Working Backwards は「お客様は誰なのか ?」からなる五つの質問を答え、お客様にとって本当に必要なサービスを企画して、プロダクトを開発する前にプレスリリースを書いて作るものを明確にして、QA でより具体的な体験をまとめる企画方法です。
面白い事に ANGEL Dojo の紹介記事自体が Working Backwards に基づいたプレスリリースになっていたりします。
具体的には下記のような五つの質問に答える形で、企画していきます。
1. お客様は誰ですか ?
2. お客様が抱える課題や改善点は明確ですか ?
3. お客様が受けるメリットは明確ですか ?
4. お客様のニーズやウォンツをどのように知りましたか ?
5. お客様の体験が描けていますか ?私たちのチームでは、Working Backwards に沿って次に紹介するように掘り進めて考えていきました。
1. お客様は誰ですか ?
- 地方出身の 25 歳男性、就職のために東京に引っ越して IT 企業に新卒で入社し、3 年経過
- 会社は一応 IT 企業だが、最先端の技術を触れる環境ではない
- 意識が高いがなかなか周りからは認められていない、空回りしてるイメージ
- 独身、一人暮らし、友達 & 恋人なし
- 将来に対するモヤッとした不安がある (終身雇用制度の崩壊など)
2. お客様が抱える課題や改善点は明確ですか ?
- 「将来に対するモヤッとした不安」とは、今後エンジニアとしてご飯を食べていくときに、今の技術力だけで良いのかがわからない。
- =エンジニアとして強くなりたいが、周りに技術に長けている知り合いも居ないため、何をすればいいのかがわからないため、勉強方法がわからない。そのため空回りしている。
3. お客様が受けるメリットは明確ですか ?
このサービスを使うことで、エンジニアとして強くなることができます。
- 課題では短期的なゴールが明確に書かれているため、目標を迷わずに学習できます。
- インプットとアウトプットを継続的に行えるようになり、定着率が上がります。
- エンジニアとして成長することで、現在の職場環境を変えるアクションを起こせるようになるか、即戦力的な人材として転職出来るようになり、結果的にお客様の将来の不安を解消できます。
4. お客様のニーズやウォンツをどのように知りましたか ?
過去の自分たちの体験のため。
- 完全未経験から学習を始めようとするとき、チュートリアルの Hello World で満足してしまい、次のアクションが重く感じる。
- 学習範囲が広すぎてやりたいことが分からなくなってしまう。
5. お客様の体験が描けていますか ?
サービスのガードレールに支えられながらも自律的に考える力を身につけることができ、将来的には学習エンジンを持ったエンジニアになれます。
- サービスが提供する課題ではやることが決まっているため、『学習範囲が広くてやりたいことが分からない問題』を解消しています。
- サービスが提供する課題はさまざまなアプローチで回答出来るようにしているため、先駆者のブログを見ることで新たな知識を学ぶことができ、自らやってみる時も新しい方法を探せるようになります。
- アウトプットすることにより「Hello Worldをこのコードを書けば出力できます」から「Hello Worldはこのような仕組みで出力されます」のように、やっていることに対してより深い知識を習得できます。
ペルソナの重要さ、難しさ
ここまで Working Backwards に基づいて弊社チームが設定した五つの質問に対する私達なりの答えを記載しましたが、実際に考えているとペルソナ設定 (1. お客様は誰ですか ?) がとても重要で難しい事に気付かされました。
例えば「独身、一人暮らし、友達 & 恋人」の部分でいくと、彼は「コミュニケーションが苦手」であり、本当にこのサービスの提供するコミュニティで居心地よく継続的に学習することができるのか、そもそもこのサービスをどのようにお客様に見つけてもらい、ユーザー登録をしてもらえるのかなど、より利用者に寄り添った深い点まで考えることができ、スタートアップなどでサービスを企画する場面でも有効活用出来ると思います。
Amplify + AWS AppSync + Amazon Cognito を利用したサービスのアーキテクチャ
今回のアプリケーションは、フロントは React + Amplify の SPA (シングルページアプリケーション) で、データは AppSync (+ DynamoDB)、認証認可は Cognito で実装しており、全て Amplify CLI で作成できるアーキテクチャで、完全なサーバーレスになっています。
フロントエンドの UI 周りでは、Material-UI と react-masonry-component を利用しており、カード一覧画面を短期間で作成することができました。
認証認可についても Amplify の withAuthenticator を使う事で複雑なロジックを書かずに簡単に Cognito との連携、ログイン画面の UI を利用できます。
認証認可については Amplify + Cognito がシームレスに連携しているため、画面を描画する際にログイン済みかを確認して、簡単に出し分けを行うことができます。
import { Auth } from "aws-amplify";
...
const [state, setState] = useState(true);
useEffect(() => {
async function getCurrentAuthenticatedUser() {
// ログインしているのかをチェック
const userInfo = await Auth.currentUserInfo();
userInfo ? setState(true) : setState(false);
}
getCurrentAuthenticatedUser().then(() => console.log(state));
}, []);Amplify + AppSync + Cognito の連携
通常、AppSync 単体で利用する場合は Graph QL の Resolver を手動で作成したり、必要に応じて自分で Query を書く必要がありますが、Amplify と AppSync を利用する場合はスキーマを定義するだけで Resolver を自動で生成してくれて、Query も生成されたファイルを import して利用するだけです。
こちらはブログデータを AppSync を叩いて取得してくるコードですが、 `getBlog` をインポートして `graphqlOperation` に渡してあげるだけでデータを取得できます。
import { graphqlOperation } from "aws-amplify";
import { getBlog } from "../graphql/queries";
...
useEffect(() => {
try {
const fetchData = async () => {
// データ取得
const response = await API.graphql(
graphqlOperation(getBlog, { id: blogId })
);
console.log(response);
};
fetchData();
} catch (err) {
console.log(err);
}
}, []);GraphQL 側の権限管理も Cognito とシームレスに連携しており、特定の人にしか権限を渡さないようにしたい場合は `@auth` を利用することで簡単に制御できます。
type Blog
@model
@auth(
rules: [
{ allow: owner, operations: [read, create, update, delete] }
{ allow: private, operations: [read] }
]
) {
id: ID!
title: String!
body: String!
author: String!
problem: String
image: String
}メンバーのレベル差、超短期な開発期間
ANGEL Dojo への参加条件はIT経験が 1 年~ 3 年となっていますが、弊社では基本的に中途採用がメインとなっているため、様々なバックグラウンドを持った人が集まり、開発経験のあるメンバーが 2 人、開発経験のないメンバーが 3 人集まりました。
全員 AWS Solutions Architect Professional を持っていて汎用的な AWS の知識に関しては全く問題ありませんでしたが、今回作成したプロダクトは Amplify + AppSync + Cognito とインフラを意識しなくて良い構成のため、開発経験のない 3 人にはフロントエンドとコーディングの知識習得を頑張ってもらう必要がありました。
そのため、開発スタートから 1 ヶ月程は Dev チームと Biz チームに分けて、フロントエンドの開発は Dev チームで行い、要件定義、プロジェクトマネージメント、デザインを Biz チームで分担するようにロールを分けました。
最終的には開発経験のない 3 人にも React を勉強してもらい、簡単なタスクを切り出して、Biz 寄りのタスクと並行してコーディングしてもらう形に落ち着きました。
タスクのアサイン
開発タスクのアサインについては、まず追加機能要望を Issue として起票し、モチベーションが高くてやりたい人が手を上げて開発を進める形にしました。(気がついたらなっていました)
やりたくもない事を無理やりお願いしたらモチベーションが続かないですし、何より楽しくないと思うので、挙手アサイン形式はとても良いと実感できました。
必要最低限の物を実装する
常に『最小限で製品として提供できるレベル』の MVP (Minimum Viable Product) を常に定義して実装を進めていました。
具体的に弊社チームでは、Issue として欲しいと思った機能の追加要望は起票しましたが、「本当に今必要な物なのか？」「ANGEL Dojo の最終発表 (納期) までに他のことを犠牲にしてまでこれを実装するべきなのか ?」をよく検討した上で、最終発表までにユーザー体験が損なわれないレベルの最低限動く物を実装するために取捨選択して行きました。
結果的に取捨選択して手をつけられなかった追加機能の Issue は 10 個ほどありますが、サービスとして成り立つ最低限の機能を実装した上で最終発表を迎えることができ、完成度について評価をいただくことができました。
リモートワークの壁
弊社では拠点が各地に分散している事もあり、隣に座っていると数秒で終わるような質問などでもテキストベースでは何分もかかったりして、コミュニケーションコストが非常に高くなっていました。
そこでゲーマー向けのボイスチャットサービスである Discord を利用し、作業中はボイスチャンネルに入りっぱなしにした事で、ちょっとした雑談や相談などをストレスなく行うことができました。
Discord は会話に遅延がなく同時に喋っても音がこもらないため、喋る時のストレスもなく、Meeting ID を払い出して参加するタイプの会議アプリよりも気軽に参加できるので非常におすすめです。
スタートアップ、新規開発には Working Backwards / Amplify 導入が役立つ
今回は疑似プロジェクトで実際にサービスのローンチまではしませんが、5 人チームで開発未経験も 3 人いる中、限られた時間でここまで動くものを開発できたのは Working Backwards を利用した企画と Amplify + AppSync + Cognito を使ったおかげと言っても過言ではありません。
気になる料金ですが、開発段階では月 $6 程度で、一番高かったのはドメインの購入でした。
よくスモールスタートで開発を始めてビジネスが軌道に乗るのと同時にスケーリングさせると言われますが、開発段階で初期費用がここまで安いのは大変魅力的です。
まとめ
ANGEL Dojo を通して得られたものはAWSの知識、Amplify などのフレームワークの具体的な知見はもちろんですが、サービス企画、プロジェクトの進め方、管理方法など、一般的なエンジニアとして過ごしているとなかなか触れる機会がないレイヤーの実践的な勉強をできる大変貴重な機会をいただけてとても感謝しています !
既に ANGEL Dojo Season 2 の締め切りは終了してしまいましたが、2020 年 6 月以降に Season 3 の開催予定もあるとのことなので、ぜひ「面白そうだな !」と思った方は参加してみてください !!!
筆者プロフィール
門別 優多
クラスメソッド株式会社 AWS事業本部 コンサルティング部
ソリューションアーキテクト
主に AWS 環境構築をメインで担当しており、Nginx, Docker, Terraform などのインフラ周辺ミドルウェアから、TypeScript を利用した開発、自宅 Kubernetes クラスター運用などをしています。
好きな AWS サービスは Amplify とEC2 Spot、IaC は CDK 派で、趣味は REST API を叩く事。
ラーメンはスープから飲む派です。
AWS を無料でお試しいただけます