【第4回】AppSheet View入門：基本の使い方と主要6タイプを徹底解説！

これまでの連載で、AppSheetのテーブル作成、Ref型によるデータ連携、そしてデータベース設計の基礎を学んできました。データ構造の基盤が整った今、次なるステップは、そのデータを「どのようにユーザーに見せるか」を考えることです。どれほど優れたデータ構造を持っていても、ユーザーが直感的に操作できない画面では、アプリの価値は半減してしまいます。ここで登場するのが「View」です。

私自身、AppSheetでアプリ開発を始めた頃は、自動生成されたViewをそのまま使っていました。しかし、ユーザーから「この画面、見にくいな」「もっと情報が一覧できたらいいのに」といったフィードバックをもらううちに、UI/UXの重要性を痛感しました。そして、Viewの設定を一つひとつ学び、カスタマイズしていくことで、アプリの使い勝手が劇的に向上することを実感したのです。

この連載第4回では、初級ITエンジニアの皆さんが、AppSheetにおける「View」の基本をマスターし、ユーザーにとって分かりやすく、操作しやすい画面を設計できるようになることを目的とします。Viewとは何か、その役割と主要なViewタイプの違い、そして基本的な設定方法までを、在庫管理アプリを例に実践的に解説します。この記事を読み終える頃には、あなたはAppSheetのUI/UX設計の第一歩を踏み出し、よりプロフェッショナルなアプリ開発のスキルを身につけているはずです。さあ、Viewの世界を探求し、あなたのアプリを次のレベルへと引き上げましょう！

[目次を開く]

本記事でできるようになること第1章：Viewとは何か？ Viewの定義と役割 Viewを構成する3つの要素第2章：主要Viewタイプ6選第3章：Viewの配置場所と見え方第4章：Viewの主要な設定項目第5章：実践！在庫管理アプリのViewを作成するステップ1：在庫一覧画面 (Deck View) の作成ステップ2：在庫詳細画面 (Detail View) の調整ステップ3：在庫登録画面 (Form View) のカスタマイズ AppSheet用語表 FAQ 次回予告/CTA 関連記事

本記事でできるようになること

AppSheetにおける「View」の役割と、UI/UX設計における重要性を理解できます。
Table, Deck, Detail, Form, Gallery, Map, Dashboardといった主要なViewタイプの違いと、それぞれの主な用途を習得できます。
Primary, Menu, RefというViewの配置場所による見え方の違いを理解し、アプリの画面構成を設計できるようになります。
Viewの基本的な設定項目（データソース、表示形式、配置場所、表示条件など）を学び、Viewをカスタマイズするスキルを身につけます。
在庫管理アプリを題材に、実際にDeck View, Detail View, Form View, Map Viewを作成・設定する手順を体験し、実践的なView作成スキルを習得できます。
ユーザーにとって分かりやすく、直感的に操作できる画面を設計するための第一歩を踏み出せます。

第1章：Viewとは何か？

AppSheetにおける「View」とは、一言で言えば「テーブル（データ）をユーザーに見せるための画面」のことです。データベースにあたるテーブルの情報を、どのような形式で、どのように表示し、どのように操作させるかを定義する、UI/UX設計の核となる要素です。

Viewの定義と役割

Viewの主な役割は以下の通りです。

データの可視化: テーブルに格納されているデータを、一覧形式、カード形式、詳細形式など、目的に応じた最適な形でユーザーに提示します。
ユーザーインタラクションの提供: データの表示だけでなく、新規登録、編集、削除といった操作のインターフェースを提供します。
情報のフィルタリングと整理: 表示するデータを特定の条件で絞り込んだり（例：「未完了のタスクのみ表示」）、並べ替えたり、グループ化したりすることで、ユーザーが必要な情報に素早くアクセスできるよう支援します。
アプリの画面構成の決定: どのViewをメイン画面にするか、どのViewをメニューに配置するかなどを決定し、アプリ全体のナビゲーションを構築します。

Viewを構成する3つの要素

すべてのViewは、基本的に以下の3つの要素から構成されています。

