最近社内でハンズオン形式のちょっとした Firebase の勉強会を開催したので、その内容をここにも書きたいと思います。
レベルとしてはアプリの開発は行っているけれど、Firebase(特にCloud Functions と Cloud Firestore) についてはあまり知らない人を対象としています。

Firebaseとは

Firebase は、モバイルアプリの開発をサポートするサービス群です。
Google のサービスなので信頼できますし、無料で割といろいろなことができます。

Firebase にはさまざまなサービスがあり、メジャーなものを以下に挙げてみます。

  • Analytics
    • アプリの解析
  • Cloud Messaging
    • Push 通知
  • Crashlytics
    • クラッシュレポート
  • Authentication
    • Twitter や Facebook 認証などを一元管理
  • Cloud Storage
    • ファイルの管理

Cloud Function

サーバを用意することなく、アプリのバックエンドのコードを実行することができるサービスです。
同等なサービスで有名なものに AWS Lambda があります。

Node.js 環境で開発を行います。

Cloud Functions の環境構築

事前に Node.js をインストールしておきます。

次に Firebase のコンソール からプロジェクトを作成します。
作成後 Functions を選択し、「使ってみる」をクリックして Cloud Functions を有効化してください。

ターミナルを開いて作業用ディレクトリに移動し、下記を実行してください。

% npm install -g firebase-tools
…
% firebase login
…
% firebase init

利用するサービスを聞かれたら Funstions を、対象とするプロジェクトを聞かれたら先程作成したプロジェクトを選択してください。

Hello World の実装

init まで終わるとディレクトリが作成されると思うので、./functions/index.js を下記のように修正します。

const functions = require('firebase-functions');

exports.hello = functions.https.onRequest((request, response) => {
  response.status(200).send("Hello World")
})

下記コマンドでデプロイします。

% firebase deploy --only functions

デプロイ後、Firebase のコンソールを見るとリクエストURLが記載されています。

そこにブラウザでアクセスすると、Hello World と表示されました。

Cloud Firestores

ドキュメント指向の NoSQL データベースです。
MySQL のようなリレーショナルデータベースとは異なり、固定されたスキーマ(テーブル構造)を持ちません。
データは JSON のような形式で保存されます。

Cloud Function であれば、モバイルアプリからリアルタイムで直接データの読み書きをすることも可能です。

データベースの作成

Firebase コンソールの Database を開き、テストモードで作成します。

あとは「コレクションを追加」からいろいろデータを追加していくことができます。

簡単なつぶやきサービスの API を作成してみる

投稿とタイムラインの閲覧のみができる簡易つぶやきサービスの API を、実際に CloudFunctions と CloudFirestore を使って作ってみます。

CloudFirestore にて下記のようにコレクション「tweet_collection」、ドキュメント「tweets」を作成します。

CloudFunctions にて index.js を下記のように修正します。

const admin = require('firebase-admin');
const functions = require('firebase-functions');

admin.initializeApp(functions.config().firebase);

var db = admin.firestore();

exports.tweet = functions.https.onRequest((request, response) => {
  switch (request.method) {
    case 'GET':
      var tweetsRef = db.collection('tweet_collection').doc('tweets');
      var getDoc = tweetsRef.get()
        .then(doc => {
          if (!doc.exists) {
            var errorJson = {'error': {'message': 'Error no such document.'}};
            response.status(400).send(JSON.stringify(errorJson))
            return "";
          } else {
            response.status(200).send(doc.data());
            return "";
          }
       })
        .catch((err) => {
          var errorJson = {'error': {‘message': err}};
          response.status(400).send(JSON.stringify(errorJson))
          return "";
        });
      break;

    case 'POST':
      db.collection('tweet_collection').doc('tweets').update({
        'tweetList': admin.firestore.FieldValue.arrayUnion(request.body)
      })
      var successJson = {'success': {'message': 'データを追加しました。'}};
      response.status(200).send(JSON.stringify(successJson));
      break;
    default:
      var errorJson = {'error': {'message': 'GETとPOSTにのみ対応しています。'}};
      response.status(400).send(JSON.stringify(errorJson))
      break;
  }
});

デプロイします。
このとき「パスが変更された」のようなメッセージが表示されますが、そのまま実行してください。

% firebase deploy --only functions

任意のAPIクライアントから GET と POST(リクエストパラメータは name と body)で叩くと、結果が返ってくるはずです。

実際にクライアント側のアプリを作ると、このようなつぶやきサービスの API として利用することができるようになりました。

サーバを準備しなくともこの程度の API であれば、無料で割と簡単に作成することができます。
Firebase はこの他にも便利なサービスがいろいろとあるので、機会があればまた同様の記事を書いていきたいと思います。

Firebase を活用して効率の良い開発をしていきましょう!

投稿者プロフィール

みっちー
みっちー