LoginSignup
753
847

More than 3 years have passed since last update.

@taketakekaho(たけだ)

Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン

Last updated at Posted at 2019-09-25

経緯

私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます）

参加した勉強会

こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。
image.png
image.png

ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。
こういうの作るの大変だけど自分自身勉強になるんだよね。

おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。

完成イメージ

こんなのが作成できます。Google認証も簡単に実装できちゃう。
Screenshot from Gyazo

アプリの構成

作成するチャットアプリの構成です。開発環境自体をクラウド上で行うので環境差分なしに開発ができますね。
image.png
※ハンズオンスライドから引用

必要なもの

  • インターネットに接続できるパソコン
  • Googleアカウント（無料アカウントでOK）
  • ブラウザ（私はChromeで実施しましたが他のブラウザでもOk）

ハンズオン実施

github上のソースをクラウド上の開発環境（CloudShell）で開く

MarkingCloudさんが用意してくれたgithub上のハンズオンアプリソースをGoogleが提供するクラウド上の開発環境CloudShellで開きます。
githubのREADMEページにある[OPEN IN GOOGLE CLOUD SHELL]ボタンをクリックします。
image.png
CloudShell画面に遷移し、ポップアップが起動しますので[続行]をクリック
image.png
これがCloudShell画面です。開発環境が一瞬で用意できるってすごい。
image.png
ちなみに、どうやってgithubのソースをCloudShellで開いてるのかはここのGoogleのドキュメントにあります。中でクローンしてくれてるようです。

Firebaseプロジェクト作成

開発環境が用意できたので、それを乗せるアプリを作ります。Firebaseコンソールを開き[プロジェクトを追加]をクリック
image.png
プロジェクトの名前を付けます。（easy-chatは一度作成したので今回私はlight-chatで作ります。）
image.png
アプリの名前をユニークにするために自動で後ろに乱数みたいなのが付くようですがここクリックすると
image.png
好きな名前に変更できるみたいですね。変更してもよいと思いますが、このプロジェクトIDをあとで使うので コピーしてメモ しておきます。私は変更せずにそのままで[続行]ボタンクリックして先に進めました。
image.png
このハンズオンではGoogleアナリティクスはなしでいいので無効にして[プロジェクトを作成]をクリックします。
image.png
デプロイ中...
image.png
数秒で作成完了。[続行]をクリック
image.png
Firebaseコンソールで作成したプロジェクト画面が表示されます。
image.png

え？これホントに無料で使えるの？って思ってしまいますが、画面左下に「Spark 無料$0/月」と表示されてて安心しました。
image.png
料金プランに関してはこのページ参考になります。プランは3つあるんですね。無料プランあるのありがたい。
image.png

CloudShellでFirebaseプロジェクトを紐づけ

CloudShell画面に戻り、下のコマンドラインで以下のコマンドを実行します。

CloudShellコマンド
cd ~/easy-chat
firebase login --no-localhost

別のFirebaseプロジェクト作った情報が残ってて別のGoogleアカウントでログインされた状態になっていたら firebase logout コマンドで抜けられます。

お、なんか出た。
image.png

和訳すると...
FirebaseはオプションでCLIの使用状況とエラー報告情報を収集して、製品の改善に役立てます。データはGoogleのプライバシーポリシー（https://policies.google.com/privacy ）に従って収集され、ユーザーの識別には使用されません。FirebaseがCLIの使用状況とエラーレポート情報を収集できるようにしますか？

そしてデバッグログが作成されるんですね。
image.png

利用状況把握のためGoogleに情報渡してもよい？って聞いてるだけなのでどちらでもいいですがハンズオンなのでNoで回答します。
ながーいURLが出力されます。これでFirebaseのプロジェクトで認証させるんですね。
image.png
このながーいURLをコピーしてブラウザの別タブのアドレス欄にペーストするとGoogleの認証画面に遷移します。
image.png
ここにFirebaseプロジェクトを作成したときのGoogleアドレスを入力して[次へ]をクリックしてパスワードを入力
image.png
Firebaseプロジェクトのこの情報を使うことを許可してもよい？って聞いてくるので[許可]をクリック
image.png
また長いコードが表示されるのでコピーして
image.png
CloudShellの「? Paste authorization code here:」のあとにペーストして実行し「Success!」と出力されプロンプトが返ってきたら成功。うれしい。
image.png
これで開発環境とFirebase上のアプリをつなげるための認証ができました。準備ができたので以下のコマンドでつなげます。

CloudShellコマンド
firebase use <ここにPROJECT ID入れる>

「Now using project 」が出力されてプロンプトが返ってきます。
image.png

PROJECT IDはFirebaseコンソールでプロジェクト作成した時に表示されたこのIDです。
image.png
もしコピーし忘れた方はFirebaseコンソールでSettingボタン＞プロジェクトの設定から見れますよ。
image.png

Configを追加

Firebaseコンソールに移り、このウェブアイコンをクリックします。
image.png
ウェブアプリへのFirebaseの追加画面が表示されるので、アプリのニックネーム（なんでもよさそう）を入力して「このアプリのFirebase Hostingも設定します」にチェックして[アプリを登録]ボタンをクリックします。
image.png

Firebase HostingについてはここのGoogleドキュメントが参考になります。Webサイトを作ってくれるんですね。チャットでいう見た目の部分。

Firebase SDKの追加画面でスクリプトが表示されます。今回のハンズオンではここの下2ステップ分だけ使うので下2行分だけコピーしておきます。
image.png
そのまま③④は何もせずに[次へ]ボタンで進めます。
image.png
image.png

今回はCloudShell使うので環境構築不要なのでスキップしてOKですが、PCのローカル環境で開発するときにはこの手順で環境準備するってことですね。

