25
28

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-16

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

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

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

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

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

早速、スプレッドシートを開き、以下の画像の通り「種別」タブを追加します。
あわせて、「種別ID」と「種別」という列を追加します。
スクリーンショット 2020-04-15 13.59.16.png

ついでに、種別情報を登録しましょう。
こんな感じで、日本酒やウイスキーなどのカテゴリーとなる情報を追加していきます。
スクリーンショット 2020-04-15 13.59.58.png

「商品」情報と「種別」情報をリンクさせるために、「商品」情報に「種別ID」列を追加します。
追加した「種別ID」に、対応する種別ID情報を追記していきます。
スクリーンショット 2020-04-15 14.21.08.png

それでは、シミュレータから画面を確認してみましょう。
スクリーンショット 2020-04-15 14.21.51.png
Oops。。。
エラーですか。。

慣れない英語のエラーメッセージを確認してみると、
「商品情報は5列だと思ってたけど、実際は6列あるんだけど。。」と言っています。
スクリーンショット 2020-04-15 14.21.51のコピー.png
確かに、「商品」情報には「種別ID」を追加しましたね。
そのため、スプレッドシート側では、もともと5列だった項目が6列になっています。
言っていることはその通りなんですが、じゃあ、どうしたらいいんでしょう。。

###アプリにデータ定義の変更を通知するよ
心配しなくて大丈夫です。
簡単に対応できます。
AppSheetのダッシュボードから、「Data」>「Columns」>「商品」から「Regenerate Structure」ボタンをクリックします。
スクリーンショット 2020-04-15 14.22.18のコピー.png
「Are you sure?」ボタンをクリックして、設定を反映します。
スクリーンショット 2020-04-15 14.22.30.png

「商品」情報に「種別ID」が追加されたことが確認できます。
そして、アプリもエラー表示が消えました!
スクリーンショット 2020-04-15 14.22.42のコピー.png

###種別情報のデータを作成するよ
「Data」部分には「商品」情報しか表示されていないと思います。
スプレッドシートに「種別」タブを作成しただけでは、アプリに反映されません。
ということで、「種別」情報をアプリに認識させます。
「Data」>「Tables」から、「+ Add New Table」をクリックします。
スクリーンショット 2020-04-15 14.22.59.png

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

問題なければ「Add New Table」ボタンをクリックします。
スクリーンショット 2020-04-15 14.23.30.png

「種別」という項目が増えましたね。
これで、スプレッドシートの「種別」シートと連携を取ることができます。
スクリーンショット 2020-04-15 14.23.45.png

種別情報を閲覧するための画面も自動で作成してくれます。
スクリーンショット 2020-04-15 14.23.53.png

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

「Data」>「Columns」から「商品」の「種別ID」のTYPEを「Ref」に変更。
続けて、「種別ID」の左の鉛筆マークをクリックします。
スクリーンショット 2020-04-15 18.55.44.png

この「商品」情報の「種別ID」が、どの項目を参照するのかを設定します。
初期値は自分のテーブル「商品」になっていますが、
ここでは「種別」情報にリンクさせたいので、
スクリーンショット 2020-04-15 14.24.43.png
Source Tablesを「種別」に設定します。
厳密には「種別」の「種別ID」とリンクさせたいのですが、項目レベルでの設定はできないようです。
どの項目にリンクさせるかは、アプリが自動で判断するような感じです。

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

「Data」>「Columns」から「種別」を確認すると、最初は3つの列情報のみ記載されていました。
スプレッドシートには3列しか設定していないので、当然ですね。
スクリーンショット 2020-04-15 14.26.28.png

しかし、「商品」の「種別ID」のTYPEをRefに変更したところ、「種別」情報には新しい列が追加されました。
この項目はなんでしょうか。
画面から表示を確認できるので、見ていきましょう。
スクリーンショット 2020-04-15 14.26.34.png

「種別」ビューから、任意の項目をクリックします。
スクリーンショット 2020-04-15 14.26.59.png

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

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

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

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

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

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

例えば、アプリから情報を登録したい時に便利です。
実際に見ていきましょう。
画面から「+」ボタンを押して、データ登録画面に遷移します。
スクリーンショット 2020-04-16 11.20.49.png

登録の入力画面に遷移しましたね。
ここで、タイプにRefを設定している「種別ID」をクリックします。
スクリーンショット 2020-04-16 11.20.58.png

種別IDが選択式になり、該当しない種別IDは設定できないようになります。
このようにすることで、ユーザが誤った値を入力しないように制限してやることができます。
スクリーンショット 2020-04-16 11.21.20.png

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

そういった問題も、ちょっと設定してやるだけで解決します。
「Data」>「Columns」から「種別」情報の「種別」項目の「LABEL?」にチェックを入れます。
こうするだけで、
スクリーンショット 2020-04-16 11.22.49.png

種別選択画面に、種別名を表示することができます。
これで、ユーザもどれを選択すればいいかわかるので、思わずニッコリですね!
スクリーンショット 2020-04-16 11.22.55.png

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

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

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

カタログアプリを作るだけなのに、全何回になるのか。乞うご期待!
次回の記事はこちら(Googleの新サービス「AppSheet」でお酒のカタログアプリを作ってみたよ_其の参)

25
28
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
25
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?