10
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-17

##はじめに
今回の記事は、前回の記事(Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の弐)の続きです。

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」をクリックします。
スクリーンショット 2020-04-15 14.27.58のコピー.png

続いて、「Row filter condition」をクリックします。
これが、どのような条件でデータを切り出すかという設定を行う場所です。
Sliceという機能のかなめとなる設定です。
スクリーンショット 2020-04-15 14.28.05のコピー.png

「[種別ID]="10"」と入力し、「Save」ボタンをクリックします。
スクリーンショット 2020-04-15 14.28.41.png

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

スクリーンショット 2020-04-15 14.29.32のコピー.png

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

「UX」>「Views」から「+ Add New View」をクリックします。
スクリーンショット 2020-04-16 12.22.19.png

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

スクリーンショット 2020-04-15 14.30.12のコピー.png

日本酒ボタンは表示不要なので、いったん「menu」に設定しておきます。
スクリーンショット 2020-04-15 14.30.23のコピー.png

ちなみにPositionを「menu」に設定するとどうなるかというと。。
シミュレータ画面の左上にメニューっぽいボタンがあります。
これをクリックすると、
スクリーンショット 2020-04-15 14.30.34.png

メニュー画面が表示され、ここに「日本酒」画面への遷移ボタンが移動しています。
スクリーンショット 2020-04-15 14.30.42.png

スクリーンショット 2020-04-15 14.32.14のコピー.png

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

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

スクリーンショット 2020-04-15 14.33.14.png

お酒情報をクリックすると、詳細情報も表示できます。
スクリーンショット 2020-04-15 14.33.20.png

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

各お酒のカテゴリーのSliceを作成できたら、
ついでに、「種別」Viewにも同様の設定を入れます。
Primary header:「種別」
Secondary header:「none」
スクリーンショット 2020-04-15 14.43.45のコピー.png

さてこれで、なんとなく画面ができていきました。
種別Viewでは、カテゴリーが選択できるようになっています。
このカテゴリーを選択したら、
スクリーンショット 2020-04-15 14.44.04.png

こんな風に遷移すると理想ですよね。
(これは日本酒sliceの画面)
スクリーンショット 2020-04-15 14.44.20.png

でも現実はこんな画面に遷移してしまいます。
スクリーンショット 2020-04-15 14.44.42.png
悪くはないですが、なんだかいけてない気がします。

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

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

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

10
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?