はじめに
こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。
今回は「詳細画面」とも呼ばれる、AppSheet における開発の基本機能の一つである Detail （ディテール）という View についてご説明いたします。
アプリユーザーからの「見え方」も意識して Detail ビューのメリットを活用していきましょう。
その他、 AppSheet の基本的な使い方等についてお知りになりたい場合は、以下の記事もご覧ください。
▶吉積情報 AppSheet コラム一覧◀
Detail ビューとセットで確認！Form ビューについて知りたいという方は こちら
Detail ビューとは？
基本的に Form 入力後の「確認画面」、各データ行ごとの「詳細画面」という認識が一般的かと思います。
開発画面の Views メニューから設定することのできる画面で、「SYSTEM GENERATED」の一つです。
Detail ビューを利用する多くの場合は、Views の下方にあるこの「SYSTEM GENERATED」に表示される"自動生成されるビュー"を利用することになるかと思います。
Detail ビューのユースケース（使い方）
上記のとおり AppSheet 機能の中では入力したデータの確認、データの詳細画面的な役割を担っています。
また、それだけではなく画面を見やすく、必要な情報にすぐにアクセスできるよう表示するデータ項目の取捨選択・表示順入れ替えをできる機能「Column order」も備えています。
Column order のカスタマイズ
詳細データ・関連データの表示
単なるデータの詳細画面としてだけでなく、個々のデータに紐づいた別テーブルのデータなども参照することができます。
あるメインビュー（≒ Table ）のうちの一つの Detail ビュー（詳細データ）に紐づく「メモ」や「担当者」などのデータを別 Table で用意して連携させる形で関連データを表示することもできます。
例えば、以下のようにそれぞれのデータから、それに紐づく画面へ遷移することが可能です。
- サンプルビューの Detail ビュー→メモ一覧（Inline）、担当者の Detail ビュー
- 担当者ビューの Detail ビュー →部署の Detail ビュー
- 部署ビューの Detail ビュー →担当者一覧（Inline）
シームレスなユーザー体験を設計する
Detail ビューでは、Action 機能を用いてボタンを設置することができます。
ボタンを押すだけで別のビューに遷移したり、あらかじめ設定した特定の Column に値を入力したりすることもできます。
また、「ステータス」などの随時変更する可能性の高い Column は、編集画面（ Form ）へ遷移することなく「Quick edit columns」機能を用いて Detail ビュー画面上で編集することも可能です。
このように、シームレスな設計でユーザーの負担を軽減することもできるでしょう。
画面の表示項目を制御する
AppSheet ではテーブルの列項目が画面に表示されますが、条件に応じてアプリ上に表示する項目を制御することができます。
ここでは参考程度に触れますが、Setting やメイン View 、Column などでも制御することが可能です。
ユーザーの権限に応じて、または見やすくするためにユーザーの目的に応じて「表示させたくない」カラムを非表示にするなど、表示内容を制御することができます。
どの機能を使って制御をするかの判断は、データの特性・用途などによります。
Detail ビューでの画面制御は必要情報の取捨選択、表示データの優先順位づけなどを目的とした場合、つまり「表示データの範囲」を制御したい場合の、特にデータの重要度に準じた場合に有用です。
Detail ビューの作り方
Form ビュー同様、基本的に Detail ビューはメインビューの作成時に「SYSTEM GENERATED」に適宜自動生成されるものです。
手動で Detail ビューを作成することも可能ですが、発展的な内容となるので別の記事で紹介いたします。
自動生成された Detail ビューはデフォルトで表示 Column などが全て表示されていたりなどしますので、「Column order」でカラムの表示順や「Display name」での詳細画面名設定など、忘れずにカスタマイズしておくとさらにユーザビリティが向上します。
Detail ビューの基本的なカスタマイズ
ここまででご紹介した内容の振り返りも踏まえて、Detail ビューカスタマイズのポイントをまとめました。
必ずチェックしてほしい箇所
▶ Display name
設定箇所：Detail ビュー ＞ Display ＞ Display name
ユーザーが一番目にするポイントです。
「今自分は何の画面を見ているのか？」がわかりやすいよう、混乱を招かないことを意識してビュー名を設定しましょう。
基本的に Detail ビューは「SYSTEM GENERATED」で自動生成されたものを利用することが多く、その場合はビュー名自体は変更できません。
そのため、ビュー名とは別に名称設定したい場合は、「Display name」に任意の名前を入力し、表示名を設定します。
入力枠右のフラスコマーク（Formula）から、Column 名などを取得して Display name に設定することも可能です。
▶ Column order
設定箇所：Detail ビュー ＞ View Options ＞ Column order
ここでの Column order は、Detail（詳細画面）に表示するデータ項目の制御です。
Column そのものに制御設定を施すことも可能ですが、Column そのものに設定する場合は全ての View に存在する当該 Column に共通して設定が適用されるので注意しましょう。
（つまり、どのビューでも当該カラムが非表示になる）
Detail ビューでの制御では、単純に「この画面で見る必要のあるデータのみに絞ってカラムを表示したい」場合に適応します。
もっと使いやすく
▶ Header columns
設定箇所：Detail ビュー ＞ View Options ＞ Header columns
選択した Column が、見出しのように強調されます。
個々の Column は Views メニューと同じモバイルアイコンから選択できる「Format rules」でも文字の色や大きさを設定することもできます。
ただそれだとメンテナンスの時に大変、そもそもルール（If this condition is true）を数式で書かなくてはいけないので、難しく感じるかと思います。
そのため、簡単に重要なカラムを強調できるこの機能を覚えておいて損はないでしょう。
▶ Quick edit columns
設定箇所：Detail ビュー ＞ View Options ＞ Quick edit columns
編集（Edit）ボタンを押して Form ビューを表示する、なんてことをわざわざしなくてもカラムデータを編集できる機能です。
ステータスなどの更新頻度の高いカラムを指定しておくと大変便利です。
おわりに
Detail ビューは意外と奥が深く、工夫をして実装をすればユーザーもどんどん使いやすくなりシンプルに業務効率が上がります。
発展的な内容も別の記事でご紹介予定なので、ぜひご覧になってください。
以上、Detail ビューの説明・解説でした。
それでは、また次回の記事でお会いしましょう。
吉積情報(株)では今回のような AppSheet の基本的な使い方や、既に活用が進んで応用的な使い方まで、貴社のご要望に合わせて幅広くトレーニングやサポートサービスを提供しております。
AppSheet や Google Workspace に関する疑問点・不明点を直接エンジニアに質問できる活用サービス他、AppSheet の活用の幅が広がる無料Webセミナー、AppSheet 受託開発なども承っております。
弊社Webサイトよりお気軽にお問い合わせくださいませ。
サンプルアプリのご案内
今回ご紹介したアプリのサンプルはこちら
AppSheet についての詳しい記事・ご相談などはこちら ※いただいたコメントは全て拝見させていただきますが、全てのご質問にはお答えできないことがございますので、あらかじめご了承くださいませ。
Discussion