データソース（For this data）: どのテーブル、またはどのスライス（テーブルの一部を切り出したもの）のデータを表示するかの指定。これがViewの「何を」にあたる部分です。
Viewタイプ（View type）: データをどのような形式で見せるかの選択。Table, Deck, Detailなど、豊富な選択肢が用意されています。これが「どのように」にあたる部分です。
View設定（View Options）: 表示条件、表示場所、アクションボタンの配置、並び順、表示スタイルなど、Viewの振る舞いや見た目を細かく制御するための設定群です。これにより、Viewをより使いやすく、目的に沿ったものにカスタマイズできます。

第2章：主要Viewタイプ6選

AppSheetには、様々な用途に対応できるよう、多彩なViewタイプが用意されています。ここでは、特に利用頻度の高い主要な6つのViewタイプについて、その特徴と主な用途を解説します。

Viewタイプ	概要	主な用途
Deck View	各レコードをカード形式で表示します。画像や主要な情報をコンパクトにまとめられます。	・写真付きの商品カタログ・従業員名簿・タスクカード
Table View	スプレッドシートのように、データを一覧形式で表示します。	・大量のデータを一覧したい管理画面・シンプルなリスト表示
Gallery View	画像を主役として、タイル状に並べて表示します。視覚的なインパクトが強いのが特徴です。	・写真ギャラリー・ポートフォリオサイト・デザイン案の一覧
Detail View	1つのレコード（行）の詳細情報をまとめて表示します。関連データやアクションボタンの配置も可能です。	・レコードの詳細確認画面・データ編集の起点となる画面
Map View	住所や位置情報を持つデータを、地図上にピンとして表示します。	・顧客や店舗の所在地マップ・訪問ルートの確認・物件情報
Dashboard View	複数の異なるViewを1つの画面に自由に組み合わせて表示できます。	・売上分析ダッシュボード・プロジェクト進捗管理画面・KPIモニタリング画面
Form View	データの新規作成や編集を行うための入力フォームです。カラムのデータ型に応じて、入力形式が自動で最適化されます。	・新規顧客登録・日報入力・在庫登録

第3章：Viewの配置場所と見え方

作成したViewは、アプリ内のどこに配置するかによって、ユーザーからの見え方やアクセス方法が変わります。主な配置場所は以下の3つです。

Primary Navigation (Position: first, next, middle, later, last): アプリ画面の下部に表示されるメインのナビゲーションメニューに配置されます。ユーザーが最も頻繁にアクセスする、アプリの中核となる画面がここに該当します。
Menu Navigation (Position: menu): 画面左上のハンバーガーメニュー（≡）内に配置されます。使用頻度は高くないものの、必要な時にアクセスしたい設定画面や補助的な機能の画面に適しています。
Reference Views(Position: ref): 他のViewから参照されたときにのみ表示される特殊なViewです。例えば、一覧画面（Table View）で特定のレコードをタップした際に表示される詳細画面（Detail View）は、通常Ref Viewとして自動生成されます。開発者が意図的に配置するものではなく、AppSheetが文脈に応じて自動的に呼び出します。

第4章：Viewの主要な設定項目

Viewエディタでは、Viewの振る舞いや見た目を細かくカスタマイズするための様々な設定項目が用意されています。ここでは、特に重要な設定項目をいくつか紹介します。

For this data: このViewが表示するデータソース（テーブルまたはスライス）を選択します。
View type: このViewの表示形式（Table, Deck, Detailなど）を選択します。
Position: このViewの配置場所（Primary, menu, ref）を選択します。
Display > Icon: メニューやView内で表示されるアイコンを選択します。
Display > Display name: メニューやViewのヘッダーに表示される名前を設定します。
Display > Show if: このViewが表示される条件をYes/Noを返す式で指定します。

第5章：実践！在庫管理アプリのViewを作成する

それでは、これまでの知識を活かして、連載第3回で設計した在庫管理アプリの主要なViewを作成していきましょう。AppSheetが自動生成したViewを、より使いやすくカスタマイズしていきます。

ステップ1：在庫一覧画面 (Deck View) の作成

アプリを開いたときに最初に表示される在庫一覧画面を作成します。自動生成ではTable Viewになっていることが多いですが、今回は写真も表示できるDeck Viewに変更し、視覚的に分かりやすい画面を目指します。

