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

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


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

登録したお酒の一覧は表示することができましたが、
「カテゴリ別で表示できた方がいいなー、よし、機能追加だ！」というところから始まります。


##データソースを追加するよ
前回の記事では、「商品」情報のみ参照するようにしていました。

ここで、新たに「種別」という情報を追加してみましょう。
この「種別」をもとにして、カテゴリー分けをできるようにしていきます。

早速、スプレッドシートを開き、以下の画像の通り「種別」タブを追加します。
あわせて、「種別ID」と「種別」という列を追加します。
<img width="570" alt="スクリーンショット 2020-04-15 13.59.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/fee2820b-9bf3-2ec4-bed7-99b55908e536.png">

ついでに、種別情報を登録しましょう。
こんな感じで、日本酒やウイスキーなどのカテゴリーとなる情報を追加していきます。
<img width="427" alt="スクリーンショット 2020-04-15 13.59.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/92168301-b770-6138-8ac0-eeee1904c314.png">


「商品」情報と「種別」情報をリンクさせるために、「商品」情報に「種別ID」列を追加します。
追加した「種別ID」に、対応する種別ID情報を追記していきます。
<img width="1106" alt="スクリーンショット 2020-04-15 14.21.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/9831eaef-bac3-a8ca-45dd-e71b73493190.png">


それでは、シミュレータから画面を確認してみましょう。
<img width="389" alt="スクリーンショット 2020-04-15 14.21.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/980a5747-60e9-4d36-a393-f10720afef35.png">
Oops。。。
エラーですか。。

慣れない英語のエラーメッセージを確認してみると、
「商品情報は5列だと思ってたけど、実際は6列あるんだけど。。」と言っています。
<img width="389" alt="スクリーンショット 2020-04-15 14.21.51のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/2f737a36-4931-4678-6c63-e4481012fb03.png">
確かに、「商品」情報には「種別ID」を追加しましたね。
そのため、スプレッドシート側では、もともと5列だった項目が6列になっています。
言っていることはその通りなんですが、じゃあ、どうしたらいいんでしょう。。

###アプリにデータ定義の変更を通知するよ
心配しなくて大丈夫です。
簡単に対応できます。
AppSheetのダッシュボードから、「Data」>「Columns」>「商品」から「Regenerate Structure」ボタンをクリックします。
<img width="1918" alt="スクリーンショット 2020-04-15 14.22.18のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/e5d1ae5a-b532-a703-87de-20fe383da011.png">
「Are you sure?」ボタンをクリックして、設定を反映します。
<img width="1336" alt="スクリーンショット 2020-04-15 14.22.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/a06594eb-fb2a-2a6c-892c-372a83b2a8bc.png">

「商品」情報に「種別ID」が追加されたことが確認できます。
そして、アプリもエラー表示が消えました！
<img width="1920" alt="スクリーンショット 2020-04-15 14.22.42のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/8d30e308-b029-ba53-aad7-2a3f5af75714.png">

###種別情報のデータを作成するよ
「Data」部分には「商品」情報しか表示されていないと思います。
スプレッドシートに「種別」タブを作成しただけでは、アプリに反映されません。
ということで、「種別」情報をアプリに認識させます。
「Data」>「Tables」から、「+ Add New Table」をクリックします。
<img width="1060" alt="スクリーンショット 2020-04-15 14.22.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/abd05b90-22bf-e6ee-22d5-afa1dcccff62.png">

何のデータを追加するか聞かれるので、以下を選択します。
**Souce Id**：スプレッドシート名（今回は「LiquorListTest」）
**Worksheet Name/Qualifier**：スプレッドシートのシート名（今回は「種別」）
**Are updates allowed?**：アプリからデータを「追加」「更新」「削除」が可能か、もしくは「読み取り専用」から選択。
（今回は「追加」「更新」「削除」可能）

問題なければ「Add New Table」ボタンをクリックします。
<img width="1385" alt="スクリーンショット 2020-04-15 14.23.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/66e1efda-4526-39b8-8a25-cb22e621c146.png">

「種別」という項目が増えましたね。
これで、スプレッドシートの「種別」シートと連携を取ることができます。
<img width="1913" alt="スクリーンショット 2020-04-15 14.23.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/6dc43d4e-8bcb-16d9-2619-0c479d1ed374.png">

種別情報を閲覧するための画面も自動で作成してくれます。
<img width="390" alt="スクリーンショット 2020-04-15 14.23.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/fdd4e521-7717-6e99-4d6b-09cbf58a1497.png">

ここで、また列の型情報を変更しようと思います。
今回「商品」シートに追加した「種別ID」ですが、
これは「種別」シートの「種別ID」を参照させようと思います。
（「商品」シートが子テーブル。「種別」シートが親テーブルになる感じです）

「Data」>「Columns」から「商品」の「種別ID」のTYPEを「Ref」に変更。
続けて、「種別ID」の左の鉛筆マークをクリックします。
<img width="1513" alt="スクリーンショット 2020-04-15 18.55.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/c4bcb382-cf15-48b7-5b83-689e608ce790.png">

