公開日：2024年05月28日　更新日：2026年01月15日

石見沙紀

AppSheet アプリをさらに使いやすく！UX向上に役立つ Show Type を解説

AppSheetの注目度も日々高まり、 AppSheetを導入し企業 DX を進めている企業も増えていると感じています。非エンジニアでもアプリ開発ができるようになりましたが、いざアプリ開発を始めると、フォームや詳細ビューのデザインに悩むことも多いのではないでしょうか？

そんな課題を解決するのが、AppSheetのShow Typeです。
AppSheet Show Typeはデータ自体は格納せず、フォームやビューのレイアウトとスタイルを制御する特殊なデータ型です。6種類のカテゴリから選択することで、マルチページフォームの作成、フォームの見やすさ・使いやすさの向上、画像の挿入など、様々なデザイン表現が可能になります。

本記事では、AppSheetのShow Typeについてご紹介します。

AppSheetとTypeの概要

AppSheetとは？

AppSheet は、Googleが提供するスプレッドシートベースのノーコード開発プラットフォームです。AppSheetを使うことで、スプレッドシートのようなデータベースをもとに、簡単にアプリケーションを作成することができます。また、AppSheetは、Webアプリとモバイルアプリの双方に対応しており、ビジネスや個人の用途に応じて多様なアプリケーションを作成することができます。

AppSheetのTypeとは？

AppSheetではスプレッドシートから読み込んだデータを列ごとに1つのテーブルで表します。

エディタ画面において各列の分類や、その役割と動作を定義するためのプロパティの設定を行うことが可能です。そのうちTypeは列をどのように表すかを35種類の型で選ぶことができます。種類こそ多いものの、直感的に選択できる様になっています。

Show Typeの概要

Show Typeとは？

Show Typeは、フォームビューと詳細ビューの表示を改善することを目的としたテーブル列のことです。原則はフォームビューのみに適用され、詳細ビューでの表示にも反映したい場合は設定が必要です。

Show Typeの種類とカテゴリの解説

Show Typeには次の6つのカテゴリがあります。

1. Page_Header: ページの区切りを示すために使用されます。ページの見せ方はViewごとに設定されたページ種別が適用されます。
Page_Headerにはさらに、Simple・Page Count・Tabsの3種類の見せ方があります。

Simple
PAGE COUNT

Tabs

Form ViewやDetail Viewでページ分割すると、Show Typeの表示非表示の設定で、ページごとの表示非表示設定ができます。

2. Section_Header: セクションの見出しとして使用されます。

Show type Section_heder

3. Text: 説明文を表示させます。

Show type text

4. URL: クリック可能なURLを表示させます。また、HYPERLINK関数で任意の文字列にURLを埋め込むこともできます。

5. Image: 画像を表示します。
外部公開されている画像（Web上で誰でも閲覧可能な画像）のURLを取得し、Show Typeの列のContentとして入力します。
※Google DriveのダウンロードURLは利用できません。

6. Video: MP4形式の動画またはYouTubeで公開されている動画を表示します。
YouTubeの場合、列のContentとして動画の埋め込みリンクを指定します。動画下部にある「共有」を開きます。「＜＞埋め込む」をクリックし、動画埋め込みのコードの中から "https://www.youtube.com/embed/sCqX3PXyTJs?si=lmiJd3QDSaoU8Hqd"の様なURL を取得し、Show Typeの列のContentの箇所に貼り付けることで動画の表示、再生が可能になります。

Show type Video Link

画像や動画の表示サンプルはこちら

Show Typeの実装方法

Show Typeには次の2つの実装方法があります。
それぞれの実装方法について説明します。

仮想列をShow Typeの列として使用する

Dataのカスタマイズエリア右上にある“Add Virtual Column”から仮想列を追加します。
[ App formula ]に""（空の値: ダブルクォーテーション）を設定します。
仮想列を追加する場合には、必ず定数の値もしくは関数を入力する必要がありますが、ここでは空の値を設定します。

次に仮想列のTypeをプルダウンからShowを選択します。
Editから列の詳細設定画面に移動し、列をShow型として構成します。
Type DetailsのContentに表示したいコメントを入力します。
構成が完了したらDoneで保存します。

仮想列で列を作り、対象のViewのColumn Orderで並び替えもできます。

スプレッドシートの空の列をShow Typeの列として使用する

DataテーブルのView data sourceから接続元のスプレッドシートへアクセスします。
改ページとして設定したい列の前に空の列を挿入し、例えばpage1/page2…の様なページ名を指定します。ヘッダー列が空の場合、Column_nの形式のデフォルトの名前がテーブルに追加されます。

AppSheetのデータテーブルに戻り、Regenerate schemaでデータテーブルの更新をおこないます。
空の列のTypeをプルダウンからshowを選択します。
Editから詳細画面に移動し、列をShow型として構成します。
構成が完了したらDoneで保存します。

詳細ビューにShow Typeの列を使用する方法

Show Typeの列は、デフォルトではフォームビューのみで使用することが出来ますが、詳細ビューでもShow Typeの列を使用することが出来ます。その場合、次の設定をおこないます。

まず、ナビゲーションエリアでSettingsを選択し、View type optionsでDetail Viewの設定を開きます。
Include Show columns in detail viewsのトグルをONにします。
このトグルをONにすることで、詳細ビューでShow Typeの列を使用することができます。

Format ruleや表示条件を設定する

Views > Format ruleを設定することで、Show列を装飾することができます。
また、TextのShow列を作成して、Show?に条件を記述することで、「特定の条件の時のみ出現する文字列」を設定することができます。

これらを組み合わせると、入力を検証して警告を表示するしくみを作ることができます。
警告を詳細画面では表示したくない場合には、CONTEXT関数を利用して、フォーム画面の時だけに表示されるように設定します。

入力を検証する仕組みとしては「Valid If」の設定があります。
Valid Ifでは条件に一致しないデータは一切入力させないようにしますが、Show Typeを利用した検証では、入力は許可しつつも、ユーザーに対して警告を表示することができる点が異なります。

補足事項

上記の内容のほかに、次のような注意事項と補足事項があります。

Display nameとContentを両方入れた場合、Contentが優先されます。
Page Headerのテーブル種別をTabにしたときは、Display nameは反映されません。
Desktop viewでカードブロックを分けることができます。

まとめ

いかがでしたでしょうか。
本記事ではAppSheetのShow Typeの基本的な使い方についてご紹介しました。
Show Typeをマスターすることで、より魅力的で使いやすいAppSheetアプリを開発することができます。ぜひ、様々な機能を試して、データ管理の効率化とユーザー満足度の向上を目指しましょう!

AppSheetを含むGoogle Workspaceの活用事例や最新のライセンス体系、価格表等についてもっと詳しく知りたい場合は、資料もご用意しておりますのでお問い合わせください。

※AppSheet サポートサービスは吉積情報でのライセンス契約企業様に限ります。