とあるエンジニアの作業ブログ

GCP クラウド ノーコード 作業効率化

AppSheet逆引きリファレンス ~カードデザインっぽいホーム画面をつくる~

投稿日:2020年10月20日 更新日:

まだまだ事例の少ないAppSheet。
逆引きリファレンス的にノウハウをメモ。

AppSheetをいじり出すと、社内の業務効率化ツールだとわかっていても無駄にアプリっぽくしたくなるというもの。

ということでホーム画面を作ります。

いくつかバリエーションは考えられますが、今回はカードデザインっぽいホーム画面でそこから各 View に遷移するようなイメージにします。

他にもAppSheetの逆引きリファレンスを投稿してますのでよかったらご覧ください。
AppSheetの逆引きリファレンス

完成系のイメージ

Output Image

こんな感じでログインしたらカードデザインのホーム画面が表示されて、サムネイルをタップすると各 View に遷移するという風にしようかと。
またデフォルトだと下部に表示されているメニューも消せたらなーという感じ。

テーブル構成

別記事で作った company と deal の2種類の View を用意しようと思います。

ホーム画面
thumnail title deep_link
会社マスタ
company_code company_name
1000 株式会社サンプルワン
2000 Sample 2, ltd
商談テーブル
deal_id deal_name company_code company_name amount
deal_01 サンプル取引_01 1000 株式会社サンプルワン 1,000,000
deal_02 サンプル取引_02 2000 Sample 2, ltd 2,000,000

遷移先の View を作る

まずは Data で company と deal を取り込み、それに対応した UX を作ります。
View name はそれぞれ「company_v」と「deal_v」とします。

で、UX の Views タブを見てもらうと Position のデフォルトが「right」とか「center」になっており、エミュレーターの下部にメニューが表示されてると思いますので、Position を「ref」に変更します。

view ref

これでメニューが消えました。

DeepLink で各 View に遷移させる

続いてホーム画面の作成とホーム画面のカードから各 View に遷移させます。

まずは Data の Columns タブで、ホームのカラムの Type を正しく設定します。
thumnail は Image Type 、deep_link は App Type にします。
home_card Columns

ちょっとだけ解説すると、thumnail は画像表示したいので Image Type です。
で、App Type は Deep Link 専用のTypeで、このカラムには所定のフォーマット(記載ルール)で Deep Link の遷移先を設定することになります。

次にホーム画面を作ります。
home_card UX

今回は View Type を「gallery」にして、 Position を「menu」にしました。
こうすることでカードデザインっぽい感じのデザインになりかつ下部のメニューからも消えます。
一応ホーム画面にアクセス不可になるのは怖いので、ハンバーガーメニューからはアクセスできるようにしました。
この辺は好みで。

また、デフォルトだと「+」で編集できる状態だと思うので Data の Tables タブからホームテーブルを Read-Only にします。
home_card Read-Only

最後に Deep Link の設定です。
やり方はいくつかあるようですが、テーブル自体を Read-Only にしてますので AppSheet から登録はせずスプレッドシートに直接データをぶち込みます。

ホーム画面
thumnail title deep_link
画像ファイルのURL かいしゃ一覧 #control=company_v
画像ファイルのURL とりひき一覧 #control=deal_v

パッと見でキモがどこかわかると思いますが、deep_link カラムに設定された値( #control=hogehoge )が上で書いた App Type 所定のフォーマットの Deep Link の遷移先設定です。

詳細はAppSheetの公式を見てほしいですが、超かいつまんで説明すると、

LINKTOVIEW("VIEW名称")と関数使うのが一番簡単だよ。だけど#記号の後にオプションのリンクパラメータを指定することでも Deep Link 設定できるよ。例えば "#control=VIEW名称" と書くと特定 VIEW に遷移するよ。

とのことです。

これで設定は完了。エミュレートすると、
home_card Demo

できました。
ちなみにログイン直後のスタートページをホームにしたいときは、 UX メニューの Options タブの Starting view です。

ということでではでは。

2020/11/30 追記
VIEW TYPE で CARD を選択した時、デフォルトだと Detail 画面に遷移してしまい deep_link で設定した VIEW に飛んでくれず、そこそこ悩んだので対策メモ。

これだった。
Card Design deep_link Config

-GCP, クラウド, ノーコード, 作業効率化
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

AppSheet逆引きリファレンス ~VLOOKUP~

前回サボってしまって書ききれなかった記事の続き。 まだまだ事例の少ないAppSheet。 逆引きリファレンス的ノウハウとして前回はExcelで言うところの「データの入力規則」、すなわちリストデータを保 …

kintoneで予算管理アプリを作るまで 〜アプリ実装編〜

仕事でkintoneを使って予算管理を行えないか!?的な話に巻き込まれた。 kintoneなんて使ったこともないし、今後も使うつもりはないが、一応フィジビリティしたのでメモ。 ユーザ・権限管理とアプリ …

AppSheet逆引きリファレンス ~URL指定で画像を表示させる~

まだまだ事例の少ないAppSheet。 逆引きリファレンス的にノウハウをメモ。 Web上に画像のURLを指定してサムネイル画像などを表示する方法。 AppSheetの Image Type を使えば …

【備忘】EC2に新規のキーペアで接続する

EC2に新規のキーペアで接続したとき時のメモ。 AWSコンソール:左側のナビゲーションペインの「ネットワーク & セキュリティ」の「キーペア」から新規キーペアを作成 クライアントPC:新規キ …

Google Apps ScriptでG DriveのExcelをスプレッドシートに変換

GASでG Driveに保存されているExcelをGoogle スプレッドシートに一括変換する仕組みを作った。 目次 実現したいこと ソースコードと解説 実現したいこと G Driveに保存されている …