テクノ大福帳

本記事では、Firebase Local Emulator Suite の Functions Emulator を利用してWeb版 FriendlyChat のコードラボにある Vision API（セーフサーチ）や FCM の機能を試してみます。 【目次】 ［１］はじめに ［２］概要 ［３］実行環境の準備 （１）料金プランを従量課金制（Blaze プラン）に移行 （２）Vision API の有効化 （３）ImageMagick のインストール （４）サービスアカウント ［４］Functions プログラムの準備 （１）ソースコードとプロジェクトディレクトリの準備 （２）依存パッケージのインストール （３）Vision API を利用するための検討 （４）Storage Emulator からダウンロードするための検討 （５）Vision API と Storage Emulator に対応するコード例 （６）ロケーションの変更コード ［５］FriendlyChat を Local Emulator Suite で実行 （１）起動方法 （２）動作確認 ［６］Firebase にデプロイして実行 ［１］はじめに 本記事は、前の記事『 Firebase Local Emulator Suite で Web版 FriendlyChat を動かしてみる 』の続編です。 前の記事では、以下の Web版 FriendlyChat を作るコードラボを取り上げました。 （前回のコードラボ＝＞）FirebaseWebコードラボ https://firebase.google.com/codelabs/firebase-web#0 このコードラボは、クライアントアプリから Authentication、Firestore、Storage を利用してリアルタイムチャットアプリを作成します。そして、その完成版コードを利用して、Local Emulator Suite で動かしました。 このコードラボには続編があります。本記事はこれを取り上げます。 （今回のコードラボ＝＞）Firebaseのクラウド機能 https://firebase.google.com/codelabs/firebase-cloud-functions#0 続編である今回のコードラボで

本記事では Web版 FriendlyChat の完成版ソースコードをビルドして、Local Emulator Suite で動かすことで、Firebase を体感してみます。 【目次】 ［１］はじめに ［２］Firebase プロジェクトの準備 （１）プロジェクトの作成 （２）アプリの追加 （３）Authentication の設定 （４）Cloud Firestore の設定（＋ロケーションの選択） （５）Cloud Storage の設定 ［３］ローカル開発環境の準備 （１）Firebase CLI などツールの準備とログイン （２）参考：より詳細なセットアップ手順 ［４］FriendlyChat のビルド （１）ソースコードのダウンロードとプロジェクトディレクトリの準備 （２）依存パッケージのインストールと webpack の利用 （３）構成オブジェクトの設定 （４）ルールファイルの修正 ［５］FriendlyChat を Local Emulator Suite で実行 （１）ソースコードに Emulator に接続するコードを追加する （２）Local Emulator Suite の初期化 （３）Local Emulator Suite でアプリを動かす （４）参考：Local Emulator Suite のデータ読込や保存など （５）FriendlyChat を使ってみる ［６］Firebase にデプロイして実行 ［１］はじめに Firebase を手っ取り早く理解するには、実際に動くものを見て、そのコードを読むのが一番良いと思います。その教材となるものはいろいろあると思いますが、中でもよくできていると私が思っているのは、Friendly Chat です。 FriendlyChat はいろいろなバリエーションがあるようですが、本記事で取り上げるのは Web 版のコードラボです。 FirebaseWebコードラボ https://firebase.google.com/codelabs/firebase-web#0 FriendlyChat はチャットアプリで、自分が投稿したメッセージや画像は即座に他のユーザの画面に反映されます。 （以下の画像は、FriendlyChat を Local Emulator Suite で実行