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

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

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

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

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

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

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

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

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

ということで、今回は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」となります。

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

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

App Makerのフィールド名を設定する

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

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

App Makerのフィールドを移動する

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

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

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

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

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

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

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

App Makerでクエリスクリプトを書く

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

それで、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を指定するようにしてくださいね。

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

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

ページをリネームする

App Makerでは、ページにテーブルやフォームといった様々なウェジェットを配置してUIを作っていきます。

ですので、まずページが必要です。

左側の欄に既に「NewPage」という空のページがありますので、それを使いましょう。

わかりやすいページ名にリネームしていきますね。

「New Page」の三点リーダーアイコンをクリックするとメニューが表示されますので「Rename」をクリックします。

App Makerのページの三点リーダーメニュー

「Rename Page」というダイアログが表示されますので、今回は「TablePage」としましょうか。

それで「OK」をクリックです。

App Makerのページをリネームする
これでページのリネームは完了です。

テーブルウィジェットを配置する

続いて、このページ「TablePage」にテーブルウィジェットを配置していきます。

左上の「Widgetsアイコン」をクリックすると、色々なウィジェットが表示されます。

その中から「Table」ウィジェットを選択して、画面上にドラッグします。

App MakerのページにTableウィジェットをドラッグ

「Choose datasource」ダイアログが開きますので、ここは「EmployeeData」一択で、「NEXT」ですね。

App MakerのテーブルウィジェットのChoose datasource

続いて「Choose table columns」ダイアログです。

どのカラムを表示するかを決めるのですが、これは全選択のままで「NEXT」でOKですね。

App MakerのテーブルウィジェットのChoose table columns

最後に「More options」ダイアログなのですが、ここは変更できないのでそのまま「FINISH」です。

App MakerのテーブルウィジェットMore options

これでページにテーブルウィジェットを配置完了です。

プレビューをして確認する

では、プレビューをして確認してきましょう。

右上の「PREVIEW」ボタンをクリックします。

App Makerでプレビューをする

プレビューを許可する

初回のプレビューの際には許可のステップを踏む必要があります。

以下のような画面が表示されますので、「REVIEW PERMISSIONS」をクリックして進めていきます。

App Makerの「REVIEW PERMISSIONS」

続く画面でアカウントを選択します。

App Makerのアプリに許可をするアカウントを選択する

次の画面で「許可」をすればOKです。

App Makerのスコープを許可する

スプレッドシートのデータ取得を確認する

許可を終え、クエリスクリプトが正しく記述されていれば、以下のようにスプレッドシートのデータを取得して、テーブルウィジェットに反映することができているはずです。

App Makerのプレビューでスプレッドシートのデータ取得を確認する

まとめ

以上、App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法をお伝えしました。

  1. クエリスクリプトを作成
  2. ページをリネーム
  3. テーブルウィジェットの配置
  4. プレビュー

…とちょっと手順がありましたが、これでスプレッドシートのデータ取得はできました。

次回ですが、クエリスクリプトの中身について解説をしていきます。

App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
App Makerでスプレッドシートをデータベースとしたアプリケーションの作り方をお伝えしています。今回はApp Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説していきます。

どうぞお楽しみに!

連載目次:App Makerでスプレッドシートをデータベースとして使う

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。
  1. App Makerでスプレッドシートをベースにモデルを作成する方法
  2. App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
  3. App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
  4. App Makerで新しいページとフォームウィジェットを配置する方法
  5. App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
  6. App Makerでボタンウィジェットを設置してクリックで動作させる方法
  7. App Makerでボタンクリックで独自のスクリプトを動作させる方法
  8. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
  9. App Makerのボタンクリックでスプレッドシートにアクセスする方法
  10. App MakerでフォームウィジェットでLabelウィジェットを入力可能なウィジェットに差し替える
  11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
  12. App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
  13. App Makerで確認用のポップアップダイアログを作成する方法
  14. App Makerでポップアップダイアログの表示の変更とバインディング式について
  15. App Makerでポップアップのボタンクリックによるイベントを設定する
  16. App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
  17. App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
  18. App Makerでデータベースにレコードを追加するスクリプトを作成する
タイトルとURLをコピーしました