みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
ノンプログラマー向けにCloud SQLのはじめかた＆それによるApp Makerアプリの作り方についてシリーズでお伝えしています。
前回の記事はこちら。
G Suite管理コンソールでApp MakerのデータベースとしてCloud SQLインスタンスを設定する方法をお伝えしました。
これで、ようやくApp Makerでアプリケーションを作成する準備が整いましたね。
ということで、今回はApp MakerではじめてのCloud SQLのモデルを作成する方法を進めていきます。
では、行ってみましょう！
App Makerで新規アプリケーションを作成する
では、まずApp Makerで新規アプリケーションを作成していきます。
以下アドレスにアクセスします。
「CREATE NEW APP」をクリックすると、新たなアプリケーションを作成することができます。
「Create new app」の画面ではさまざまなテンプレートから新規アプリケーションの作成をすることができます。
ただ、今回は空白のアプリケーションを作っていきます。
ということで「Blank Application」の「SELECT」をクリックです。
これで、新規アプリケーションの作成はできました。
App Makerの３つの要素
「Untitled App」という名前のアプリケーションが作成されました。
ただ、「Blank Application」ですから、中身は空っぽです。
それで、App Makerでは以下の３つの部分を作成し、それぞれを設定したり、連携させたりしてアプリケーションを作成していきます。
- モデル: 「DATA」。いわゆるデータベース。今回はCloud SQLインスタンスを使用する
- ページ: 「PAGE」。ユーザーが操作するためのページ。ウィジェットを配置してUIを作成する
- スクリプト: 「SCRIPT」。UIの操作を受けての処理や、GASで他のGoogleアプリケーションを呼び出したりする
これらは、App Makerの画面左側のメニューからそれぞれ作成したり、アクセスしたりできます。
これまでのシリーズの記事で、Cloud SQLをデータベースとして使用できるようにしましたので、そのインスタンス上にこの新規のアプリケーションの「モデル」を作成していきます。
Cloud SQLによるモデルを作成する
では、Cloud SQLによるモデルを作成していきましょう。
今回は、以下のスプレッドシートに表されるような従業員データをデータベースとして作成してきます。
このスプレッドシートも後で活躍しますので、作っておいてくださいね。
新規モデルを作成する
では、App Makerに戻りまして、「DATA」の右側に表示される「＋」ボタンをクリックします。
ここから新規のモデルを作成することができます。
モデルの種類を選択する
「Create Model」というダイアログが表示されますので、モデルの種類を選択します。
色々な種類がありますが、迷うことなく「Google Cloud SQL(recommended)」を選択して「NEXT」です。
モデルの名前を決定する
続く「Create Cloud SQL Model」のダイアログでは、モデル名とオプションを設定していきます。
まずモデル名、すなわち「Model name」には今回は「EmployeeData」としておきます。
そして「IMPOERT FIELDS」をクリックしてください、
そうすることで、モデルのフィールドについて既存のスプレッドシートからインポートすることができます。
スプレッドシートのフィールドをインポートする
続いて「Create Model from a CSV file or Google Spreadsheet」というダイアログに遷移します。
先ほどのスプレッドシートからインポートをしたいので、ここのラジオボタンは「Use a Google Spreadsheet」を選択します。
それで「SELECT A SPREADSHEET…」をクリックです。
次の「Choose a spreadsheet to use a template for a model」では、インポート対象のスプレッドシートを検索して選択します。
検索窓に「従業員データ」などと入力すると、候補が出てきますので該当のスプレッドシートを選択した上で「Select」です。
続いてシートを選択して、見出し行をフィールドとして使ってよいのであれば「Use the first row values as field names」にチェックを入れて「NEXT」です。
これで以下のようにフィールド名がインポートされるので問題なければ「CREATE」としてください。
App Makerで作成したモデル
これで、App Makerのはじめてのモデルの作成が完了しました。
左側にモデル「EmployeeData」が表示されていると思います。
また、その左には「SQL」というアイコンがあり、Cloud SQLによるモデルということもわかります。
選択すると、「FIELDS」タブで以下のようにフィールド一覧を確認することができます。
データベースとして必要となるPRIMARY KEYとしてフィールド「Id」が自動で追加されているのも確認できますね。
まとめ
以上、App MakerではじめてのCloud SQLのモデルを作成する方法をお伝えしました。
スプレッドシートをインポートしなくてもモデルの作成はできますが、G Suiteユーザーであればこちらのほうが便利なときがありますね。
次回は、ページを作成してアプリケーションを作り込んでいきます。
どうぞお楽しみに！
連載目次：Cloud SQL＆App Makerアプリ開発のはじめかた
App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた＆それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。- はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
- Google Cloud Platform（GCP）に無料トライアル登録をする方法
- G Suite管理コンソールからApp Makerのデータベース設定を行う方法
- ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
- App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
- App MakerではじめてのCloud SQLのモデルを作成する方法
- App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
- App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
- App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
- はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
- App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩
- App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
- App MakerのPopupページでナビゲーションメニューを作成する方法
- App Makerでアプリを再公開して修正内容を反映する手順
- App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか？
