Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の四（最後）

##はじめに
今回の記事は、[前回の記事（Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の参）](https://qiita.com/kazu_tekuru/items/194379f85a1c1a6b4379)の続きです。


Googleの新サービスである、コードをほとんど書かなくてもアプリが作れちゃうという「AppSheet」というサービスで、
お酒のカタログアプリを作っている最中で、記事が思ったよりもさらに思ったよりも長くなってしまい、今に至ります。

今までの作業で、
登録したお酒の一覧は表示することができました。
お酒をカテゴリ別で表示できるようにもなりました。
Sliceという機能を使って、綺麗な表示もでいるようになりました。
「でも、まだまだ画面遷移が野暮ったいぞ！ 修正じゃい！」というところから始まります。

###今回の記事でできること
・データ型「APP」の設定による画面遷移の制御

それでは始めていきます。

##画面遷移の変更
まず、画面遷移をコントロールするために、スプレッドシートに以下のように列を追加します。
「LiquorDataTest」スプレッドシートの「種別」シートの、
C列に、「app」という列が追加されていることがわかると思います。
<img width="588" alt="スクリーンショット 2020-04-15 14.45.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/3d1a02de-021f-d334-152c-7f008c755355.png">

AppSheetでは、画面遷移をするときには、「APP」というデータ型を使用することが説明されています。

[APPデータ型について](https://help.appsheet.com/en/articles/1023058-app-column-type-deep-link)

英語の説明ですが、冒頭部分をGoogle先生に翻訳してもらいます。
こんなことが書かれていました。
「アプリ列タイプは、現在のアプリの**別のビューまたは別のアプリに移動する**ために使用されます。」

そうです！
この記述から察するに、この機能を使えば、
「種別」ビューにて、「日本酒」がクリックされると、「日本酒」ビューを表示する、ということができるかもしれません。
前回記事の最後に書いたような、理想の画面遷移が実現できる気がします。

さらに読み進めて、キャプチャのスプレッドシートにもあるように、
各行のapp列には「#control=XXXX」というデータを追加しています。
このXXXX部分には、遷移させたいビューの名前を指定しています。


それでは、以前にも実施したように、スプレッドシートの列を追加したので、アプリにもデータ列の反映作業をしていきます。

<img width="1512" alt="スクリーンショット 2020-04-15 14.46.09のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/c6a2a7e0-fde0-4b9d-0f36-bccae273347c.png">

「Data」>「Columns」から「種別」の「Regenarate Structure」ボタンをクリックします。
そのまま設定を反映させたら、以下のように、「種別」テーブルに「app」列が追加されます。

<img width="1335" alt="スクリーンショット 2020-04-15 14.46.29のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/f759ff8e-e034-8efb-8818-fc67a3633bd2.png">

続けて、追加された「app」項目の型を「App」に変更します。
<img width="1327" alt="スクリーンショット 2020-04-15 14.46.44のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/22effe27-0e2a-3cf2-4c86-499610ec85bf.png">

###APP型の動作確認
ここで、設定した「APP」型がどのように動作するのか、確認してみましょう。
「種別」ビューから、日本酒をクリックしてみます。
<img width="383" alt="スクリーンショット 2020-04-15 14.49.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/1af57250-ae48-f14c-2895-3260264fddf6.png">

「種別」の詳細画面に、app列が表示されるようになりました。
実はこの項目をクリックすることができます。
クリックしてみると、、、
<img width="380" alt="スクリーンショット 2020-04-15 14.49.16のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/721be3d0-0c53-1cc3-807d-c854956e7b61.png">

無事、「日本酒」ビューへ遷移できました。
<img width="381" alt="スクリーンショット 2020-04-15 14.49.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/4fce9e7d-0f03-df4a-594a-3faac2226a88.png">

**ただ、まだ！**
**まだこの遷移もいけてない！**
**明らかに、「種別」の詳細画面はいらない！**
**この1画面の遷移だけいらない！**

**・**
**・・**
**・・・***
**調べたら、できそうだー〜ー**


ここからあと少しです。
「UX」>「Views」から、「種別」ビューを確認します。
<img width="1505" alt="スクリーンショット 2020-04-15 14.49.48のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/f2e45b9f-049b-aa5b-6f1c-06bd4b2c8016.png">

「種別」ビューの項目をスクロールで下がっていくと、
「BEHAVIOR」という項目があります。
この「BEHAVIOR」をクリックすると、以下のように各項目が表示されるようになります。

その勢いで、以下の項目を変更します。
**Row Selected**：Go to App Link(app)
この項目を設定すると、「行を選択した場合に、appリンクが実行される」という挙動になります。
<img width="1305" alt="スクリーンショット 2020-04-15 14.50.09のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/39b64691-8380-bcd1-8a28-a92f9390c73f.png">

**これでひと通りの設定ができたはず！**

###動作確認
**動作確認していきます！**

日本酒の項目をクリックするとー。。。
<img width="380" alt="スクリーンショット 2020-04-15 14.50.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/7cbb2875-92b0-bfc5-c82b-306bfa0e04db.png">

~~**日本酒ビューに線伊勢dきたーーーー**~~
（取り乱しました）
**日本酒ビューに遷移できたーー！！**


<img width="384" alt="スクリーンショット 2020-04-15 14.50.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/21a1c6ab-e68c-0333-dbc2-4ae9a37e9497.png">

**ここから詳細画面へも遷移できます！**
<img width="384" alt="スクリーンショット 2020-04-15 14.50.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/1b1318cc-c55c-142e-fb84-d47af80b13b9.png">

これで、理想にしていた画面遷移ができるようになりました！
<img width="1498" alt="スクリーンショット 2020-04-15 14.51.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/bfc99c96-a509-aea7-9feb-a18380be4fb9.png">

##最後の微調整
現在はデータを自由に操作できる設定にしています。
もしも複数人で共有するような場合は、勝手に削除/更新/追加できないようにしたいとします。
<img width="1919" alt="スクリーンショット 2020-04-15 14.51.56のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/20834739-609f-4923-5aa3-66b77dcacb93.png">

「UX」>「Views」から「商品」ビューを開いて、
**Show actionn bar**項目のチェックを外します。
これで、画面内のゴミ箱ボタンなどは表示されなくなりました。
<img width="1917" alt="スクリーンショット 2020-04-15 14.52.04のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/fa41c389-abf1-6cc1-dd9e-b137d863c65c.png">

でも、画面内に、まだ「+」ボタンがありますね。
これを消すには、「商品」テーブルへの編集権限を「読み取り専用」にするしかなさそうです。
<img width="1917" alt="スクリーンショット 2020-04-15 14.52.04のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/148fe1d5-25c1-8a80-5681-7abf93f96943.png">

最初からここまで通して読んできてくれた~~酔狂な~~方はわかるかもしれません。
[Data]>[Tables]から「商品」テーブルの以下
**Are updates allowed?**項目を「Read Only」に変更します。
<img width="1915" alt="スクリーンショット 2020-04-17 18.16.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/3a05a1c0-24d5-81c2-5257-5c6f4cf7c84f.png">

これで、画面内の変更ボタンが全て消えました！！
**めでたしめでたし！！**

##最後のまとめ
今回の設定で以下のことができるようになりました。
・データ型「APP」の設定

この4回の記事で、簡単なアプリを作るための要素は詰めることができたと思います。

アプリの要件によっては、
**「複数人で使用したいんだけど、他の人には登録データを参照させたくない」**
**「自分が登録したデータを、上司が一部項目だけを変更できるようにしたい」**
**「Googleカレンダーと連携させたい」**
など色々な要件があるとおもいます。

**こういったことも、調べるとできます!!**

**皆さんもAppSheetを是非使ってみてください！！**