Firestoreとスプシの連携2

GASとスプレッドシートとFirestoreの連携

タイトルの通りGoogle App ScriptことGASとGoogle spreadtheetとFirestoreの連携について二回目の記事になります。

前回の記事はこちら
Firestoreとスプシの連携1

私のポートフォリオサイトはこちら。
Zihuatanejo works
GitHub

上記のサイトに以下の機能が実装しています。

• サイト内のフォームに問い合わせがあった場合に問い合わせの内容をスプレッドシートで表示すること
• サイト内の特定のページにスプレッドシート指定シートの情報を表示すること

要はスプレッドシートからFirestoreにGET/POSTできるようにしています。

前回の記事で
GASからFirestoreにクエリを投げて、データを取得するところまでを書きました。

今回は第二弾として取得したデータをスプレッドシートに展開するところまでを書こうと思います。

とりあえず2022年始まって2記事目まで書けてるな。自分えらい。(独り言)

作りたい機能

Firestoreに保存されたサイトへの問い合わせ情報をスプレッドシートで確認できるようにしたい。

大まかな実装の方針

1.任意のスプレッドシートにFirebaseへのリクエストのトリガーボタンを追加(前回の記事)
2.GASからFirebaseへGETリクエスト(前回の記事)
3.受け取った情報をスプレッドシートに反映（今回の記事)

この記事の内容

受け取った情報をスプレッドシートに反映

前提

• FireStoreからデータが取得できていること

Firestoreから取得したデータをスプレッドシートに反映する

とはいえそんな難しいことはないです。
大まかな処理は以下です。

• 任意のスプレッドシートを選択
• ヘッダー行を作成
• Firestoreのデータをデータ行に入れていく

だけです。
今回は割と短い記事が出来そう。

任意のスプレッドシートを選択

これはもうお決まりですかね。
まずはアクティブなスプレッドシートを選択します。
これはもうおまじないです。

// アクティブなスプレッドシートを選択
const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
// 任意のシートを選択
const targetSheet = spreadSheet.getSheetByName('シート名');

はい。
これで任意のシートが選択できました。
GASでシートを作ることもできますがここでは割愛。
特に意識していなかったですが、
スプレッドシートとシートの呼び方の認識って人それぞれですかね？？

ここではスプレッドシートと言ったらファイル全体。
シートと言ったらファイルの中の1つのシートを指します。

ヘッダー行を作成

これも簡単。
ヘッダー行の中身を配列で作成して選択したシートに展開します。

// ヘッダー行の中身を作成
const headers = [
  "hoge",
  "fuga",
  "piyo"
]
// ヘッダー行の中身を選択したシートに展開
sheet.getRange(1, 1, 1, header.length).setValues([headers]);

getRange()でシートのセルを選択します。
今回はシートの一番左上から3列分の1行を選択しています。
getRangeの引数は色々な値が取れるのですが、
私はgetRange(row, column [, numrows [, numcolumns]])を使うことが一番多いです。
多分エンジニアな方はこれを一番使うんじゃないかな。
何かと計算がしやすいので。

少しわかりやすく説明すると
getRange(行番号, 列番号(Aを1、Bを2として数える), 何行分選択するか, 何列分選択するか)
となります。

今回だと引数として1, 1, 1, header.langthを渡しているので、
A1から3列を一行選択していることになります。
以下のスクショの状態ですね。

注意点として今回はヘッダーの各項目名をハードコーディングしています。
なので、Firestoreから取得したデータとヘッダーの項目数はうまく合わせてくださいww

動的に設定したい場合は、この記事を読んだあと応用編としてやってみてくださいww

次にsetValues()ですね。
こちらは選択したセルに値を挿入するメソッドです。
setValueとsetValuesがあるので注意。

またserValuesの引数は二次元配列として渡す必要があります。

今回headers変数は一次元配列で作成しているので、
setValues([headers])としています。

これでヘッダー行の完成です。

Firestoreのデータをデータ行に入れていく

ほとんどヘッダーと同じ要領です。

先にコードをば

// Firebase取得したデータ。詳しくは前回記事を確認してください。
const result = firestoreClient.query('test').Execute()
const records = []

result.forEach((record, index) =>{
  const row = [
    record.obj.hoge,
    record.obj.fuga,
    record.obj.piyo
  ]
  records.push(row)
});
sheet.getRange(2, 1, records.length, records[0].length).setValues(records);

recordsという二次元配列を作って値を突っ込んでいます。
なので、[[1,2,3], [a,b,c], [A,B,C]....]とレコード数分の配列が作成されます。

Firestoreからの値はrecord.obj.キー名で取れるはずです。

最後にヘッダー行と同じようにgetRangeしてsetValuesします。

getRangeは1行目はヘッダー行なので、2行目の1列目(=B1)からスタートしてレコード数分を列数分選択します。

列数はrecords[0].lengthとしていますが、header.lengthでも同じ(はず)です。

最後にsetValuesで値を挿入します。
今回は既に二次元配列になっているので、recordsをそのまま引数に入れます。

これでFirestoreから取得した値をスプレッドシートに反映できました。

最終的にできたコードは以下になります。

const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
const targetSheet = spreadSheet.getSheetByName('シート名');
const headers = [
  "hoge",
  "fuga",
  "piyo"
]

sheet.getRange(1, 1, 1, header.length).setValues([headers]);

const result = firestoreClient.query('test').Execute()
const records = []

result.forEach((record, index) =>{
  const row = [
    record.obj.hoge,
    record.obj.fuga,
    record.obj.piyo
  ]
  records.push(row)
});
sheet.getRange(2, 1, records.length, records[0].length).setValues(records);

本日はここまでです。
次回はPOST編を書こうと思います。
乞うご期待！！