AppSheet ちょっと面白いかも

ローコード開発とかノーコード開発とかコードレス開発とか、これまで、OutSystemsとGlide App（glideapps） を試して来てましたが、ちょっと前に、GoogleによるAppSheetの買収が話題になりました。
https://jp.techcrunch.com/2020/01/15/2020-01-14-google-acquires-appsheet-to-bring-no-code-development-to-google-cloud/
これで今度はAppSheetが盛り上がると思いきや、さほどでもないように感じられます。
が、ちょっと試してみたところ、意外と面白いかも、というお話です。

## オープンデータとは（泣）
本題に入る前に、ちょっとぼやきを。
以前、Glide Appを試した時に、何をコンテンツとして提供するか考えて、オープンデータを使うのが良いかなと思ったのが下記の記事、およびそこからのリンクです。
https://qiita.com/JQinglong/items/8c8cd2e2d5c29225972a

今回は、ちょっと前から、日本の島データベースを作りたいという希望があったので、島に関するオープンデータを探してみました。おそらく一番網羅的にまとめられているのが、国土地理院の国土面積調の中の、島面積一覧かと思われます。
https://www.gsi.go.jp/KOKUJYOHO/MENCHO201910-index.html

他に、目につくのは、国土交通省の離島振興関連の情報として提供されている、離島振興対策実施地域一覧。
http://www.mlit.go.jp/kokudoseisaku/chirit/
ただ、これは、同法の対象の島のみであり、沖縄、奄美、小笠原等は対象になっていないため、今回の目的にはそぐいません。
（なお、対象の問題はありますが、以前公開されていた法のデータは、寄港回数まで載っていて、良いなと思いましたが、最新のデータではその辺の情報は載っていませんでした。
https://www.mlit.go.jp/common/000995144.pdf
）

そして、これらの情報に共通ですが、PDFで提供されています。しかも、それをコピーしようとしても、きれいにはコピーされません（一部抜けたり、順番がバラバラになったり）。

データを公開するという考えは、ちゃんと根付いていないのだなと、つくづく思います。

今回は、国土地理院のPDFを、そのまま文字コピーしても使えないので、画像として保存し、Googleドライブにアップし、Googleドキュメントで開くとOCRしてくれるので、それで抽出された文字を加工しました。これでも、一部抜けたりバラバラになったりはしますが、PDFから直接コピーするよりはだいぶマシでした。
https://docs.google.com/spreadsheets/d/18wJt9K0AQSBGNoTrGvoMO8Tr0WS_-LjnoZgbJqkcbEE/edit?usp=sharing

## AppSheetによるアプリ生成
ログインすると、MyAppsの一覧が表示されます。
<img width="400" alt="AppSheet MyApps.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/5baa6102-940f-5f75-df24-1692b6f93a2f.png">

Googleドキュメントの情報を見て、適当に自動でアプリとして使えると判断してくれるものもあるようです。
Glide Appの時に使ったスプレッドシートも表示されていますので、開いてみると、開発環境の中では、既にそれっぽく動いています。
<img width="1196" alt="AppSheet 港区.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/2e6bd62a-e926-46d3-939a-27598d9d27ec.png">

いくつかの設定を変えれば（詳細は後述）、デプロイ可能です。
下記がデプロイされたアプリです。
https://www.appsheet.com/start/42e77a66-a079-4889-90da-f884647b26a9
おそらくこれが一番簡単なアプリの作り方でしょう。ノーコードでここまで生成できれば一定の用途としては使えるのではと思います。

## AppSheetで新規アプリを作る
では、今回の本題で、島データベースのアプリを一から作ってみます。
ログインしてMyAppsのページ右上の[New app]をクリックします。
３タイプの中から作成方法を選択します。それぞれ面白そうですが、真ん中の[Start with an idea]を選択します。
<img width="320" alt="AppSheet newapptype.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/2b1a618b-8234-8662-6f0b-5dc7810b204b.png">

