LoginSignup
5
5

More than 3 years have passed since last update.

バックエンドの知識がない自分がFirestore+GoogleAppsScriptで簡易DBを構築した話

Last updated at Posted at 2019-12-23

自分へのメモがわりに初投稿です。

まとめ

  • DB使いたい!
  • でもバックエンド知識がない:thinking:
  • Firestoreを使えばいいじゃない!
  • 管理画面からのデータ登録めんどい:head_bandage:
  • スプレッドシートに記入してGoogleAppsScriptでFirestoreに一括登録!:hugging:

この記事について

私は2018年10月ごろ、ほぼ未経験で今の会社に転職し、Androidアプリのエンジニアになりました。
ようやっと業務にも慣れてきまして、そろそろ自分でも趣味でアプリを作ってみたいな、と思い始め。
そんな時にぶち当たった課題をGAS+Firebaseで解決したお話です。

DBを使いたいけど…

アプリの詳細は省きますが、よくある「DBからデータを引っ張ってきてリストに表示させる」系の機能を実装しようとしていました。

バックエンド知識が無い:innocent:

はい。
ものすごく基本的なところからつまづいています。

でも、便利な世の中になったもので、バックエンド知識がなくてもFirestoreを使えばデータベースを扱える!ということを私は知っていました。
Firestoreにデータを入力してアプリから叩けばいいじゃん!と。

でもそこにも落とし穴がありました。

管理画面からのデータ入力が死ぬほどめんどくさい

皆さまFirestoreを触ったことはあるでしょうか。
Firebaseコンソール画面からのデータ入力はお世辞にも快適とは言えません。
「フィールドの追加」を選択して、「フィールド」と「型」と「値」を入力して…というのをフィールドの数だけ繰り返さなくてはならず、はっきり言って手動ではとてもやってられません。

どうにかこの「データ入力」部分をやりやすくできないか?と調べていて見つけたのが表題のやり方です。

GoogleAppsScript

ようやく本題です。
Googleスプレッドシートには「GoogleAppsScript(GAS)」というExcelでいうVBAみたいな機能があります。
JSライクなスクリプトを記述することでシートの値を一括で修正したり出来る便利機能です。
このGASを使ってFirebaseとスプレッドシートを連携する方法があると知り、これだ!となりました。
(参考:【書籍管理シリーズ】GASとFireBase(Firestore)を連携させるよ!

以下、実装方法を紹介します。

実装

注意事項

Firebaseの構築は済んでいる前提です。

スプレッドシートを作成する

データ入力用の以下のようなスプレッドシートを作成します。
スクリーンショット 2019-12-23 15.44.23.png
1行目がFirestoreに登録する時のフィールド名になります。

GoogleAppsScriptを作成する

スプレッドシート上から[ツール] > [スクリプトエディタ]を選ぶとスプレッドシートに関連付けられたGASが自動的に作成されます。
スクリーンショット 2019-12-23 15.50.52.png

スプレッドシート上のデータを取得する処理を書く

コード.gs というファイルが開くと思うので、下記コードを記載します。
コードはこちらを参考にさせて頂きました。

var sheetName = '{シート名}'
var book = SpreadsheetApp.getActiveSpreadsheet()
var sheet = book.getSheetByName(sheetName)

var START_ROW = 2
var START_COL = 1

function getSheetValue(sheet) {
  // 1行目(フィールド)の値を取得
  var fieldRange = sheet.getRange(1, 1, 1, sheet.getLastColumn());
  var fieldRowValues = fieldRange.getValues();
  var fields = fieldRowValues[0];
  var rowValues = [];
  var jsonArray = [];

  var range = sheet.getRange(START_ROW, START_COL, sheet.getLastRow() - START_ROW + 1, sheet.getLastColumn())
  var values = range.getValues();

  for(var i = 0; i < values.length; i++) {
    // 1行のデータをpush
    var rowValue = values[i];
    var json = new Object();
    for(var j = 0; j < fields.length; j++) {
      json[fields[j]] = rowValue[j]
    }
    jsonArray.push(json)
  }

  return jsonArray;
}

試しにログに出力してみます。
コードに以下の関数を追加し、「関数を選択」からdoOutput を選んで実行してみましょう。

function doOutput() {
  var value = getSheetValue(sheet)
  Logger.log(value)
}

スクリーンショット 2019-12-23 16.14.37.png

初めて実行する時は下記のような権限リクエストが表示されるので、
許可しておきます。
スクリーンショット 2019-12-23 15.59.17.png

実行完了後、[表示] > [ログ]を確認して以下のようなログが出力されていれば成功です。
スクリーンショット 2019-12-23 16.16.04.png

スクリーンショット 2019-12-23 16.16.19.png

取得したデータをFirestoreに出力する

いよいよFirestoreへの出力処理です。
出力処理はGAS:SpreadSheetに登録したデータをFirestoreに送信するを参考にさせて頂きました。

Firestoreへの接続には、grahamearley/FirestoreGoogleAppsScriptさんのライブラリを使います。

ライブラリの追加

[リソース] > [ライブラリ] > [ライブラリを追加]から、

1VUSl4b1r1eoNcRWotZM3e87ygkxvXltOgyDZhixqncz9lQ3MjfT1iKFw

というコードを入力します。
バージョンは現在22が最新になっています。
スクリーンショット 2019-12-23 16.26.30.png

秘密鍵の取得

ライブラリを追加したら、次にFirestoreへの接続に必要な秘密鍵を取得します。
Firebaseのコンソール画面から、[プロジェクトの設定(Project OverViewの右の歯車マーク)] > [サービスアカウント] > [新しい秘密鍵の作成]を選択します。
スクリーンショット 2019-12-23 16.33.35.png
生成されたjsonファイルを元に、下記の関数をコード.gsに追加します。

// Firestoreへ認証する為のデータ情報を設定
function firestoreCertification() {
  var certification = {
    "email": "{client_emailの値}", 
    "key": "-----BEGIN PRIVATE KEY-----\n{private_keyの値}\n-----END PRIVATE KEY-----\n",
    "projectId": "{project_idの値}"
  }
  return certification;
}

これで指定したFirestoreにアクセス出来るようになります。
Firestoreへのドキュメント書き込み処理が以下です。

// Firestoreにデータ作成
function createFirestoreDocuments() {
  var arrayData = getSheetValue(sheet);
  arrayData.forEach(createDocument)
}

function createDocument(item) {
  var certArray = firestoreCertification();
  var firestore = FirestoreApp.getFirestore(certArray.email, certArray.key, certArray.projectId);

   firestore.createDocument('document/'+ item.id, item);
}

作成したcreateFirestoreDocuments関数を実行すると、
Firestoreのdocumentコレクション内に、スプレッドシートの内容が追加されました!
スクリーンショット 2019-12-23 16.58.44.png

さいごに

私のような雑魚エンジニアでもDBっぽいものを扱えるようになるFirestore+GoogleAppsScript最高!という記事でした。
少しでも似たような境遇の人(いる?)のお役に立てれば幸いです。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5