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

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


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

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

###今回の記事でできること
今回の記事を学ぶと、以下のことができるようになります。
・Slice（条件を絞ったデータ表示）の追加方法
・Sliceを表示するための画面作成

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


###Sliceの設定
前回の記事では、お酒のカテゴリごとに辿っていって、詳細情報まで表示できるようになりました。
でも、「日本酒」カテゴリを選択したら、素直に日本酒の一覧を出してくれたらいんですよね。
今は、関連情報みたいな感じで表示されます。

普通のアプリであれば、日本酒（種別IID=10）をクリックされたら、
SQLのSELECT文なんかで、「select * from 商品 where 種別ID=10」みたいにして、
日本酒情報を引っ張ってくると思います。

残念なことに僕が試したところ、AppSheetではこのような取得方法はどうやらできなさそうな様子です。
（もしもできるのなら、どなたか教えていただけると嬉しいです）

さて、ここでSliceという機能を利用します。
これは、表示するデータを制限して表示することができる機能です。
これを利用して、日本酒（種別IID=10）だけの表示などをすることが可能となります。
Oracleなどのデータベースで言う所のVIEWの機能ですね。


それでは「Data」>「Slices」>「+ Add New Slice」をクリックします。
<img width="1520" alt="スクリーンショット 2020-04-15 14.27.58のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/3ef40cd2-43a4-1750-3573-09ae4d04f77c.png">

続いて、「Row filter condition」をクリックします。
これが、どのような条件でデータを切り出すかという設定を行う場所です。
Sliceという機能のかなめとなる設定です。
<img width="1519" alt="スクリーンショット 2020-04-15 14.28.05のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/0d4014cc-0a5b-79be-2e48-e46a3eb1fbc6.png">


「[種別ID]="10"」と入力し、「Save」ボタンをクリックします。
<img width="835" alt="スクリーンショット 2020-04-15 14.28.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/f655fdfb-5ba8-1647-0fcd-469b116d1983.png">

その他にも設定を加えていきましょう。
**Slice Name**：表示したい名前（今回は「日本酒」と設定）
**Source Table**：どのテーブルを元にするのかを設定します（今回は「商品」）
**Row filter condition**：先ほど設定した条件の設定
**Slice Columns**：表示するデータ列を設定。
　　　　　　　　　「All Columns」：全ての項目を表示
　　　　　　　　　「Custom Columns」：表示したい項目を設定可能。
　　　　　　　　　ゴミ箱ボタンを押すと、非表示にできます。
　　　　　　　　　今回は「種別ID」のみ表示不要にしています。
**Update mode**：「更新」「追加」「削除」「読み取り専用」を選択。（今回は「読み取り専用」に設定）

<img width="1318" alt="スクリーンショット 2020-04-15 14.29.32のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/dce47303-d1c5-ced1-9213-b845777cdc26.png">

###Sliceを表示するための画面の設定
Tableを設定した場合は、自動で画面を作成してくれますが、
Sliceを設定した場合は、画面は自動生成されません。
そのため、自分で画面の設定を行う必要があります。

「UX」>「Views」から「+ Add New View」をクリックします。
<img width="1512" alt="スクリーンショット 2020-04-16 12.22.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/2a169209-f745-2de1-10b5-b5b60511886a.png">


**View Name**：画面の名前を設定（今回は「日本酒」）
**For this data**：画面に表示するデータを設定（今回は「日本酒(slice)」）
**Position**：遷移ボタンをどこに配置するか。
Positionについて、以下の画面では「left」に設定しています。
画面右のシミュレータでは、3つあるボタンのうち、一番左に「日本酒」ボタンが表示されていることがわかります。

<img width="1916" alt="スクリーンショット 2020-04-15 14.30.12のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/b4b4767b-87c1-fe42-3286-e51082f04c34.png">

日本酒ボタンは表示不要なので、いったん「menu」に設定しておきます。
<img width="1920" alt="スクリーンショット 2020-04-15 14.30.23のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/d6ca32a5-0401-3772-69ce-1eeddefc8d7f.png">

ちなみにPositionを「menu」に設定するとどうなるかというと。。
シミュレータ画面の左上にメニューっぽいボタンがあります。
これをクリックすると、
<img width="381" alt="スクリーンショット 2020-04-15 14.30.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/7e19e29e-fb15-26ca-8031-8a94af6b6ce9.png">

メニュー画面が表示され、ここに「日本酒」画面への遷移ボタンが移動しています。
<img width="297" alt="スクリーンショット 2020-04-15 14.30.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/1c5f0996-4375-3224-01cf-9820348b9bf2.png">

<img width="1913" alt="スクリーンショット 2020-04-15 14.32.14のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/5558bd3a-a1f3-2b49-3b66-419a1510f83a.png">

前回の記事で、「商品」Viewにも設定したように、見た目のオプションを設定していきます。
それぞれ、以下の値を設定します。
**Main image**：「画像」
**Primary header**：「商品名」
**Secondary header**：「none」
**Show action bar**：OFF（追加のボタンを非表示にする）

これで、見た目はすっきりしました。

<img width="382" alt="スクリーンショット 2020-04-15 14.33.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/b2283af7-46b5-f833-a825-8f30c23e357a.png">

お酒情報をクリックすると、詳細情報も表示できます。
<img width="379" alt="スクリーンショット 2020-04-15 14.33.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/142ca0d6-9dfd-7f4f-f37a-77f2664628f2.png">

では、この日本酒Sliceと同様の手順で、各お酒のカテゴリーも作ってください。
**焼酎（種別ID=11）**
**ウイスキー（種別ID=12）**
**ワイン（種別ID=13）**
**ブランデー（種別ID=14）**
**リキュール（種別ID=15）**


各お酒のカテゴリーのSliceを作成できたら、
ついでに、「種別」Viewにも同様の設定を入れます。
**Primary header**：「種別」
**Secondary header**：「none」
<img width="1910" alt="スクリーンショット 2020-04-15 14.43.45のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/c011a94d-70e1-7abe-8755-450a6e74bf6d.png">

さてこれで、なんとなく画面ができていきました。
種別Viewでは、カテゴリーが選択できるようになっています。
このカテゴリーを選択したら、
<img width="382" alt="スクリーンショット 2020-04-15 14.44.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/2f4701d1-42a5-ebf5-45fb-797b0bc5afe1.png">

こんな風に遷移すると**理想**ですよね。
（これは日本酒sliceの画面）
<img width="380" alt="スクリーンショット 2020-04-15 14.44.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/190cac94-be2c-d6d2-5e88-f147432479d9.png">

でも**現実**はこんな画面に遷移してしまいます。
<img width="379" alt="スクリーンショット 2020-04-15 14.44.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167745/8b0d1ff5-fd7d-14cb-81f7-047f901f7a93.png">
悪くはないですが、なんだかいけてない気がします。

さて、それでは、次回、上記のような理想の画面遷移ができるように、設定していきましょう。

##まとめ
今回の設定で以下のことができるようになりました。
・Slice（条件を絞ったデータ表示）の追加方法
・Sliceを表示するための画面作成


###次回予告
理想の画面遷移ができるように、設定を加えていきます。
いよいよ、アプリの作成も大詰めです。
[次回の記事はこちら（Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の四（最後））](https://qiita.com/kazu_tekuru/items/98775f94960d3fd26876)