## Start with an ideaによるアプリ作成
Start with an ideaの場合、何をするのか質問してくれます。
<img width="320" alt="AppSheet datakind.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/22324204-6b3a-1bb1-93aa-dedf922f5f67.png">
最初は、このような形でどんなデータを対象としたアプリなのか聞いてくれるので、islandと答えてみます。
<img width="320" alt="AppSheet datakindisland.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/ecc46a39-fd91-e9c8-6d65-c936844af71c.png">
すると、選択候補が提示されるので、素直に選択します。
それだけで、基本的な枠組みは出来上がります。まあまあ驚愕。サンプルアイコンまで準備してくれました。
<img width="400" alt="AppSheet dev.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/8ad21a5e-724f-2305-0cd4-d14df2d12422.png">
もっとやりたいことがあるか聞いてくれるので、mapと答えてみます。
<img width="320" alt="AppSheet map.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/49a9df95-d3c7-3e03-1de5-0fbc406620ac.png">
また選択候補を出してくれるので、選択します。地図画面が追加されました。
<img width="400" alt="AppSheet map2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/13992a6a-18d0-e356-515d-20f11a19e48d.png">
写真も載せたいので、photoと入力してみます。今度は選択候補がたくさん出て来たので、一番上のを選択します。
<img width="320" alt="AppSheet photo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/28fcb9ce-be50-448e-6bde-e5b1e2374ac9.png">
写真のページもできました。先ほどの選択候補で、島と写真の親子関係を気にしているのが分かりますが、島1：写真多と判断してくれたようです。
<img width="400" alt="AppSheet photo2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/2f862c0c-145b-a610-f079-c5c5a79dbe94.png">
<img width="400" alt="AppSheet photo3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/756d12b9-6441-3401-257c-f2a3f990b4d5.png">
ここまで作ってくれればもう十分でしょう、Googleが買収するだけのことはあります。

ここで、[Save and Refine]をクリックし、アプリの名前を入力して[Go]をクリックすると、アプリが構築されて、デザイン画面になります。
<img width="240" alt="AppSheet appname.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/40fd0272-a823-45f8-30bc-67c5cc3ddc78.png">
<img width="400" alt="AppSheet islanddev.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/db28fbdf-3e64-f9a8-f108-db6ffe85438a.png">

## アプリの各種設定
まず気になるのがデータはどこに保存されるのかです。
DataメニューからTablesを見てみると、datasourceがgoogleになっています。Googleドライブを見てみると、このようなフォルダ、ファルが作成されていました。なるほど。
<img width="320" alt="AppSheet gdrive.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/f6c2bfc8-5775-9d32-0087-c6f3cf762149.png">

次に、無料カウントでデプロイするためには、いくつか設定変更が必要ですので、それを変えていきます。

BehaviorメニューのOffline/Syncで、OFFLINE USEをOFFにします。
<img width="400" alt="AppSheet offline.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/9cbd19c9-2f84-81ca-ffcc-95dd01016ad0.png">

また、SecurotyメニューのRequired Sing-inで、Require user signin?をOFFにする必要があります。単なるデータ参照アプリならOFFで問題ないでしょう。OFFにすると、下二つの情報の同意を求められますので、確認します。
<img width="400" alt="AppSheet signin.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/1894b7f5-a6bc-458a-da96-0f0d91dac36e.png">

## デプロイ
デプロイする前に、まずデプロイ可能かのチェックをします。
ManageメニューのDeployで、Deployment Checkの中の、[Run deployment check]をクリックします。
※Saveされていないとエラーと判定されるので、設定したら右上の[SAVE]をするようにお願いします。
<img width="400" alt="AppSheet runchk.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/14224f42-72b7-63d7-0f79-a950efcfef0d.png">

全てチェックがOKになったら[Move app to deployed state]をクリックします。
<img width="400" alt="AppSheet deploychk.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/97feecf5-070b-2953-0455-bd38c6b26bb7.png">
左上のStatusがDeploydに変わったらOKです。
<img width="400" alt="AppSheet deployed.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77307/89fa0589-d2c1-82e9-34f6-65c1a5cdd395.png">

Share appメニューのLinksに、インストール用のリンクとブラウザ用のリンクが表示されています。
今回作成したアプリは、それぞれ下記です。
Install Link
https://www.appsheet.com/newshortcut/a1def116-f69f-4b3a-a7bb-e040bd2bec28

Browser Link
https://www.appsheet.com/start/a1def116-f69f-4b3a-a7bb-e040bd2bec28

ブラウザの方はそのまま見られますが、アプリの方は、AppSheetのインストール画面が表示されました。インストールして開くと、今回作成したアプリが開きます。ちょっと分かりづらい？？

データは、とりあえず、最初に作った島一覧の情報を貼り付けていきますが、追々整備しようと思います。

## まとめ
これだけ簡単に作成できて、しかも、AndroidアプリもiOSアプリも同時に生成されてしまう。これはGlide厳しいかもしれないですよ。
今回は、ほぼ自動生成のままですが、データ構造等も自分でかなりいじれそうなので、もう少しチュートリアル等で勉強してみると、用途が広がるような気がしています。