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


box

photo credit: Kentish Plumber Grey Squirrels via photopin (license)

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

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Makerをご存知ですか?

その最大の魅力はドラッグ&ドロップで、フォームやテーブルといったUIを作成できる点です。

また、そしてGASベースなのでそれを経由して様々なGoogleアプリケーションと連携できる点も大きな特徴です。

App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。今回は、App Makerとは何か、またその超簡単なアプリケーション開発のイメージについてお話します。

しかし、残念ながらGoogleドライブ上に作成できるデータベース「Data Tables」が使用できなくなり、データベースの部分に関しては少しハードルが上がってしまいました。

そこを解消するのが、本シリーズ「スプレッドシートをApp Makerのデータベースとして使用してみよう!」です。

まず今回は、App Makerでスプレッドシートをベースにモデルを作成する方法をお伝えします。

データベースの箱を作るイメージですかね。

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

お題:スプレッドシートをApp Makerのデータベースとして活用しよう

例えば、以下のようなスプレッドシートがあったとします。

スプレッドシートの従業員データ

スプレッドシートに従業員データをまとめたものですね(2人しかいませんが…)。

スプレッドシートの編集はちょっと自由すぎるけど、フォームは入力しかできなくて不便だし…みたいなニーズの間くらいのアプリケーションを作りたいということありますよね?

今までは、HTMLを駆使してWebアプリケーションを作る必要があったのですが、そのUIの部分をApp Makerに任せることができるようになったというわけです。

ということで、このスプレッドシートのデータをデータベースとして、App Maker上で閲覧、編集、追加ができるようにしていきたいと思います。

前準備として、以下の記事からはじまるシリーズを終えておくと良いと思います。

App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。今回は、App Makerとは何か、またその超簡単なアプリケーション開発のイメージについてお話します。

また、GAS(とくにスプレッドシートを操作する部分)はある程度わかっていたほうが良いと思いますので、必要であれば以下のシリーズもどうぞ。

【初心者向けGAS】本当の最初の一歩!スクリプトエディタでプロジェクトを開く
超初心者向けにGoogle Apps Scriptのプログラミングの一通りの流れと書き方について学ぶシリーズです。今回は、その最初の一歩としてスプレッドシートからスクリプトエディタを開く手順をお伝えします。

新規のApp Makerアプリを作成する

はい、ではApp Makerで新規のアプリを作成して、その名称を「従業員データベース」などとしましょう。

新規のApp Makerアプリのアプリ名を変更

ちなみに、新規のApp Makerアプリは以下のG Suite Developer Hubの「+新規」から作成できるようになりました。

Apps Script – Google Apps Script

便利になりましたね。

Calculatedモデルを作成する

新規モデルを作成する

続いてモデルを作成していきます。いわゆるApp Makerのデータベース部分です。

左側のDATAの横にある「+」部分をクリックします。

App Makerで新規のモデルを作成する

作成するモデルの種類を選択する

「Create Model」というダイアログが立ち上がり、どの種類のモデルを作るか?と尋ねられるわけですが…

Googleさんのおすすめは「Google Cloud SQL」です。GCPに契約してちょ、ということですね。

ただ、今回はGASがちょっとできるという前提で、慣れ親しんだスプレッドシートを選びます。

その場合、選択肢は「Calculated」となります。

モデルの種類としてCalculatedを選択する

なになに…

Create a calculated model based on a server side script, which can also be used to connect to an external database using JDBC or a REST API.

ふむ…とりあえずJDBCとかREST APIを使って外部のデータベースと接続したりとか、サーバーサイドスクリプトを使った計算モデル、のようです。

「サーバーサイドスクリプト」というのが、いわゆるGASになりますので、それを使ってスプレッドシートから計算したものをデータベースとするというイメージでしょうか。

モデルの名前を設定しフィールドを作る

続いて、「Model name」つまり名前を求められますので、ここでは「EmployeeData」としておきましょう。

それで、小さい文字なのですが見えますかね?

Optionalのところに「IMPORT FIELDS」ボタンをはさんで

Create fields from Google Sheet or CSV. Data in the spreadsheet will not be imported. Only the column headings are imported as fields.

とあります。

つまり、スプレッドシートからデータを持ってこれるわけではないけど、フィールドを作るだけならできるというわけですね。

では、お願いしましょう。「IMPORT FIELDS」をクリック。

モデル名を入力し「IMPORT FIELDS」をクリック

ちなみに、フィールドというのは「列」のことです。

フィールドを定義するというのは、その列の見出しと、格納するデータ型を決めるということになります。

スプレッドシートからフィールドを作成する

続いて、「Create Model from a CSV file or Google Spreadsheet」というダイアログになります。

今回はスプレッドシートを使ってフィールドを作るので「Use a Google Spreadsheet」を選択肢、「SELECT A SPREADSHEET…」をクリックします。

スプレッドシートを選択する

「Choose a spreadsheet to use as template for a model」のダイアログが開きます。

「モデルのテンプレートとして使うスプレッドシートを選択してね」とのことですので、検索などを駆使しながら、前述のスプレッドシート「従業員データ」を選択し「Select」をクリックします。

スプレッドシートを選択する

「Select a sheet」の部分ですが、対象となるシートを選択します。

今回のスプレッドシートには「シート1」しかありませんので、そのままの状態で「NEXT」です。

対象となるシートを選択

次の画面では、選択したスプレッドシートから取り込むフィールドとそのデータ型を確認できます。

問題なければ「CREATE」をクリックします。

フィールドを確認してCREATEをクリック

これで、モデル「EmployeeData」が完成したわけですね。

モデルが作成された

まとめ

以上、App Makerでスプレッドシートをベースとしたモデルを作成する方法をお伝えしました。

ただ、現時点ではフィールドの定義しか作れていませんで、中身のデータはありません。

「Calculated」してあげる必要があります。

次回、その部分を進めていきますよ。

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でデータ追加用のポップアップを作成してその表示の動作確認をする

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

タイトルとURLをコピーしました