前回記事「SES営業のぼくでもできた！Google FirebaseでセルフDX(1)」はコチラ。
皆さん、こんにちは！
株式会社TSOneでSES営業を担当しているHYです。
弊社が得意としているVue.jsとFireBaseを利用したアプリ開発を素人がどこまでできるのか？
奮闘と現在までの軌跡をご紹介できたらと思います。
前回、いざ開発だ！と思ったらデータベースが必要なことに気がついた。
いよいよFirebaseの設定と向き合います。
Firebaseにはいろいろと便利な機能があり、それらを駆使してアプリ開発を進めていくのですが、
今回はとにかくデータベース。画面から入力された値を格納したい、取り出して表示したりしたいんです！
Firebaseを利用するには大前提があります。
Googleアカウントを持っていること！
逆にGoogleアカウントがあれば無料で利用できます。
Googleアカウントの取得方法については今回割愛させていただきますー
今回のFirebaseの設定目標!!
1.Firebaseでのプロジェクト作成
2.作成したFirebaseプロジェクトへのアプリ登録。(今回開発するアプリを登録する箱を用意する。感じ)
3.Firestore Databaseの初期設定
4.Firebaseプロジェクトに、今回開発するアプリ(Vueプロジェクト)を関連付ける
1.Firebaseでのプロジェクト作成
まずはFirebaseプロジェクトというのを作成するために、FireBaseへのログインから初めていきます！
以下サイトからFirebaseを「使ってみる」をクリックし、Googleアカウントを使用してログインします。
https://firebase.google.com/?hl=ja
いよいよFirebaseプロジェクトの作成です。
Firebaseプロジェクトの画面が表示されるので、[プロジェクトを追加]をクリック。前回Vueでもプロジェクト作って、今度はFirebaseでもプロジェクト作るとか、ややこしくなってきた。。
プロジェクトの名前をつけます。
※ぼくはVueのプロジェクトと一緒の名前にしました。
[続行]をクリックしたら、googleアナリティクスの設定画面がでてきたんですが。今回googleアナリティクスをわかってないぼくは無効にしました。後でも設定できるかな。。
後は指示通りボタンをクリックしていたら作成したプロジェクトのホーム画面が表示されましたー。続いては、Firebaseのプロジェクトとアプリ(vue)との関連付けするための設定が必要みたいです。まだ続きます。
2.作成したFirebaseプロジェクトへのアプリ登録
画面から「</>（ウェブアプリ）」をクリック。
ウエブアプリへのFirebaseへの追加画面。[ニックネーム]の登録がありますが好きにつけて大丈夫だそうです。ここには前述のプロジェクト名と同じにしました。[このアプリのFirebase Hostingも設定します]については今回のデータベースとは関係ないですが、アプリ開発の目的としてHostingしてエンジニアに使用してもらいたいので、事前にチェックをつけました。
「アプリを登録」をクリック後の画面で注意。firebaseconfigの情報が表示されるので必ずコピーしてメモ帳などで保存しておくこと！
画面をみると、なにやら npmのコマンドを実行するように書いています。
$npm install firebase
ここで再度手順をググって調べてみると、Vueプロジェクト側にFirebaseのツール達をインストールする必要があるらしい。
一旦画面操作は保留にして、コマンド実行に移ります。
VSCodeを起動して、作成したVueプロジェクトのフォルダを開きます。npmコマンドを実行して環境構築の時と同様にFirebaseのツール達をインストールするのですが、せっかくなので、VSCodeのターミナルからコマンド実行したい思います。
メニュー[ターミナル]-[新しいターミナル]でコマンドプロンプトが表示されるので、VSCodeのターミナルから以下コマンドを実行してFirebaseをインストールします。$npm install firebase@8.10.0
注意１：VSCodeのターミナルでハマったのが、ターミナルを開いたら初期設定？がPowerShellだったようで、コマンドを受け付けてくれませんでした。その場合はターミナルの右上の矢印をクリックして、Command Promptを選択すると解決しますよ。※添付画像参照してください。
注意２：最新のfirebaseのバージョンがv8→v9になっています。
今回は作成した当時のv8のインストールを推奨とさせていただきます。
FireBaseのインストールが終わったら次は Firebase CLI のインストールを行います。これは、Vue CLIと同じく、FirebaseとVueアプリとの設定をコマンドラインで簡単に設定してくれる魔法のツール。#npm install -g firebase-tools
ここまでのインストールが済んだら、もう一度ブラウザのFirebaseの設定画面に戻ります。
Firebase CLI のインストール(コマンド実行)は終わったので、
[次へ]をクリックします。次の設定はFirebase Hostingの設定なのですが、
まだアプリを作成していないので、何もできません。画面上に指示されているコマンド Firebase login,、init、deployは操作しません。[コンソールに進む]をクリックしてここまでの設定を完了しました。
3.Firestore Databaseの初期設定
いよいよ今回の目標データベースの設定に入ります。
Firebaseでは以下２つのデータベースが提供されています。
- Firestore Database
- Realtime Database
どう違うかはネットで調べていただくとして、今回ぼくはFirestoreDatabaseを選択。理由はこっちのほうが新しそうだったから(笑)
まずはブラウザからFirebase側の設定です。初期設定は超簡単でした。
画面メニューから[Firestore Database]を選択。表示された画面から[データベースの作成]をクリック。次の画面で、本番モード/テストモードの選択がありますが、とりあえず テストモード を選択。最後にデータベースのロケーションを選択があります。asiaなどの比較的近いロケーションだと微妙に通信速度アップするようなので、asia系のロケーションを選択しました。はい。これで終了です。
あれ？テーブル定義とかクリエイトとかしなくて良いの？って思った方。
そーなんです。いらないんです。今後の投稿で記載しますが、アプリ側から指定のテーブル名、カラムで登録する処理を実行した際に、対象のテーブルがなければ、指定のテーブル名で勝手に作成されるし、カラムも勝手に作成されちゃうんです。途中からカラム増やすのも容易にできてしまうんです。Firestoreが凄いのか、最近のDBが凄いのか、知らんけど。
次は前述で作成したFirebaseプロジェクトとVueプロジェクトを関連付けます。以降、先ほどインストールしたFirebaseCLIを使用したコマンドライン操作がメインとなります。
4.Firebaseプロジェクトに、今回開発するアプリ(Vueプロジェクト)を関連付ける
VSCodeのターミナルからfirebase initをコマンドを実行してFirebaseとの関連付けを開始します。$firebase init
ここからコマンドラインでの設定になります。質問の通りに応えていけば良いのですが、ぼくは当然つまずいたので、その箇所をフォローしたいと思います。
まず最初の壁。$Are you ready to proceed?
直訳すると「進める準備は整ったか？」なのだろうか？いちいち聞くことある？何か深い意味があるのかと思い、最初 No にしちゃいましたよ。。一応意味をググって、再度 init からやり直しました。。
最初の壁を yes で突破すると、大事な質問がきます。Firebaseのどの機能の初期化をするのか？今回は Firestoreデータベースの設定をしたいので、
[Firestore : Configure…(省略) ] をまず選択。選択の仕方がエンターキーではなくて、スペースキーなのも要注意！尚、一緒にHostingも設定しちゃいます。アプリの公開が目的なので。ということで、
[Hosting:Configure…（省略）] もスペースキーで選択。選択肢にもう一つ[Hosting:Set up GitHub …（省略）]というのがあるのですが、こちらはGitHubの設定をさせられそうな予感がするので選択しませんでした。GitHubはまだ使う予定ないので。そもそもGitHubわからない。
次は壁というより初回だけらしいのですが、$please select an option: という問いかけがありますので、$Use an existing project を選択しました。すでにFirebase側の手順でプロジェクトは作成してますね。そうすると、先ほどFirebase側の手順で作成したプロジェクト名が選択肢として現れるのでそれを選択すればＯＫでした。
次の壁は、質問の最後に”？”のみのケースと、”？(y/N)”の選択がついてるケースがあること。後者はyかNのどちらか入力(選択)してエンターキーを押せば良いんですけど、前者はどーすれば良いの？ということで、何も入力せずにエンター押しました。それでも問題なかったので大丈夫でしょう。多分。
最後に、大事そうな質問が3つ続きました。
- #what do you want to use as your public directory?
この質問には dist と入力。Firebaseのデプロイでアップロードするディレクトリの指定のようです。
vue.jsではdistディレクトリにデプロイされるようなので dist としました。 - Configure as a single-page app (rewrite all urls to /index.html)?
SPA(Single Page Application) を作りたいか？ は勿論 Yes 。 - Set up automatic builds and deploys with GitHub?
GitHubの設定するか？ No 。GitHubよくわからんので。。
Firebase initialization complete! が表示された！
これはとりあえず初期設定完了ということで良いのだろうか？
実はまだ、FirestoreDBと接続するための設定ファイル(firestore.js)を作る必要があるようですが、
とりあえず今回は目的は完了したのでここまで！
次こそ！いよいよアプリ開発に入っていく、予定です。