爆速で簡単なCRUDアプリを作る

どうもこんばんは、みかんです。

**！！！！とつぜんですがたいせつなおしらせ！！！！**

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1


??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・


**！！！！おしらせはおわりです！！！！！**

今回は「爆速で簡単なCRUDアプリを作る」方法を書いてみます。
下記ステップでやっていきます。

* 1 アプリを新規作成
* 2 アプリで使うデータを定義
* 3 テーブルをドラッグアンドドロップで配置
* 4 入力フォームをドラッグアンドドロップで配置
* 5 プレビューで動作確認

# 1 アプリを新規作成

|![gif001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/ebf1e275-ac89-f2e0-9968-24a32428afaa.gif)|
|:-:|

Starter Appを選んでアプリを作成します。
作成後は、すぐに名前を付けましょう。気軽に作れる分、作りすぎると管理が大変になってきます。

# 2 アプリで使うデータを定義

|![gif002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/9cef9d9f-8fea-d6c9-962f-2079de1ae08e.gif)|
|:-:|

備品データ管理のつもりで、「Equipments」というモデルを作成しています。

|![gif003.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/82a206e6-804c-4ae8-e8db-62310c37e5e3.gif)|
|:-:|

備品の名前と、個数を管理できるようにします。それぞれ、「文字列型のNameフィールド」と「数値型のNumberフィールド」を追加します。
それぞれ「Display Name」には日本語をいれています。
こうしておくと、後述するテーブル/フォームウィジェットなどを配置する際、自動的にその項目に対するラベルが設定した文字列になります。

# 3 テーブルをドラッグアンドドロップで配置

|![gif004.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/42e2ca4c-fbfe-e2a0-35ab-215ed7ee84fc.gif)|
|:-:|

最初から置いてある余計なラベルを２つ消し、パネルの配置方向を横に変更し、
その状態でテーブルウィジェットをドラッグアンドドロップで配置します。
ドラッグアンドドロップ直後に表示される「Choose Datasource」は「このテーブルで何のデータを表示するのか？」という質問だと思うとわかりやすいです。
そのあといくつかチェックボックスをクリックしています。選んだモデルのうち、何を表示するのか。直接編集できるようにするのか。テーブルにページングなどはつけるのか、などといった設定を行っています。

# 4 入力フォームをドラッグアンドドロップで配置

|![gif005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/d64496a3-11d1-ff0a-0ca3-75ff047bcc6b.gif)|
|:-:|

普通、入力画面は別に作成することが多いですが、簡単のためここでは同じ画面に用意してみます。
テーブルの横に、フォームウィジェットをドラッグアンドドロップで配置しています。
フォームは新規作成用(Insert)か編集用(Edit)かを選べるようになっています。
わかりやすいのはInsertのほうなので、それを選択しています。
配置後、UIが一部隠れてしまっているので、親のパネルの長さをドラッグアンドドロップで変更しています。

|![gif006.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/768e3c4b-4c1f-7384-7894-4315ae4995b7.gif)|
|:-:|

テーブルとフォームがぴったりくっついていて微妙なので、フォームパネルの「Margin Left」を16に設定しています。左に16pxマージンを取る。そのまんまですね。
つづけて、英語が埋め込まれているところを直接日本語に変えてみています。

|![gif007.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/4dd75df5-be93-4a77-aa4d-44331d5fa9d0.gif)|
|:-:|

フォームが縮こまっていて面積を有効に使えていない感じがあるので、フォームのレイアウトの設定を「fit to content」から「fill parent」に変更します。横の長さを、「ウィジェット自身が内包する子ウィジェットの長さと合わせる」から「自身を内包する親ウィジェットの横の長さに合わせる」に変えています。
fill parentの場合は、親に合わせるというより空いているスペースを最大限に使う、みたいな感じです。

# 5 プレビューで動作確認

|![gif008.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/afd19379-f1cd-a206-a7d2-b2be87ac6343.gif)|
|:-:|

作ったものの動作確認は、画面右上のPREVIEWから簡単に行なえます。
初回は各種認証ページが表示されますが、一度認証しておけば次回からは不要です。
(新たな権限が必要とならない限り)

ここまでの手順で、CRUDがすべて満たせるWebアプリができています。

**C**reate (作成) : 備品データの新規作成 (フォーム)
**R**ead (読込) : 備品データの読込 (テーブルの自動読み込み)
**U**pdate (更新) : 備品データの編集 (テーブル内で直接編集)
**D**elete (削除) : 備品データの削除 (テーブル内のゴミ箱アイコンで削除)

特にテーブルにおいてページング、ソート、行削除が最初からついてくるのはありがたいですね。

Cloud SQLが開発用に設定されている場合に限りますが、慣れていれば5分とかかりません。
既に作ってあるアプリをExportとしてファイルとして取っておき、新規作成時にそれをInportすると今回の手順すら不要になります。

2019/12/07現在、相変わらず英語のUIでとっつきにくいですが、わかってしまえばわりと簡単そうじゃないですか？
ブラウザOnlyで、サクサクものが出来上がるので、やってて楽しさもあります。

G Suite Business以上の環境があるなら、是非試しに触ってみてください。
Cloud SQLの設定は、会社のG Suite担当さんに「月額2000円程度のCloud SQLインスタンス立ててクレメンス！」とお願いしてみましょう！

以上です。良いApp Makerライフを!