Expoを利用したアプリでFirebaseを導入する方法

Expo

React Native

Firebase

Firebaseの機能をスマホアプリで利用したかったので、Expoを使った実装で試してみました。特に難しい点はなく簡単に出来ます。以下手順を記載しています。

概要

Firebaseの準備
npmで「firebase」をインストール
「firebase」をインクルード
Firebase Authを利用する
Firebase Functionsを利用

Firebaseの準備

まずFirebaseの管理画面でプロジェクトを作成します。

アプリの種類はWebアプリを選択

Firebaseにてアプリを設定する際に、「Web」「Androird」「iOS」のいずれかを選択する必要があります。今回はReactNativeとExpoによるクロスプラットフォームなのでどれにするか悩みましたが、結論「Web」を選択すれば問題ありません。

npmで「firebase」をインストール

npm install firebase

ですね。firebase関連のパッケージが他にもいくつかあるのですが、これで問題ないです。必要なものをまるごとインストールする形です。プログラムで利用する際に、必要なものを選択してimportしましょう。

npm startを行うとエラー

上記firebaseパッケージをインストールした後、いつものようにnpm startでExpoを使ってローカルでアプリを立ち上げた所エラーが発生しました。監視対象のファイル数の上限を超えたことが原因でした。Linuxでファイル監視が動作しているときに起こり得るエラーらしいです。

System limit for number of file watchers reached

真っ当な解決策として、不要なパッケージを取り除いて進めたいところです。firebase関連の機能ごとのパッケージを利用する方法はどうかと考えましたがうまくいきませんでした。ですので、今回は監視対象の上限を大きな数値に設定することで解決しました。

ファイル監視数の設定を確認
```
cat /proc/sys/fs/inotify/max_user_watches
```
上記コマンドで監視ファイルの上限を確認出来ます。デフォルトは「8192」になっていました。
ファイル監視数の設定を変更
```
echo fs.inotify.max_user_watches=14288 | sudo tee -a /etc/sysctl.conf
```
上記コマンドで数値を変更できます。数値の所を適したものに変更しましょう。私はいきなり大きくするのは嫌だったので少しずつ上げて確認しました。

エラーが出なくなりfirebaseを利用する準備が出来ました。

「firebase」をインクルード

実際にプログラム内でFirebaseの機能を利用する場合は以下のようにします。必要なプラグインのimportとfirebaseSDKの初期化を行います。 Firebase.jsというファイルでcomponentとして切り出して利用できるようにしています。

import firebase from 'firebase';
require("firebase/functions");

const firebaseConfig = {
    apiKey: "管理画面で取得した情報を記載",
    authDomain: "管理画面で取得した情報を記載",
    databaseURL: "管理画面で取得した情報を記載",
    projectId: "管理画面で取得した情報を記載",
    storageBucket: "管理画面で取得した情報を記載",
    messagingSenderId: "管理画面で取得した情報を記載",
    appId: "管理画面で取得した情報を記載"
};

try {
  firebase.initializeApp(firebaseConfig);
} catch(e) {
  console.log(e);
}

export default firebase

今回アプリ内ではfireabseのAuthとFunctionsを利用します。

Firebase Authを利用する

まずはFirebaseのアカウント認証機能を利用します。管理画面で機能を有効にして、ログイン方法も必要なものを有効にしておきましょう。

アプリ内での実装

先程作成したFirebase.jsをimportします。

import firebase from '../components/Firebase';

上記を利用してログインを行います。以下は匿名認証の例です。

firebase.auth().signInAnonymously()
  .then((result)=>{
    console.log('sign in successfully');
  }).catch((error) => {
    console.log(error.message);
  })

Functionsを利用

次はFunctionsを利用してみます。こちらも管理画面で機能を有効にします。そして、アプリとは別の場所でfirebase initなどを進めて、利用する関数をFirebase Functions側に実装・デプロイしておきましょう。関数を定義する際は「onCall」で定義したものをFirebase functionsにデプロイしておきます。

exports.関数名 = functions.https.onCall((request, response) => {
    //
    // 処理
    //
}

アプリ内での実装

ファイル上部で先程作成したFirebase.jsをimportします。

import firebase from '../components/Firebase';

以下で、引数を渡してFirebase functionsにリクエストを行うことが出来ます。

let getItems = firebase.functions().httpsCallable('関数名');
getItems({date:name,skill:skill}).then((result) => { 
    //
    // 成功したときの処理
    //
}).catch(error => {
    console.log(error.message);
})

私はFunctions内でFirestoreを使ってデータのやり取りを行う形で実装しました。アプリから直接Firestoreを操作することもできます。