Firebase を使ってみよう【プロジェクトとアプリの作成編】

firebase

こんにちは。エンジニアの辻です。

もはや何番煎じなのか分かりませんが。。
自身の勉強と備忘録も兼ねて、今回から Google の Firebase を使ったアプリ開発の連載をしていきます。

canvas と spine の記事は、ちょっとお休みです。

Firebase とは

Firebase とは、Google が提供する Bass サービスです。
Web、Android、iOS アプリのバックエンドを簡単に構築できます。

Firebase で提供されているサービスで代表的なものは、以下の通りです。

  • Authentication: ユーザー認証サービス。簡単な設定でユーザー認証をアプリに組み込めます。また、Google アカウントをはじめとして、Twitter、Facebook などの各種 SNS でのログイン機能も簡単に実装できます。
  • Cloud Firestore: NoSQL のデータベース。Firebase の管理画面上から簡単に作成できるので、導入が楽です。
  • Firebase Hosting: ホスティングサービス。web ソースコードをアップロードして、公開できます。
  • Firebase Storage: ストレージサービス。画像や動画などのコンテンツを保存・提供するサービスです。

この他にも、機械学習など様々な機能が提供されています。

Firebase 初回セットアップ

さて、今回は Firebase のセットアップから行います。
手順は以下の通りです。

  1. Google アカウントの作成
  2. Firebase プロジェクトの作成
  3. Firebase アプリの作成

Google アカウントの作成

Firebase を利用するには、Google アカウントが必要になります。
持っていない方は作成しましょう。

Firebase プロジェクトの作成

Google アカウントを作成して、ログインしましたら、Firebase のページへ移動します。

> Firebase

移動すると以下のようなページが表示されると思います。
ページ中段の「使ってみる」ボタンを押下しましょう。

 

「使ってみる」ボタンを押下すると、Firebase プロジェクトの作成画面へ移動します。
「+ プロジェクトを追加」ボタンを押下して、Firebase プロジェクトを新規作成します。

 

新規作成するFirebase プロジェクトの名称を設定します。

 

次にアナリティクスを有効にするか聞かれます。今回は不要なので、チェックを外しておきます。
その後に「プロジェクトを作成」ボタンを押下します。このボタン押下と同時に、プロジェクトのセットアップが始まります。

 

セットアップが完了すれば、以下の画面になります。
「続行」ボタンを押下しましょう。

Firebase アプリの作成

「続行」ボタンを押下すると、以下のキャプチャ画面に移動すると思います。
このページが Firebase プロジェクトのメイン画面です。

次に、Firebase プロジェクトに、Firebase アプリを作成していきます。
ページ中段の「iOS+」・「Android」・「< / >」の丸ボタン3つのうち、「< / >」ボタンを押下しましょう。

 

順次、Firebase アプリの設定を行っていきます。

まずはアプリのニックネームを設定します。
また、今回は Firebase Hosting も利用するため、「このアプリの Firebase Hosting も設定します。」にもチェックを入れておきます。
その後、「アプリを登録」ボタンを押下します。

 

次に、「Firebase SDK」の項目が表示されます。

「// Import the …」 のコメント文から始まる js のコードをコピーして、ローカルに js ファイルとして保存しておきましょう。
※このコードは、Firebase アプリの重要な設定情報になります。決して web 上にアップしたりしないようにしましょう。

js コードの保存が終わりましたら、「次へ」ボタンを押下しましょう。

 

次に、「Firebase CLI のインストール」の項目が表示されます。
Firebase CLI のインストールは、後ほど行いますので、何もせずに「次へ」ボタンを押下しましょう。

 

最後に、「Firebase Hosting へのデプロイ」の項目が表示されます。
デプロイ作業も後ほど行いますので、何もせずに「コンソールに進む」ボタンを押下しましょう。

 

これで Firebase アプリの作成は完了です。

もし、js コードを保存し忘れた場合は、Firebase プロジェクトメイン画面 左上の歯車アイコンボタンから「プロジェクトの設定」を押下しましょう。
画面遷移後に「マイアプリ」という項目があり、その中に該当の js コードがあります。

まとめ

今回はここまです。お疲れ様でした。
次回は、今回に飛ばした「Firebase CLI のインストール」を行っていきます。

では、また!



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