App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法

photo credit: dullhunk Google Classic: Please Allow 30 Days for your Search Results (Original artist unknown) #Google via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

App Makerでスプレッドシートをデータベースとしたアプリケーションの作り方をシリーズでお伝えしております。

その栄えある第１回目だった前回の記事はこちら。

App Makerでスプレッドシートをベースにモデルを作成する方法

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。今回は、シリーズ初回としてApp Makerでスプレッドシートをベースにモデルを作成する方法をお伝えします。

スプレッドシートをベースにモデルを作成するところまで進めました。

ですが、その作ったモデル（App Makerのデータベース部分）ですが、スプレッドシートをベースとはいえ、そのフィールド名とデータ型を参考に枠組みだけを作った感じなんです。

つまり、中身のデータはまだ存在していません。

そのデータは「クエリスクリプト」と呼ばれるスクリプトを書くことで、スプレッドシートから取得することができます。

ということで、今回はApp Makerでクエリスクリプトでスプレッドシートのデータを取得する方法です。

では、行ってみましょう！

前回のおさらい
行番号を表すフォールドを追加する
スプレッドシートのデータを読み込むクエリスクリプト
1. クエリスクリプトを記述する
ページをリネームする
テーブルウィジェットを配置する
プレビューをして確認する
1. プレビューを許可する
2. スプレッドシートのデータ取得を確認する
まとめ
連載目次：App Makerでスプレッドシートをデータベースとして使う

前回のおさらい

前回は、新規のApp Makerアプリを作成して、App Makerのデータベース部分となるモデル「EmployeeData」を作成しました。

作成したといっても、まだフィールドとそのデータ型、つまり枠組み部分だけですけどね。

それで、その元となっているスプレッドシートがありまして、それがこちらです。

先ほどのフィールドとそのデータ型の定義は、このスプレッドシートからインポートしたものだったんですね。

いったん、フィールドをまとめておきましょう。

フィールド	データ型	説明
Name	String	従業員名
Email	String	メールアドレス
HireData	Date	入社日
Active	Boolean	在職かどうか

それで、今回は上記のスプレッドシートのデータを「クエリスクリプト」を使ってApp Makerのモデルへ取り込む方法をお伝えしていきますよ。

行番号を表すフォールドを追加する

と、その前に、ひとつフィールドを追加しておきましょう。

というのも、スプレッドシートをデータベース代わりにするのですが、そのレコードの行番号が何番目か？といった情報を、App Maker側でも持っていたほうが便利だからです。

では、進めていきましょう。

まず、右側の欄からDATA「EmployeeData」を選択、するとEmployeeDATAの「FIELDS」タブで、フィールド一覧を確認できるはずです。

そこで、オレンジ色の「ADD FIELD」ボタンをクリック！

追加するフィールドの型ですが、行番号を格納するフィールドなので「Number」となります。

追加したフィールドの名前をname欄に設定します。

ここは「Index」などとしておきましょう。

新たに追加したフィールド「Index」ですが、役割的に先頭に置いたほうが良いので、下図に示す部分をつかんでドラッグ…！

一番上に配置しましょう。

これで、モデルEmployeeDataのフィールド構成が以下のようになりました。

フィールド	データ型	説明
Index	Number	行番号
Name	String	従業員名
Email	String	メールアドレス
HireData	Date	入社日
Active	Boolean	在職かどうか

スプレッドシートのデータを読み込むクエリスクリプト

では、今回の主題である「クエリスクリプト」を作成していきましょう。

DATA「EmployeeData」の「DATASOURCE」タブをクリックします。

すると「EmployeeData」という名前のデータソースがありますので、クリックして展開しましょう。

データソースは文字通り、「データの元」のことですね。

クエリスクリプトを記述する

それで、Queryという欄に、データを取得するためのスクリプトを書いていきます。

それをクエリスクリプトといいます。

クエリスクリプトは、サーバーサイドのスクリプトです。つまりGASですね。

今回は以下のようなスクリプトを書きます。

var ss = SpreadsheetApp.openById('***** スプレッドシート「従業員データ」のID *****');
var sheet = ss.getSheets()[0];
var values = sheet.getDataRange().getValues();

var records = [];

for(var i = 1; i < values.length; i++){
  var record = app.models.EmployeeData.newRecord();
  record.Index = i;
  record.Name = values[i][0];
  record.Email = values[i][1];
  record.HireDate = new Date(values[i][2]);
  record.Active = values[i][3];
  records.push(record);
}

return records;

1行目のopenByIdメソッドの引数ですが、皆さんのスプレッドシートのIDを指定するようにしてくださいね。

では、このスクリプトの動作を確認していくのですが、そのためのページとテーブルを用意しないといけませんね。

ページにテーブルをウィジェットとして配置して、そこに取得したデータを表示させるのです。