🎊

SSSAPIでスプレッドシートのデータをFirestoreに自動反映する

2022/06/17に公開

Firebase

GoogleスプレッドシートのAPI化サービス「SSSAPI」の
Webhook機能を活用した利用例です🚀

Webhook機能を使うと、
スプレッドシートのデータをCloud Functions経由で、
Firestoreに自動で反映できるようになります🎉

Firestore便利だけど...

Firebaseが好きで、よく利用しているのですが、
お知らせや設定値などユーザが編集しない
初期データやマスターデータ管理が少しめんどくさいです。。

それ専用の管理画面を用意すればよいのですが、
工数も限りがあるので、なるべく低コストにしたいところ。

スクリプトを書いて更新するのもありですが、
JSONを編集したりするのもめんどくさい。。

SSSAPIでマスターデータをAPI化

こういった悩み/めんどくささもSSSAPIを使うと、
スプレッドシートを管理画面として使うことができ、
JSON APIを経由してマスタデータを扱えるようになります。

でも、セキュリティルールやトリガーも活用したい...

マスターデータ管理は楽になりましたが、
やっぱりセキュリティルールやトリガーも活用したい...

そういった場合には、Webhook機能やCloud Functionsを活用すると、
スプレッドシートのデータをFirestoreに自動で反映できるように！

なにがうれしいの？

APIをそのままでも表示などの上では十分ですが、
Firebaseを利用している場合、更に便利に！

セキュリティルールの場合
カテゴリやステータスをスプレッドシートで管理している場合、
存在するものをチェックでき、保存時に検証できるように！

トリガーの場合
お知らせの一覧をスプレッドシートで管理している場合、
追加された時をトリガーにして、メールやプッシュ通知を遅れるように！

自動反映の流れ

以下の流れで実現しています。

スプレッドシートを更新
APIを更新してスプレッドシートの内容を反映
APIを更新するとWebhookでCloud Functionsを呼び出す
Cloud Functions内でAPIの内容をFirestoreに保存

APIを作成する

まずはSSSAPIでAPIを作成します。

例で使うスプレッドシートはこちら
・都道府県一覧 | SSSAPIサンプル

APIのURLをコピーして試してみます。

$ curl -s https://api.sssapi.app/XXXXXXXXXXXXX | jq
[
  {"id":1, "name":"北海道", "kana":"ほっかいどう", "en":"hokkaido"},
  {"id":2, "name":"青森県", "kana":"あおもり", "en":"aomori"},
  {"id":3, "name":"岩手県", "kana":"いわて", "en":"iwate"},
  {"id":4, "name":"宮城県", "kana":"みやぎ", "en":"miyagi"},
  ... 
]

Cloud Functionsをつくる

次にAPIのJSONデータをfirestoreへ保存するCloud Functionを作成。
APIの呼び出しには、ohmyfetchを利用しています。

import * as admin from "firebase-admin";
import * as functions from "firebase-functions";
import { $fetch } from "ohmyfetch";

const API_URL = "https://api.sssapi.app/XXXXXXXXXXXXX";

interface Prefecture {
  id: number;
  name: string;
  kana: string;
  en: string;
}

// init firebase admin
if (admin.apps.length < 1) {
  admin.initializeApp();
}

export const webhookSyncFirestore = functions.https.onRequest(
  async (request, response) => {
    // call api
    const jsonData = await $fetch<Prefecture[]>(API_URL, {
      method: "GET",
    });

    const jsonData: Prefecture[] = await res.json();

    // save to firestore
    for (let data of jsonData) {
      await admin.firestore()
        .collection("/prefectures")
        .doc(`${data.id}`)
        .set(data, { merge: true });
    }

    response.end();
  }
);