この「商品」情報の「種別ID」が、どの項目を参照するのかを設定します。
初期値は自分のテーブル「商品」になっていますが、
ここでは「種別」情報にリンクさせたいので、
<img width="824" alt="スクリーンショット 2020-04-15 14.24.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/6c2ae991-1387-5564-89e4-d37c8a31c5d9.png">
Source Tablesを「種別」に設定します。
厳密には「種別」の「種別ID」とリンクさせたいのですが、項目レベルでの設定はできないようです。
どの項目にリンクさせるかは、アプリが自動で判断するような感じです。

<img width="819" alt="スクリーンショット 2020-04-15 14.25.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/404139b1-c08d-96da-347b-b6f55a6db72a.png">

「Data」>「Columns」から「種別」を確認すると、最初は3つの列情報のみ記載されていました。
スプレッドシートには3列しか設定していないので、当然ですね。
<img width="1306" alt="スクリーンショット 2020-04-15 14.26.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/73b5a68d-dde8-80dc-87d1-295d60826ec0.png">

しかし、「商品」の「種別ID」のTYPEをRefに変更したところ、「種別」情報には新しい列が追加されました。
この項目はなんでしょうか。
画面から表示を確認できるので、見ていきましょう。
<img width="1316" alt="スクリーンショット 2020-04-15 14.26.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/5026c14f-e91d-d9c4-847d-0acaa9e9c5ed.png">

「種別」ビューから、任意の項目をクリックします。
<img width="377" alt="スクリーンショット 2020-04-15 14.26.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/40549744-768f-681b-6337-1a2c6666cf8f.png">

「Related 商品s」という項目が追加されていますね。
どうやら、種別IDにリンクした情報がリスト表示されるようです。
（日本酒を選択したので、種別IDが「10（日本酒）」の情報がリスト表示される。）

<img width="381" alt="スクリーンショット 2020-04-15 14.27.07のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/6f389bf0-4df3-c527-f4cb-51fc44a39f17.png">

このリストの項目から、各商品の詳細情報に遷移することもできます。
使い方によっては便利な機能かもしれません。

<img width="379" alt="スクリーンショット 2020-04-15 14.27.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/20bb9de4-1c50-f2f0-05f2-c09868c019a3.png">

一応、お酒のカテゴリごとに辿っていって、詳細情報まで表示できるようになりました。
思ったよりもキャプチャの量が多くなって、ページが重くなってしまいそうなので、いったんここで区切ります。

##列タイプ「Ref」の補足
結局Refって、「Related 商品s」みたいな関連情報を表示するだけなの?と思われたかもしれません。
これはRefでできる一つのことで、他にも設定するメリットはあります。

例えば、アプリから情報を登録したい時に便利です。
実際に見ていきましょう。
画面から「+」ボタンを押して、データ登録画面に遷移します。
<img width="380" alt="スクリーンショット 2020-04-16 11.20.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/ee7d107d-4f7d-9c3e-3738-fbf3bb0b1047.png">

登録の入力画面に遷移しましたね。
ここで、タイプにRefを設定している「種別ID」をクリックします。
<img width="379" alt="スクリーンショット 2020-04-16 11.20.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/45172d21-35a5-0247-f45a-9b23f074d9b6.png">

種別IDが選択式になり、該当しない種別IDは設定できないようになります。
このようにすることで、ユーザが誤った値を入力しないように制限してやることができます。
<img width="318" alt="スクリーンショット 2020-04-16 11.21.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/291303f0-376b-234f-ab2b-2a43a992e93d.png">

ただ、これではどの値を選択すればいいのかわからないですね、
仮に「ブランデー」を登録したいと思っても、どの値を登録すればいいのかわかりません。

そういった問題も、ちょっと設定してやるだけで解決します。
「Data」>「Columns」から「種別」情報の「種別」項目の「LABEL?」にチェックを入れます。
こうするだけで、
<img width="1516" alt="スクリーンショット 2020-04-16 11.22.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/068e4eb4-1cc9-5340-0d8b-175b3730ba37.png">

種別選択画面に、種別名を表示することができます。
これで、ユーザもどれを選択すればいいかわかるので、思わずニッコリですね！
<img width="371" alt="スクリーンショット 2020-04-16 11.22.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/feb82e5f-ab7f-8481-b346-05b8453cea42.png">


##まとめ
今回の設定で以下のことができるようになりました。
・データソースの追加方法
・スプレッドシートのデータ定義を増減させた際の対応
・列タイプ「Ref」についての確認


###次回予告
今回でも、カテゴリごとに辿っていって、詳細情報まで表示できるようになりました。
ただ、個人的には日本酒を選択した時に、日本酒の一覧をすぐに表示してくれたらいいと思うのです。
「種別ID」とか「Related 商品s」という表示は野暮ったいと感じました。

こうした気になる点を次回、修正していきます！

カタログアプリを作るだけなのに、全何回になるのか。乞うご期待！
[次回の記事はこちら（Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の参）](https://qiita.com/kazu_tekuru/items/194379f85a1c1a6b4379)