またコンソール画面に戻り、「1個のアプリ」と表示されてアプリが追加されたことがわかります。
image.png

CloudShellの画面に戻ります。左上のツリーメニューで index.html ファイルを選択すると右側にファイルのエディタ画面が表示されます。
先ほどコピーしたコードをL97～102のscriptタグ部分を置き換えて
image.png
image.png

同様にlogin.htmlファイルのL53～58のscriptタグ部分も置き換えて
image.png
image.png

CloudShellのコマンドラインから以下のコマンドを実行

CloudShellコマンド
firebase serve

プロンプトが返ってこずにローカルホストサーバを5000ポートで起動してくれます。すげえ。
image.png

で、このURLをクリックすると別タブでチャットっぽい画面が表示されます。すげえ！
image.png

で、main.jsのL87～90のコメントアウトを外します。
image.png
image.png

コメント化や解除はショートカットで一括操作できますね。Windowsなら Ctrl + / で外せました。

今の状態でチャットに文字を入力するとこういう動きになります。入力したデータをサーバで保持しないので、ブラウザをリロードすると消えちゃう状態ですね。
Screenshot from Gyazo

Firebaseの設定修正

入力したメッセージをサーバ上に保持するための設定変更します。Firebaseコンソールの左メニューから[Database]をクリックして
image.png
[データベースの作成]をクリック
image.png
データベースの作成画面で、今回は[テストモードで開始]を選択して[次へ]をクリック
image.png

ハンズオンのため割愛してましたが、DBとのプライベート接続設定など行うためのセキュリティルール設定などを行うみたいですね。ここのドキュメント参照
Googleのドキュメント、読みやすい。

CloudFireStoreのロケーションを設定して[完了]をクリック。
image.png
1分くらい待つと
image.png
こんな画面になります。
image.png
[コレクションを開始]をクリックして
image.png
コレクションIDを登録します。Firebaseではデータベース名のことをコレクションIDっていうのかな？ここでは messages を入れて[次へ]をクリック
image.png
コレクション名の中のフィールド名とテスト用の値を入れて[保存]をクリック。UIが素敵！！
image.png
これでテスト用のデータが入った
image.png
Databaseと接続するためのコード編集します。CloudShellに戻って main.js のエディタでL35のコメントを外して
image.png
同様にL41のコメントも外して
image.png
L63-70のコメントも外して
image.png
image.png

ここでDatabaseのフィールドをチャットから入力されたデータをつないでるっぽい

この状態でチャット画面をリロードすると…
ぉお！さっきDatabaseに直接値セットしたものが表示されてる！追加で何か入力してもリロードすると戻るという状態になる。
Screenshot from Gyazo

Firestoreへのメッセージ書き込み

先ほど作成したDatabaseに書き込みできるようにします。
CloudShellのエディタ画面で、 main.js のL93-106のコメントアウトを外して
image.png
image.png
main.js のL87-90をコメントアウトする
image.png
image.png

チャット画面で試してみると、画面リロードしてもメッセージが残った状態になりました。FirebaseのDatabaseにもデータが追加されてることがわかります。ただ、メッセージを送ってもリアルタイムにチャット画面には出てこないので、送信したメッセージをリアルタイムに画面に反映する修正を行います。
Screenshot from Gyazo

CloudShellのエディタ画面で、 main.js のL44-53のコメントアウトを外します。
image.png
image.png

main.js のL35をコメントアウトします。
image.png
image.png

これでリアルタイムにメッセージが表示されるようになりました。画面をリロードする必要もないです。
Screenshot from Gyazo

サイトを公開

今までは開発環境ローカルで動かしてましたが、誰でも使えるようにFirebase Hostingにデプロイします。
CloudShellで動かしているローカルサーバーを[Ctrl]＋Cで停止して
image.png
以下のコマンドを実行

CloudShellコマンド
firebase deploy --only hosting

image.png

これだけでサーバーホスティングしてくれて公開URLが出力されます。
「Hosting URL:」のうしろに表示されているURLにアクセスすると公開されたチャットアプリに接続できます。
image.png

ユーザ認証を追加

Firebase Authenticationというサービスを使ってユーザ認証機能を実装できるようです。Firebaseコンソールの左メニュー[Authentication]をクリックして[ログイン方法を設定]をクリック
image.png
ログインプロバイダから[Google]をクリック
image.png
有効設定にして任意のメールアドレスを入力して[保存]をクリック
image.png
Googleが有効になります。
image.png
認証を使うためソース編集します。 main.js のL56-57のコメントアウトを外す
これだけで認証つけられるのか！
image.png
image.png
ユーザアカウント連携ができたので、Googleアカウントで使われてるプロフィールに登録されたアイコンを表示させる設定にします。 main.js のL73-80のコメントアウトを外します。
image.png
image.png
メッセージを送信した時の認証チェックを追加します。 main.js のL109-122のコメントアウトを外します。
image.png
image.png
不要になった main.js のL63-70をコメントアウトします。
image.png
image.png
同様に main.js のL93-106をコメントアウトします。
image.png
image.png
修正できました。再度Firebase hostingにデプロイします。

CloudShellコマンド
firebase deploy --only hosting

image.png

認証画面表示された！Googleアカウントでログインすると
image.png

アイコン画像が表示されるようになりました。
image.png

感想

  • Firebase面白い！
  • ハンズオン勉強会で一旦何か流れで作ってみて、復習で調べながらもう一度作ってみるのいい勉強になる
  • ありがとうMarkingCloudさん
  • 引き続きFirebase触ってみよう

もくもく会もやるらしいので新宿から近い方も若干遠いけど時間ある方は参加してみてもよいと思います。

753
847
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
753
847