Firebaseのインストール、使えるようになるまでの準備工程

Firebaseはモバイルアプリで必要なバックエンドサービスを利用できるサーバーサービスです。

プッシュ通知やアクセス解析など、サーバー側で構築が必要なツールが揃えられています。

Node.jsのnpm、Firebase CLIをインストールし、Googleアカウントを紐づけてプロジェクトを作成する流れです。

Firebaseとはどんなサービス？

本記事では「Firebase」と呼ばれる、モバイルアプリ系サービスをご紹介します。

Firebaseとは、いわゆるBaas（Backend as as Service）に分類されるサーバーサービスです。

本来WEBアプリやスマホアプリなどを開発する場合、サーバー側（バックエンド側）に設定をしなければならない事がたくさん出てきます。

例えばユーザー分析やプッシュ通知などの機能は、サーバー側が担う必須の機能です。

バックエンドに必要な設備が使える

Firebaseにはこのようなサーバー側に必要な設定があらかじめ準備されており、自由に使える様になっています。

アプリケーションの設計や開発以外に、サーバー保守・運用などの様々な場面でFirebaseがサポートをしてくれる訳です。

利用できる様になっておくのに、損はありませんよね。

利用プランには無料プラン・有料プランがあります。

本記事ではWindows11のOSで、まずはFirebaseを使える様になるまでを紹介していきます。

そのあと、FirebaseでWEBサイトを構築・表示する方法や、プッシュ通知（Web Push）を配信する記事も紹介する予定です。

Node.jsのインストール

Firebaseを利用するためには、Node.jsの「npm」というパッケージ管理ツールが必要になります。

本サービスをインストールする前に、操作ツール自体をインストールする訳です。

ですのでまずは、Node.jsをインストールするところから始めましょう。

Node.jsのダウンロード

npmは、Node.js公式サイトからダウンロードします。

上記ページの下に緑色のダウンロードボタンが2つありますが、左側の「推奨版」のボタンを押して下さい。

ダウンロードした実行ファイルを開く、とインストーラが起動します（英語表記です）。

2枚目のパネルで同意チェック（I agree～）をつけ、それ以外は全て「Next」や「Start」を押すとインストールが完了します。

コマンドプロンプトでnpmの確認

インストールしたnpmを確認してみます。これは「コマンドライン」でおこないます。

npmは他のソフトと違い、ウィンドウ画面で目視の操作ができる訳ではありません。

操作はコマンドライン上でおこなうので、あくまで表示コードで確認する事になる訳です。

不慣れな人はこれを機にコマンドライン操作に慣れておきたいですね。

コマンドプロンプトの起動

今回はWindowsですので、「コマンドプロンプト」を使います。

Windowsキー＋Rを押して「ファイル名を指定して実行」のパネルを出します。

名前のボックス欄に「cmd」と入力してOKを押すと、コマンドプロンプトの黒い画面が出てきます。

Node.jsのバージョン確認

操作テストも兼ねて、Node.jsのバージョンを確認してみます。

点滅するカーソルのところに「npm -v」と入力しましょう。

npm -v

上記の様にバージョン情報が表示されたら、Node.jsのインストールは完了しています。

このコマンドプロンプトはこの後も使いますので、開いたままにしておいて下さい。

仮に閉じてしまっても、先程の手順でもう一度開けば大丈夫です。

Firebase CLIのインストール

次に、Firebaseを使用するためのツールとして「Firebase CLI」をインストールします。

CLIとは「Command Line Interface」の略です。

FirebaseもNode.js同様、CLI（コマンドライン）を通して様々な操作をおこなう事になります。

Firebase CLIのインストールは、ブラウザからでなくコマンドプロンプトから実行します。

コマンドプロンプトからインストール

コマンドプロンプトに下記のコマンドを入力しましょう。

npm install -g firebase-tools

上記の様な感じでコードが出力されますが、何もせずにしばらく待ちましょう。

いつもの点滅カーソルが出たら、インストールは完了です。

Firebase CLIのバージョン確認

インストールされたFirebaseのバージョンを確認してみます。

以下の様にコマンドを入れてみましょう。

