とあるイベントで、当日だけ使用する複数人でチャットできるアプリが欲しいな、と思って探してたら下記のようなものを公開してくれているのを見つけました。
シンプルで良さそう。
これを使うにはFirebaseを使うらしい。
よし、やってみよう。
そんな感じで学んだことをまとめておきます。
ガチ初心者向けの手順なのでめっちゃ長くなりましたが、きっと役に立つはずです…！
ざっくりとした手順は
- Githubのファイルをダウンロード
- Firebaseの設定
- Githubからダウンロードしたファイル（index.js）の修正
- Firebase CLIからコマンドを入力してデプロイ
この4ステップです。
１．Githubのファイルをダウンロード
こちらは、先ほどのリンク先から「Code」→「Download ZIP」にて保存します。
ここは特に説明不要でしょう。
２．Firebaseの設定
ちょっとややこしいですが、大きな流れとしては下記のようになります。
- プロジェクトを作る
- プロジェクトの中にアプリを作る
- アプリの設定をする（Authentication、Realtime Database、Hostingの３つ）
では、まず下記からFirebaseを開きます。
FirebaseはGoogle傘下のサービスなので、Googleアカウントでログインしていればそのまま進めると思います。
右上の「コンソールへ移動」を選択
「プロジェクトを追加」を選択
プロジェクトの名前は何でもいいです。今回は「chat-test」としました。
「Googleアナリティクス」を「無効」にして「プロジェクトを作成」
数十秒待つと、プロジェクトができます。「続行」を選択。
次はアプリを作ります。webアプリを作りたいので、「</>」のアイコンを選択。
webアプリ名も、何でもいいです。今回は「chat-test」としました。「アプリを登録」を選択。
このあたりから、段々とややこしく感じるかもしれません。
「<script>タグを使用する」を選択。
図の部分をコピーしておきます。後で使うので、メモ帳などに貼り付けておきましょう。
（コピーし忘れても、あとで見直すこともできます）
コピーが済んだら、「コンソールに進む」
次はアプリの設定をしていきます。まずは「Authentication」を選択。
「始める」を選択。
「匿名」を選択。
「有効にする」にして「保存」
左側の「＞」のアイコンを押してメニューを開きます。
「構築」を選択。
「Realtime Database」を選択。
「データベースの作成」を選択。
「次へ」
「テストモードで開始する」を選択し「有効にする」
これで30日間は誰でもアクセスできる状態になります。
次に「Hosting」を選択。
「始める」を選択。
ここにはあとで使うコマンドの説明が書いています。
特に何も変更せず「次へ」を選択。
「次へ」
「コンソールに進む」
Firebaseの設定は、これで完了です。
※コピーする箇所を飛ばしてしまった場合
「プロジェクトの概要」の歯車マークから「プロジェクトの設定」を開きます。
下の方に、コピーする箇所が表示されますので、ここから必要な個所をコピーします。
３．Githubからダウンロードしたファイル（index.js）の修正
ダウンロードしたzipファイルを解凍して、好きなところに展開します。
後でそのディレクトリに移動する必要があるので、Cドライブから辿りやすいところがオススメです。
私の場合は「C\Code\Firebase\chat-test」に必要なファイルを置きました。（README.mdは不要）
index.jsの3行目~9行目の部分を、Firebaseでコピーしたものに置き換えます。
そのまま上書きしてしまって大丈夫です。
修正するファイルはこれ1つでOKです。
４．Firebase CLIからコマンドを入力してデプロイ
GithubダウンロードしたファイルをFirebaseに送るためには、コマンドで送る必要があります。
ただし、Windowsのコマンドプロンプトそのままでは送れません。
Firebaseへの命令文が使えるように「Firebase CLI」をインストールするか、「Firebase CLI バイナリ（コマンドプロンプトのようなソフト）」を使う必要があります。
まずはFirebase CLIのインストールに挑戦してみて、どうしても出来ない方はFirebase CLI バイナリからコマンドを入力してください。
オフィシャルサイトに手順が書いていますので、最新情報はこちらから取得してください。
◆Firebase CLIのインストールする場合
まずはNode.jsをインストール。
次に、下記コマンドをコマンドプロンプトから入力します。
npm install -g firebase-tools
これでFirebase CLIがインストールされます。
※ここでエラーが発生した場合
私の場合、npmのアップデートをするようにエラーが出ました。
npmのアップデートは下記コマンドから行いました。
npm i -g npm-check-updates
更にここでもエラーが発生し、Node.jsのアップデートをするように求められました。（Node.jsは以前入れてたから大丈夫だろうと思って手順を飛ばしてた…）
Node.jsのアップデートは上記のリンクからファイルをダウンロードしてインストールすればできました。
再度npmのアップデートコマンドを入力し、それが終わってからFirebase CLIをインストールコマンドを入力することでうまくインストールできました。
◆Firebase CLIバイナリを使う場合
ダウンロードするところも、特に迷うことは無いと思います。
ダウンロードしたファイルを開きます。
このような画面が出るかもしれませんが、「実行」します。
コマンドプロンプトのような画面が開きます。
ここからコマンドを入力していきます。
一旦画面を閉じてしまったら、再び先ほどダウンロードしたファイルを開きます。
ここからの流れは下記のようになります。あともう少し！
- ディレクトリの移動
- firebase へログイン
- プロジェクトの確認
- firebase 初期設定
- ファイルのコピー
- firebase デプロイ
ディレクトリの移動は、例えば「C:\Code\Firebase\chat-test」の場合だと下記のように入力します。
cd c:\code\firebase\chat-test
全部小文字でも大丈夫です。
こんな感じ。
ディレクトリの移動が出来たら、下記のコマンドを入力します。
firebase login
入力するコマンドは下記。
firebase projects:list
上記コマンドを入力すると、下のような画面が表示されます。
先ほど作ったプロジェクト名が表示されるはずです。
次は、下記コマンドを入力します。
firebase init
ここから、いくつか質問されるので答えていきます。
はじめは「y」を入力し、Enter。
次は、Realtime DatabaseとHostingを選んでEnter。
移動は上下キー、選択はSpaceキーを使います。
次は「Use an existiing project」を選んだ状態でEnter。
先ほど作ったプロジェクト名を選択した状態でEnter。
デフォルトでいいので、そのまま何も入力せずEnter。
次もそのままEnter。
次は「n」を入力してEnter。
次も「n」を入力してEnter。
これで初期設定が完了です。
ここで一度、ファイルを保存しているところを確認します。
色々とファイルが増えて、publicという名前のフォルダも作られているいるはずです。
これらのファイルを全部コピーして、「public」フォルダに入れます。
こんな感じで、全部コピーしてOKです。
では、最後に下記のコマンドを入力します。
firebase deploy
上手くいけば、最後にURLが表示されると思いますので、それをコピーしてブラウザでアクセスしてみてください。
こんな画面が出てきます。
名前を入力してOKを押します。
下の枠に打ち込んで「Send」を押すか、Enterキーを押せばチャット欄にメッセージが表示されます。
複数台からアクセスして、リアルタイムに表示されることを確認してみてください。
このURLは、Firebaseの画面からも確認できます。
左のメニューのHostingを開くと、URLが確認できます。
また、メッセージの確認や削除などは、Raltime Databeseの画面から行うことが可能です。
長くなりましたが、ここまで書いておけば詰まることなく最後まで出来るのではないでしょうか。
ド忘れした未来の自分へのメッセージだと思って、細かく残しておきました。
きっと未来の自分も感謝していることでしょう…。
とっても便利そうなFirebase、これからもっと勉強していきたいです！
