MacでFirebaseを始める｜自分のアプリを公開するための準備
自分で作ったアプリを、スマホでも使えるようにしたい。
そのために僕が使ったのが、Googleの「Firebase（ファイアベース）」です。アプリをネット上に公開したり、入力した記録を保存したりできます。
この記事では、MacでFirebaseを使い始めるための準備を、順番に説明します。
僕が家計簿アプリ「おさいふ帳」を作ったときの手順ですが、アプリを公開するための準備として、ほかの制作にも使えます。
必要なのは、MacとGoogleアカウントです。この記事の手順は、MacBookで確認しています。
支払い情報の登録が不要な「Sparkプラン」で進めます。無料枠には利用上限がありますが、準備のために有料プランへ変更する必要はありません。
この記事で行うのは、次の5つです。
Firebaseのプロジェクトを作る
Googleログインを有効にする
記録を保存するデータベースを作る
ウェブアプリを登録する
Macのターミナルを準備する
ここでは、アプリのファイル配布や公開までは行いません。まずは、アプリを動かすための場所と道具をそろえていきます。
1. Firebaseのプロジェクトを作る
ブラウザで、次のページを開きます。
https://console.firebase.google.com
Googleアカウントでログインし、「Firebase プロジェクトを設定して開始」を押してください。
プロジェクト名は、自分が分かる名前ならなんでも大丈夫です。
たとえば「osaifu」「kakeibo」などにします。
名前の下に小さく出る英数字が、プロジェクトIDです。
例：osaifu-1a2b3
このIDはあとから変更できず、アプリのアドレスにも使われます。
例：https://osaifu-1a2b3.web.app
本名や誕生日など、公開したくない情報は入れないようにしましょう。作成前なら、鉛筆マークから変更できます。
プロジェクトIDはあとで使うので、控えておいてください。
「Firebaseの規約に同意します」にチェックを入れ、「続行」を押します。
途中で、次の機能を有効にするか聞かれます。
FirebaseでGeminiを有効にする：今回は使わないのでオフ
Googleアナリティクスを有効にする：今回は使わないのでオフ
「おすすめ」「推奨」と書かれていても、今回の家計簿ではオフのままで進めます。
「プロジェクトを作成」を押して、しばらく待ちます。
作成後の画面で「Sparkプラン」と表示されていれば、無料プランのままです。
※Firebaseの画面やボタンの名前は、更新によって変わることがあります。
2. Googleでログインできるようにする
次に、アプリでGoogleログインを使うための設定をします。
この家計簿は、ネット上に公開して使います。アドレスを知っている人は、アプリの画面を開けます。
そのため、記録を扱うには「誰がログインしているか」の確認と、「その人の記録だけを読み書きできるようにする設定」が必要です。
ここでは、まずログインの機能を有効にします。記録へのアクセスを制限する設定は、有料部分でアプリと一緒に反映します。
左のメニューから「Authentication」を開く
「始める」を押す
ログイン方法の一覧から「Google」を選ぶ
「有効にする」をオンにする
「Authentication」が見当たらなければ、画面上部の「商品を検索」に入力して探してください。
次に、以下の2つを設定します。
プロジェクトの公開名
「おさいふ帳」など、分かる名前にします。Googleでログインするときの画面に表示される名前です。
プロジェクトのサポートメール
▼から、自分のメールアドレスを選びます。これはGoogleのログイン時の同意画面に表示される連絡先です。表示されても差し支えないアドレスを選んでください。
画面に「Android アプリ」「SHA-1」などの注意書きが出ても、今回はウェブアプリなので、その設定は不要です。
「外部プロジェクトのクライアントID」「ウェブSDK構成」も、今回は変更しません。
「保存」を押し、Googleの行に「有効」と表示されたら完了です。
3. 記録を保存する場所を作る
次に、家計簿の記録を保存するデータベースを作ります。
使うのは、「Cloud Firestore」です。
「Realtime Database」という別の機能もあるので、間違えないようにしてください。
「Cloud Firestore」を開き、「データベースの作成」を押します。
設定画面では、次のように選びます。
エディション
「Standardエディション」を選びます。
データベースIDとロケーション
データベースIDは、「(default)」のままにします。
ロケーションは、「asia-northeast1（Tokyo）」を選びます。
作成後に変更できない項目なので、次に進む前に確認してください。
セキュリティの構成
「本番環境モードで開始する」を選びます。
テストモードは、一定期間、広く読み書きを許可する設定で始まるため、今回は使いません。
本番環境モードでは、最初はアプリから記録を読み書きできません。必要な設定は、あとでアプリを公開するときに反映します。
バックアップの設定
スケジュールされたバックアップの設定が出た場合は、今回は省略して進めます。
「データベースの準備ができました」と表示されたら完了です。
「コレクションを開始」は押さなくて大丈夫です。 記録に必要なデータは、アプリを使うときに作られます。
4. ウェブアプリを登録する
Firebaseに、今回使うウェブアプリを登録します。
1.歯車マークから「プロジェクトの設定」を開く
2.「＋アプリを追加」を選択し、「</>」のウェブのマークを押す
3.アプリのニックネームを入れ、「アプリを登録」を選択
ニックネームは「osaifu-web」など、自分が分かるもので大丈夫です。
「このアプリのFirebase Hostingも設定します」という項目は、チェックせずに進めます。 公開の設定は、あとでまとめて行います。
登録すると、npmというコマンドや英語のコードが出てきます。
ここでは、コピーや入力は不要です。
配布するアプリは、公開先で必要な設定を読み込む作りにしているので、そのまま「コンソールに進む」を押してください。
これで、Firebase側の準備は完了です。
5. Macのターミナルを準備する
アプリを公開するときは、Macの「ターミナル」を使います。
文字を入力して、パソコンに指示を出すアプリです。普段使わない方には少し身構える画面かもしれませんが、ここでは必要なコマンドをコピーして進めます。
ターミナルを開く
キーボードの command＋スペース を押します。
「ターミナル」と入力し、Enterを押してください。
Macに最初から入っているので、ターミナル自体のインストールは不要です。
Firebaseを操作する道具を入れる
次の1行をコピーして、ターミナルに貼り、Enterを押します。
curl -sL https://firebase.tools | bashこれは、Firebaseをターミナルから操作するための道具を入れるコマンドです。
途中でパスワードを求められたら、Macにログインするときのパスワードを入力します。
入力しても文字や「●」が表示されませんが、正常です。 そのまま入力し、Enterを押してください。
処理が終わったら、次のコマンドを入れます。
firebase --versionバージョンを表す数字が表示されたら、インストールできています。数字は、実行する時期によって変わります。
「Update available」という案内が出る場合は、新しいバージョンがあるというお知らせです。
エラーが出た場合は、そのまま次へ進まず、有料部分の「困ったときの一覧」も確認してください。
Googleアカウントでログインする
次のコマンドを入れます。
firebase loginブラウザが開いたら、先ほどFirebaseで使ったGoogleアカウントでログインしてください。
「Firebase CLI Login Successful」と表示されたら完了です。ブラウザを閉じても大丈夫です。
ここまでで、アプリを公開するための準備ができました。
準備はここまでです
お疲れさまでした。これで、Firebaseにアプリを公開するための準備ができました。
控えたプロジェクトIDは、実際にアプリを公開するときに使うので、残しておいてください。
僕はこの仕組みを使って、自分用の家計簿「おさいふ帳」を作りました。
今月あといくら使えるかを確認できて、項目や予算も自分で変えられる家計簿です。アプリのファイルと、ここから先の導入手順は、次の記事にまとめています。
公開を記念して、11月8日 9:30 〜 11月22日 23:59 まで 500円で販売します。セール終了後は通常価格980円になります。