firebase --version

上記の様にバージョンが表示されれば、Firebase CLIはきちんとインストールされています。

これで操作ツールのインストールまで完了しました。

Firebaseへの接続

次はいよいよ、サービスを管理するFirebaseのサーバーと接続します。

FirebaseはGoogleの傘下に入ったサービスですので、Googleアカウントでログインしてサービスを利用する事になります。

Firebaseへの接続

下記コマンドを入力して、コマンドプロンプトからFirebaseにアクセスしてみましょう。

firebase login

実行すると上記の様に「Y/N」を聞かれますので、「Y」を入れて「Enter」を押しましょう。

Googleアカウントの確認

ここからはブラウザが立ち上がり、Googleアカウントが表示されます。

場合によっては、アドレスとパスワードの入力が必要になります。

上記の様にアカウントが複数ある場合は、Firebaseを使う際のアカウントを選択しましょう。

Firebase CLIのアクセス許可

Firebaseログイン完了

下の様な画面が出たら、Firebase CLIを使ったFirebaseへの接続は完了です。

開いたままにしていたコマンドプロンプト画面にも、上記の様な表示が出ているはずです。

これでFirebase CLIを使って、Firebaseを利用できるようになりました。

Firebaseのプロジェクトを作成する

次にサービスを利用する単位となる「プロジェクト」を作成する必要があります。

Firebaseでは、プロジェクトごとにアプリやサービスが個別管理される仕組みです。

利用するサービスを、プロジェクト単位で登録管理する訳ですね。

ブラウザからFirebase Consoleへアクセス

プロジェクトを作成するため、今度はブラウザからFirebaseの管理画面にアクセスします。

ブラウザからだったりコマンドプロンプトからだったりと複雑に感じるかも知れませんね。

Firebase ConsoleのWEBサイトは以下です。

Firebase Console TOP画面

表示されたTOPページの左上にある「プロジェクトを追加」ボタンをクリックしましょう。

プロジェクトに名前を付ける

プロジェクトに名前を付ける画面が表示されます。

「プロジェクト名を入力します」の欄に任意のサービス名称を入力しましょう。

プロジェクト名を入力すると同時に、その下にプロジェクトIDも表示されます。

同意チェック

上記2つのチェックをつけましょう。

「続行」が押せる様になりますのでクリックしましょう。

Google アナリティクス（Firebaseプロジェクト向け）

Googleアナリティクスとの連動オプションページが開きます。

下の「このプロジェクトでGoogleアナリティクスを有効にする」の欄がONの状態になっています。

利用したい場合

利用するサービスをアクセス解析したい場合は、ONのままにしておきます。

続行ボタンを押すと、次に紐づけるアカウントを選択する事になります。

Google Analyticsのアカウントが項目内に並んでいますので紐づけるアカウントを選択します。

選択をすると「プロジェクトを作成」のボタンが表示されます。

利用しない場合

使わない場合は、ボタンを押してOFFにしましょう。

OFFにすると、項目に×がついて「プロジェクトを作成」のボタンが表示されます。

上記いずれかのパターンで「プロジェクトを作成」ボタンを押すと、プロジェクトが作成されます。

上記の様な画面が出たら完了ですので「続行」を押しましょう。

上記の様な画面になったら、プロジェクトの作成自体は完了です。

Firebaseの利用準備完了

これでFirebaseにプロジェクトを一つ作成した事になります。

Firebase Consoleにログインし直すと、TOPページに先程決定したプロジェクト名で新しいプロジェクトが作成されています。

プロジェクトを通して様々なサービスを利用

このプロジェクト内でFirebaseの様々サービスを利用設定していく事になります。

作成したプロジェクトを選択した状態

以下の様なモバイルアプリ中心のバックエンドサービスが取り揃えられています。

利用できるアプリジャンル例

次回はhostingを予定

以上、Firebaseが使えるようになるまでの手順を解説しました。

次回は今回作成したFirebaseプロジェクトで、WEBサイトを公開する設定をしてみようと思っています。

「Firebase Hosting」というサービスです。

人気記事

Firebase関連記事