MonacaとFirebaseを連携してデータを取得する

2025年2月9日 01:31

はじめに

クラウドにデータを保存する顧客管理アプリを作成したかったので、MonacaとFirebaseを連携してみた。
※初めてMonacaとFirebaseを触って苦戦したので、自分用メモとして走り書きしました。

最終的なコード

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="cordova.js"></script>
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <!-- ここから追記 -->
  <button id="push"> test </button>
  <script type="module" src="js/firebase.js"></script>
  <!-- ここまで追記 -->
</body>
</html>

firebase.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
import { getFirestore, doc, collection, setDoc, addDoc, getDocs, updateDoc, deleteDoc, deleteField,serverTimestamp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-firestore.js";

const firebaseConfig = {
    apiKey: "**************************",
    authDomain: "**************************",
    projectId: "**************************",
    storageBucket: "**************************",
    messagingSenderId: "**************************",
    appId: "**************************"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
var db = getFirestore(app);

push.addEventListener(('click'), () => {
   getdata();
})

//データを取得する
export async function getdata() {
 const CategoryCol = collection(db, 'customer');
 const Snapshot = await getDocs(CategoryCol);
 const customerList = Snapshot.docs.map(doc => doc.data());
 //表示用テキスト
 Object.keys(customerList).forEach(function(key){
    console.log(customerList[key]["name"]);
 });
}

事前準備

Monaca

MonacaのProプランに登録
新しいプロジェクトを作る
フレームワークのテンプレート　→　JavaScript　
→　Onsen UI V2 JS Minimum
jsファイルを作成
www/js/firebase.js

Firebase

FirebaseのSparkプランに登録
（ニフクラ mobile backendを使おうとしたらサービス終了してた）
プロジェクトを作成
Cloud Firestoreで適当にデータベースを作成する
コレクション：customer
ドキュメント：未指定　←適当な文字列になった
フィールド：name: "高橋"
　　　　　　address: "東京都"

SDKの設定

Firebaseの「プロジェクトの設定」からコードをコピーすればSDKの設定が終わると思ったが、うまくいかなかった。なのでいろいろ調べた結果を書く。

htmlを追記

bodyタグに以下のコードを記述する

  <button id="push"> test </button>
  <script type="module" src="js/firebase.js"></script>

import

以下のコードをfirebase.jsに貼り付ける

import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
import { getFirestore, doc, collection, setDoc, addDoc, getDocs, updateDoc, deleteDoc, deleteField,serverTimestamp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-firestore.js";

Firebaseで作成したプロジェクトの情報

Firebaseの「プロジェクトの設定」からfirebaseConfigの部分だけコピーして貼り付け

const firebaseConfig = {
    apiKey: "**************************",
    authDomain: "**************************",
    projectId: "**************************",
    storageBucket: "**************************",
    messagingSenderId: "**************************",
    appId: "**************************"
};

データを取得する

appとdbをとりあえず宣言しておく
testボタンを押したらgetdataを呼び出す
Cloud Firestoreからデータを取得するためのgetdata関数を作る

// Initialize Firebase
const app = initializeApp(firebaseConfig);
var db = getFirestore(app);

push.addEventListener(('click'), () => {
   getdata();
})

//データを取得する
export async function getdata() {
 const CategoryCol = collection(db, 'customer');
 const Snapshot = await getDocs(CategoryCol);
 const customerList = Snapshot.docs.map(doc => doc.data());
 //表示用テキスト
 Object.keys(customerList).forEach(function(key){
    console.log(customerList[key]["name"]);
 });
}

動作確認

スマホアプリでMonaca Debuggerをダウンロードする
アプリを起動してプロジェクトを開く
testボタンを押す
クラウドIDEのコンソールに結果が出力される