18
15

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という機能を使って、綺麗な表示もでいるようになりました。
「でも、まだまだ画面遷移が野暮ったいぞ! 修正じゃい!」というところから始まります。

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

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

##画面遷移の変更
まず、画面遷移をコントロールするために、スプレッドシートに以下のように列を追加します。
「LiquorDataTest」スプレッドシートの「種別」シートの、
C列に、「app」という列が追加されていることがわかると思います。
スクリーンショット 2020-04-15 14.45.39.png

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

APPデータ型について

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

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

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

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

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

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

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

続けて、追加された「app」項目の型を「App」に変更します。
スクリーンショット 2020-04-15 14.46.44のコピー.png

###APP型の動作確認
ここで、設定した「APP」型がどのように動作するのか、確認してみましょう。
「種別」ビューから、日本酒をクリックしてみます。
スクリーンショット 2020-04-15 14.49.10.png

「種別」の詳細画面に、app列が表示されるようになりました。
実はこの項目をクリックすることができます。
クリックしてみると、、、
スクリーンショット 2020-04-15 14.49.16のコピー.png

無事、「日本酒」ビューへ遷移できました。
スクリーンショット 2020-04-15 14.49.24.png

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


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

ここからあと少しです。
「UX」>「Views」から、「種別」ビューを確認します。
スクリーンショット 2020-04-15 14.49.48のコピー.png

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

その勢いで、以下の項目を変更します。
Row Selected:Go to App Link(app)
この項目を設定すると、「行を選択した場合に、appリンクが実行される」という挙動になります。
スクリーンショット 2020-04-15 14.50.09のコピー.png

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

###動作確認
動作確認していきます!

日本酒の項目をクリックするとー。。。
スクリーンショット 2020-04-15 14.50.18.png

日本酒ビューに線伊勢dきたーーーー
(取り乱しました)
日本酒ビューに遷移できたーー!!

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

ここから詳細画面へも遷移できます!
スクリーンショット 2020-04-15 14.50.54.png

これで、理想にしていた画面遷移ができるようになりました!
スクリーンショット 2020-04-15 14.51.43.png

##最後の微調整
現在はデータを自由に操作できる設定にしています。
もしも複数人で共有するような場合は、勝手に削除/更新/追加できないようにしたいとします。
スクリーンショット 2020-04-15 14.51.56のコピー.png

「UX」>「Views」から「商品」ビューを開いて、
Show actionn bar項目のチェックを外します。
これで、画面内のゴミ箱ボタンなどは表示されなくなりました。
スクリーンショット 2020-04-15 14.52.04のコピー.png

でも、画面内に、まだ「+」ボタンがありますね。
これを消すには、「商品」テーブルへの編集権限を「読み取り専用」にするしかなさそうです。
スクリーンショット 2020-04-15 14.52.04のコピー.png

最初からここまで通して読んできてくれた酔狂な方はわかるかもしれません。
[Data]>[Tables]から「商品」テーブルの以下
**Are updates allowed?**項目を「Read Only」に変更します。
スクリーンショット 2020-04-17 18.16.15.png

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

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

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

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

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

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

18
15
1

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
18
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?