サンプル共通項目

このセクションでは、サンプルソースコードに共通する処理の概要を説明します。

サンプルには、Firebase Functionsを使用したサーバー側のコードと、Monacaプロジェクト用のアプリ側コードが含まれています。

まず、Firebase Functionsでの初期化方法と、サーバー側で利用する関数の読み込み方法を解説します。次に、MonacaプロジェクトでFirebaseをどのように設定し、初期化するかについて説明します。

サーバーサイドコード（Firebase Functions）

1. 初期化:

   • サーバーサイドのコードはfunctions/index.jsというファイルに書きます。

   • 最初に必要なモジュールを読み込んで、Firebaseを初期化します。

const admin = require('firebase-admin');
admin.initializeApp();

1. 関数の読み込み:

• サンプルで提供される関数（例：get_random, post_data, delete_data）は、このindex.jsファイルで読み込まれます。

アプリ側コード (Monaca プロジェクト)

1. 初期化と設定:

   • アプリ側のコードでは、Firebaseのライブラリをインターネット(CDN)から読み込みます。

   • Firebaseプロジェクトの設定（firebaseConfig）を記述し、Firebaseを初期化します。設定情報はFirebaseの管理画面から取得します。

   • 以下のようなHTMLスクリプトタグを使って、Firebaseの設定と初期化を行い、その後アプリ固有のメソッドを書きます。

// Firebaseの設定
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-app.js";

// Firebaseにアクセス（本番用）
import { getFunctions, httpsCallable  } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-functions.js";

// Firebaseにアクセス（エミュレータ利用）
// import { getFunctions, httpsCallable, connectFunctionsEmulator  } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-functions.js";

const firebaseConfig = {
  "apiKey":"AIzaSyARwW3wFOo_MoRHlJGF6GjOtj7Pkv9_VzY",
  "apiKey": "%%YOUR_API_KEY%%",
  "authDomain": "%%AUTH_DOMAIN%%",
  "projectId": "%%YOUR_PROJECT_ID%%",
  "storageBucket": "%%YOUR_STORAGE_BUCKET%%",
  "messagingSenderId": "%%YOUR_MESSAGING_SENDER_ID%%",
  "appId": "%%YOUR_APP_ID%%"
};

const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
// エミュレータにアクセス
// connectFunctionsEmulator(functions, '192.168.11.15', 5001);

実際の動作確認

• 動作確認は、ローカルでWebアプリとして実行するか、Monaca上でプロジェクトをビルドし、実機でテストします。