Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング2018/03/27 by @jshosomichi
View Slide
自己紹介せきようすけ a.k.a "ほそ道"Fringe81所属 フロントエンドエンジニア得意技:JavaScript / Elm / TypeScript / ReactNative
事業企画 実現性検証 事業化Go!いつもはローンチ向け開発をやることが多いのですが・事業化Go!が出た後の開発・拡張性があり安定運用出来る堅牢な基盤ローンチに向けた開発
本日お話する新規事業開発は下記、検証段階であります・事業化Go!が出る前の開発・アイデアが事業としてモノになるか検証するためのアプリ・品質的には最小機能で提供価値の検証が出来ればOK事業企画 実現性検証プロトタイピング事業化Go!ここを進めたい!ローンチに向けた開発
予選を勝ち抜いてきた、事業化の可能性がある3企画。これらを2ヶ月以内に事業化Go!の判断が出来るよう検証可能(実際に動く)なプロトタイプを開発せよ。事業企画事業企画事業企画今回のミッション実現性検証プロトタイピング事業化Go!
まだ利益を生み出せるかが不確実な段階のため、いったん少ない人数で3つのアプリ開発 in 2ヶ月を行うことに各プロダクトの企画者プログラマ(ワタクシひとり)デザイナ検証チーム
各プロダクトの企画者プログラマ(ワタクシひとり)デザイナ検証チームえっまだ利益を生み出せるかが不確実な段階のため、いったん少ない人数で3つのアプリ開発 in 2ヶ月を行うことに
プログラマ(ワタクシひとり)さて、3つのプロトタイプ、どうやって作ろう?
プロトタイプの設計時間/デザイン時間も考慮すると実際コードを書ける時間はより限られてくる。開発スピードを担保する為の戦略を考ねばなりません。プログラマ(ワタクシひとり)さて、3つのプロトタイプ、どうやって作ろう?
プログラマ(ワタクシひとり)さて、3つのプロトタイプ、どうやって作ろう?フロントエンド開発は得意なので速く作る算段は立つなぁプロトタイプの設計時間/デザイン時間も考慮すると実際コードを書ける時間はより限られてくる。開発スピードを担保する為の戦略を考ねばなりません。
プロトタイプの設計時間も考慮すると実際コードを書ける時間はより限られてくる。開発スピードを担保する為の戦略を考ねばなりません。プログラマ(ワタクシひとり)さて、3つのプロトタイプ、どうやって作ろう?バックエンドは学習コストを下げたいなぁフロントエンド開発は得意なので速く作る算段は立つなぁ
サーバエンジニアレス開発 with Firebase強みを活かせる技術選定で戦を略そう!
モバイルアプリが強調されていますが、今回はブラウザです。FirebaseはブラウザのWebアプリ開発まわりでもJavaScript SDKという形で同様に機能提供してくれています。ちなみに公式ページのトップでは
今回は下記5つのfirebaseサービスを利用しました今日はひとつずつ使いっぷりを紹介してまいります
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGHosting
Hosting指定したディレクトリ(省略時public/)配下のファイル群をコマンドひとつでWebサーバの配下に設置してくれます。検証時にユーザがアクセス出来るURLも用意してくれます。
Hosting過去にデプロイしたバージョンにもGUI操作で戻すことが出来ます。
Hosting自分で仕組みを作っていたひと昔前の感覚に立ち返ると、色々と戦を略すことができています。
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGAuthentication認証・サインアップ・サインイン・サインアウト
Authentication色々な認証方法と、アクセス元の制御機能などを提供してくれています。Slack認証などもカスタムでできます。
Authenticationエラーコードが内容を細かく判定してくれているので、ユーザーのメールアドレスが既に登録されているかなども下記のようにして確認可能でした。
Authenticationいちどサインインすると、その状態をブラウザに保存してくれ、明示的なサインアウトをするまでその状態は保持され続けます。※サインイン状態の確認は非同期で行われるので、 画面遷移のハンドリングは自前でちょっと工夫が必要でした。auth.onAuthStateChangedを呼んでおくと後でuser/errorが入ってくる仕組み
今回用意した認証システムは3プロトタイプでほぼ変更なしで使い回すことができましたAuthentication
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGCloud Firestore認証・サインアップ・サインイン・サインアウトDB・インスタンス群の永続化
Cloud FirestoreDatabaseは2つの選択肢がありますがUniposの開発時にRealtime Databaseを使った経験があったので今回は新しく登場したFirestore(β版)を使ってみようと思いました。
Cloud Firestoreにじみ出るパワーアップ感プロトタイプ開発ならではの冒険しやすさ公式ドキュメントの比較
Cloud Firestoreコレクション-ドキュメント-フィールドの階層で値を保持する。MongoDBのような構造。ブラウザコンソール上でクエリを行う仕組みがいずれ出来ると嬉しいです。
Cloud Firestorebatchというオブジェクトを引き回すことで、アトミックトランザクションを行うことができます。(commitするまではset/updateを繰り返しても保存されない。)
Cloud Firestore新規にIDを払い出すこともできます。非同期処理していないので、完全な一意性を確認・担保しているわけではないと思いますが。ID被りをフォローしておけば、とても便利に使えます。
Cloud Firestoreバリデーションはクライアントサイドとセキュリティルールの合わせ技で行いました例えば「Cityドキュメントのemailフィールドはユニークでなければならない」というアプリケーション制約があれば、一度データを取得して有無を確認。Firestore側にセキュリティルールを設定しておくと違反時にはエラーを返して保存処理を防ぐことができます。
Cloud Firestore永続化処理をクライアント側に担わせることで更に色々な戦を略すことができました。
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGCloud Storage認証・サインアップ・サインイン・サインアウトファイルサーバ・動的画像保存DB・インスタンス群の永続化
Cloud Storageシステム内で登録される動的画像はCloud Storageに保存。ディレクトリを切ることも出来ます。
Cloud Storageアップロードするファイル名はクライアント側で設定する必要があります。今回はFireStoreを使ってIDを払い出して、そのIDを画像ファイル名とするなどしていました。
Cloud Storageダウンロード時、ファイルの場所を示すURLしか持っていない場合は非同期APIで変換したURLでアクセスする必要があります。tokenパラメータが付与されたURLが返される
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGCloud Functions認証・サインアップ・サインイン・サインアウトファイルサーバ・動的画像保存DB・インスタンス群の永続化イベントフック処理・データ変更を監視して通知送信
Cloud Functionsさまざまなトリガーに対してあらかじめデプロイしたJavaScriptコードを実行することが出来ます。(直接HTTPリクエストを受けるトリガーも作れます)
Cloud Functions今回のプロトタイプでは主にfirestoreのデータ更新をトリガーとしてメールの通知を行っていました。
Cloud Functions更新前後のデータにアクセスすることが出来るので完了フラグの状態推移を見極めて、通知を送ることができ、便利です。
Cloud Functions事前予想ではセットアップの手間がめんどくさいのでは。。などと思っていたのですが、コマンド一発でデプロイしてすぐに使えるようになりました。簡単!local cloud functionsJS
クライアント(ブラウザ)Webサーバ・HTML・CSS・IMGこの構成で3プロトタイプの全要件を満たすことができました!認証・サインアップ・サインイン・サインアウトファイルサーバ・動的画像保存DB・インスタンス群の永続化イベントフック処理・データ変更を監視して通知送信
これで、JavaScript知識を中心としたNoサーバインスタンスNoサーバサイドエンジニアの世界が実現しました
ビューロジックIOロジックFirebaseラッパーFirebaseサービスAPIコードの再利用についても戦を略しました①Firebaseアクセスの汎用パターンをラッパー化することでプロトタイプAのコードをプロトタイプBで再利用Firebase知識範囲
ビューロジックIOロジックFirebaseラッパーFirebaseサービスAPIコードの再利用についても戦を略しました②画面のロジックとFirebaseにアクセスする層を完全分離することでローンチ向け開発に移行した場合も、ビューロジックはそのまま使うことができるようにしています。外部アクセス知識範囲
略せる戦を略し倒し、結果的にフロントエンジニアひとり体制で・手を動かす時間は4週間・1プロジェクト目: 2週間・2プロジェクト目以降:1週間3つのプロトタイプを構築しきることができました!かなり良いペース!(のはず)
Firebaseのおかげでこれからのプロトタイプも「任しとけ!」と自信を持って言うことが出来そうですありがとう、Firebase!