Viewの選択と基本設定
- AppSheetエディタのViewsセクションに移動します。
- 在庫マスタ（ITEMS）テーブルに対応するView（例：Items）を選択します。
- View typeをdeckに変更します。
- PositionがfirstやmiddleなどのPrimary Viewになっていることを確認します。
表示項目の設定スクリーンショット指示：

View Optionsの中にあるPrimary headerに[物品名]カラムを設定します。
Secondary headerに[型式]カラムを設定します。
Summary columnに[数量]カラムを設定し、現在の在庫数が一目で分かるようにします。
Main imageに[物品画像]カラムを設定します。

これで、写真付きのカード形式で在庫が一覧表示され、各カードには物品名、型式、現在の在庫数が表示されるようになりました。Table Viewよりも格段に見やすくなったはずです。

ステップ2：在庫詳細画面 (Detail View) の調整

次に、Deck Viewでカードをタップしたときに表示される詳細画面（Detail View）を調整します。情報の表示順を整理し、関連する履歴も表示されるようにします。

表示順の調整
- Views > SYSTEM GENERATED>ITEMSでITEMS_Detailを選択します。
- View Optionsを開き、Column OrderをManualにします。ここで設定した順番が、Detail Viewでの表示順の基本となります。「物品名」「写真」「型式」「数量」「物品種類」「保管場所」「状態」「登録日」のように、ユーザーが見やすいと思う順番に並べ替えます。
関連履歴の表示

Detail Viewには、Ref型で関連付けられた他のテーブルのレコードが自動的に「関連リスト」として表示されます。
ITEMSテーブルはHISTORYテーブルから参照されているため、Related Historysという項目がDetail Viewの下部に表示されているはずです。これにより、特定の物品の入出庫履歴をすぐに確認できます。

ステップ3：在庫登録画面 (Form View) のカスタマイズ

新しい物品を登録するためのForm Viewを、より入力しやすく、間違いが起こりにくいようにカスタマイズします。

入力項目の整理
- Views > SYSTEM GENERATED>ITEMSでITEMS_Formを選択します。
- Detail Viewと同様に、View Options>Column OrderをManualにすることでForm Viewの入力項目の順序を調整できます。
- ColumnのEdit this columnをクリックし、Show?のチェックを外すことで、フォームに表示しない項目を設定できます。例えば、在庫マスタIDはUNIQUEID()で自動生成するため、フォームに表示する必要はありません。
初期値と入力規則の設定

Data > ITEMS で各カラムの設定を開きます。
在庫マスタIDカラムのInitial valueにUNIQUEID()と入力し、キーが自動で生成されるようにします。
登録日カラムのInitial valueにNOW()と入力し、登録日時が自動で記録されるようにします。
数量カラムのValid Ifに[数量] >= 0と入力し、マイナスの値が入力されないようにします。

AppSheet用語表

用語	意味	具体例	初心者の落とし穴
View	データをユーザーに見せるための画面。UI/UXの核となる要素。	在庫一覧画面、詳細画面、登録フォーム	自動生成されたViewをそのまま使いがち
View Type	データの表示形式。Table, Deck, Detailなど10種類以上ある。	`deck`	用途に合わないタイプを選ぶと見にくい
Position	Viewの配置場所。Primary, Menu, Refの3種類。	`Primary`	全てのViewをPrimaryに置くと画面が煩雑に
Data Source	Viewが表示するデータの元。テーブルまたはスライスを指定。	`ITEMS`テーブル	スライスを使わないと複雑な絞り込みができない
Primary Header	Deck ViewやTable Viewで、メインに表示されるカラム。	`[物品名]`	Keyカラムが自動で設定されがち
Behavior	Viewの振る舞いを制御する設定群。表示/非表示の条件式など。	`Show if`	条件式が複雑になるとパフォーマンスに影響
Action	View内に配置できるボタン。データの更新や画面遷移などを実行する。	「出庫」ボタン	1つのViewで複数テーブルの更新は上級者向け
Slice	テーブルのデータを特定の条件で絞り込んだ「仮想的なテーブル」。Viewのデータソースとして使える。	「要修理の物品」スライス	スライス自体の更新はできない