🔰

【初学者向け】AppSheet を実際に利用してアプリを作成してみる

に公開
初心者
AppSheet
tech

はじめに

こんにちは。クラウドエース株式会社 第三開発部の光岡征海（2025 年新卒）です。
今回は、私が業務の中で利用して便利だと感じた AppSheet を紹介します。この記事では読書管理アプリを実際に作成しながら、その使い方を解説していきます。

対象読者

  • ノーコードでのアプリ開発に興味があり、実際に何か作ってみたい方
  • スプレッドシートや Excel での データ入力や管理をもっと楽にしたい方
  • AppSheet という名前は聞いたことがあるが、 何ができるかを具体的に知りたい方

AppSheet とは

AppSheet は、Google が提供する「ノーコード開発プラットフォーム」です。 業務で利用している Google スプレッドシートや Excel などのファイルを、データベースとして活用できます。
用意したデータファイルを AppSheet に接続すると、AppSheet がファイルの構造（列の構成など）を自動で読み取り、基本的な機能を持ったアプリケーションの雛形を生成します。
開発者は、その雛形を基に画面のレイアウトを調整したり、機能を追加したりといったカスタマイズをグラフィカルなエディタ上で行うことができます。

AppSheet の特徴

AppSheet の主な特徴は以下の 4 点です。

  • プログラミング不要（ノーコード）
    専門的なコードを書く必要がなく、画面上のメニュー選択や簡単な数式（Excel の関数のようなもの）の設定でアプリを構築できます。
  • 既存のデータ資産を活用
    既に使用しているスプレッドシートや Excel ファイルをそのままアプリのデータソースとして活用できます。 アプリからのデータ入力は、元のスプレッドシートにリアルタイムで反映されます。
  • マルチデバイス対応
    作成したアプリは、特別な設定をしなくても自動的にスマートフォン（iOS/Android）、タブレット、PC の Web ブラウザなど、様々なデバイスの画面サイズに対応します。
  • 豊富な標準機能
    データの閲覧・登録・更新・削除といった基本的な機能に加え、以下のような機能を簡単に実装できます。
    • カメラ機能（写真撮影やバーコードスキャン）
    • GPS 機能（位置情報の取得）
    • グラフやダッシュボードでのデータ可視化
    • メール送信やプッシュ通知の自動化

今回作成するデモアプリについて

1. アプリの完成イメージ

今回作成するアプリの完成形です。 PC でもスマートフォンでも動作する、高機能なダッシュボード画面を持つアプリを作成します。

2. 主な機能

このアプリには、以下のような機能が実装されています。

  • ダッシュボード：登録した本の一覧と詳細、ジャンル別の読書状況を一目で確認できます。
  • 検索バー：本のタイトルや著者名だけでなく、 [読書中メモ] や [感想] の内容も含めて検索できます。
  • ステータス管理：本の状態を「読みたい」「読書中」「読了」で管理できます。

3. この記事で学ぶ主な AppSheet 機能

このアプリを作成する過程で、AppSheet の以下の機能を学びます。 これらを使いこなせると、作れるアプリの幅が格段に広がります。

  • 列の条件付き表示 ( Show? )
    可能になる動作: 「読了」ステータスを選んだ時だけ、「感想」や「評価」の入力欄を表示させます。
  • Action（アクション）
    可能になる動作: ボタンをワンタップするだけで、ステータスを「読みたい」→「読書中」→「読了」と更新できます。
  • 仮想列と自動採番 ( Initial value )
    可能になる動作: b031 のようなカスタム ID を、新しい本の登録時に自動で付与します。
  • Chart と Dashboard（グラフとダッシュボード）
    可能になる動作: データを円グラフで可視化し、アプリのホーム画面を作成します。

4. 準備するもの

このチュートリアルで使用するサンプルデータ（スプレッドシート）を用意しました。以下のリンクからご自身の Google ドライブにコピーして、準備は完了です。

読書管理シート（サンプルデータ）
https://docs.google.com/spreadsheets/d/1McERuMdpKjbCQco6ec1RZVadjqOl8jIWs2J9EEs5Jy4/copy

今回用意したデータでは、AppSheet がスプレッドシートの各行（各データ）を正確に区別できるよう、書籍 ID をキー（Key）として設定します。

デモアプリの作成手順

アプリの自動作成（参照するスプレッドシートの選択）と基本設定

AppSheet でアプリを自動作成する

AppSheet の公式サイトにアクセスし、Google アカウントでログインします。

  1. 画面上部の「Create」>「App」>「Start with existing data」の順にクリックします。
  2. アプリ名（例: 読書管理アプリ）を入力します。（カテゴリは選択しなくてもアプリの機能に影響しません。）
  3. 「Choose your data」で、先ほど作成したスプレッドシートの「読書管理シート」ファイルを選択します。
  4. AppSheet が自動でデータを読み込むと、右側にプレビュー画面が表示されます。

    （プレビュー画面は自動で生成されるので、画面が異なることがあります。）

AppSheet の画面構成を理解する

AppSheet はアプリ作成の際に読み込んだデータを元に UI/UX を自動で設定します。 これらの設定は、画面左にある Views（スマートフォン型のアイコン）をクリックすると表示される画面で確認・設定できます。この画面ではアプリの見た目や画面遷移を設定することができます。

この画面で設定できることの一例です。 具体的な設定は「データの可視化（ダッシュボード）」の章で実際にダッシュボード画面を作成する際に設定します。

  • View type (表示形式)：
    今は Table (表形式) になっていますが、これを Deck (カード形式)、 Gallery (画像メイン)、 Chart (グラフ)、 Dashboard (ダッシュボード) など、様々な見た目に変更できます。
  • Position (表示位置)：
    アプリ下部のメニュー（left, center, right）のどこに配置するかを決められます。
  • View options (その他)：
    Sort by（並べ替え）や Group by （グループ化）など、一覧画面のデータの見せ方を細かく設定できます。

データ型（Type）を正しく設定する

AppSheet はアプリ作成の際に読み込んだデータを元にデータ型を自動で設定します。 データ型は画面左のテーブルアイコンをクリックすることで確認できます。
AppSheet はデータ型を自動で推測しますが、意図しない型に設定されることもあります。 ここでデータ型を修正します。

各列のデータ型とその他設定を編集します。

  • 書籍 ID：Text
    • Key? のチェックがオンになっていることを確認します。（書籍 ID がこのデータのキーであることを設定します）
    • [書籍 ID]列の Editable? のチェックを外します。Initial value で自動採番されるキー列が、ユーザーが後から手動で編集されないようにします。
  • 書籍名：Text
  • 著者名：Text
  • ジャンル：Enum
  • ステータス：Enum
  • 読書中メモ：LongText
  • ページ数：Number
  • 読書開始日：Date
  • 読了日：Date
  • 評価：Number
  • 感想：LongText

データ型を設定したら、画面右上にある青い Save ボタンをクリックして変更を保存します。 しかし、ジャンルのデータ型を Enum に設定すると、AppSheet 上でエラーが表示されます。 これは Enum で候補に挙げる選択肢を設定していないためです。


修正箇所を明示してくれます。
四角で囲われた鉛筆マークをクリックし、Type Details セクション内の Values セクションから、Add をクリックすることで、Enum の選択肢を追加できます。

追加したら、Save ボタンをクリックして変更を保存します。 エラーが解決します。
また、書籍 ID、書籍名、ステータスの Require? にチェックをつけて入力必須項目にします。

入力画面の改善（UI/UX 向上）

AppSheet の機能を使用して、入力ミスを防止したり、必要な時にのみ入力欄を表示する機能を実装します。

書籍 ID を「b001」形式の連番で自動採番する設定

データを追加しようとした際に、書籍 ID を設定する必要があります。 しかし、AppSheet が自動生成する ID を使用すると、既存の書籍 ID とは異なる形式になり、規則性が崩れてしまいます。 ここではこれまでの書籍 ID と同じ形式で自動で入力できるように設定します。


AppSheet 側が自動で ID を生成している。

今回は仮想列（Virtual Column）という機能を使って実装します。

仮想列（Virtual Column）とは？

ひと言でいうと、「元のスプレッドシートには存在しない、AppSheet アプリの中だけで計算用に存在する、幻の列」のことです。
仮想列の主な特徴

  • スプレッドシートには保存されない
    最大のポイント です。 元のデータはキレイなまま保ちつつ、アプリ上では計算結果を表示したり、利用したりできます。
  • Formula で自動計算される
    仮想列は、必ず Formula（計算式）を持ちます。 この式によって、同じ行の他の列の値を使って、自動的に計算が行われます。
  • ユーザーは手入力できない
    Formula によって常に自動計算されるため、ユーザーが手動で値を入力・編集することは一切できません。
  • リアルタイムで更新される
    参照している元のデータが変更されると、仮想列の値も即座に自動で再計算されます。

なぜ仮想列を使うのか？（メリット）

仮想列には、大きく分けて 2 つの使い道があります。

  1. データから「計算結果」をアプリに表示したい時
    元のデータにはないけれど、アプリ上では表示したい情報（計算結果）をリアルタイムで表示できます。
  2. 他の計算を手伝うための「作業用の列」が欲しい時
    AppSheet の他の機能（ Initial value など）で複雑な計算を行いたい場合、元のデータ（例: "b030" のようなテキスト）が、計算に必要な形式（例: 30 という数値）と異なっていることがあります。 このような場合に、元のデータに対して複雑な式を直接適用しようとすると、式が長くなりすぎたり、エラーの原因になったりします。
    そこで 仮想列 を使い、あらかじめ「計算に必要な部分だけを抜き出し、適切な形式に変換した『作業用の列』」をアプリ内に用意することができます。 その結果、他の機能で使う式が非常にシンプルになり、エラーを防ぎ、アプリの動作を安定させることができます。

実装手順

仮想列「書籍 ID_数値」の作成と保存
  1. Data をクリックし、読書メモ の列一覧画面を開きます。
  2. ＋アイコンから「Add Virtual Column」をクリックします。
  3. 新しく追加された仮想列（一番下にできます）の設定を、以下のように入力します。
    • Column Name：書籍 ID_数値
    • App Formula：以下の式をコピーして貼り付けます。
      IF(ISNOTBLANK([書籍ID]), NUMBER(RIGHT([書籍ID], 3)), 0)
      （[書籍 ID] が空でなければ、右側 3 文字を数値に変換する。 空なら 0 にする）
  4. 入力したら、「Done」をクリックして設定画面を閉じます。
  5. エディタの右上にある 青い「Save」ボタン を押して、この変更を AppSheet に保存・同期させます。
[書籍 ID]の Initial value（初期値）の設定
  1. AppSheet の保存・同期が完了したら、[書籍 ID]の設定に戻ります。
  2. 「Data」>「読書メモ」を開き、[書籍 ID] 列の編集ボタン（鉛筆マーク）をクリックします。
  3. Initial value の入力欄に、 以下の式 をコピーして貼り付けます。
IF(
    ISNOTBLANK(読書メモ[書籍ID]),
    CONCATENATE(
        "b",
        RIGHT(
            CONCATENATE("000", (MAX(読書メモ[書籍ID_数値]) + 1)),
            3
        )
    ),
    "b001"
)

式の解説

この式は「もしデータが 1 件もなければ "b001" を、1 件以上あれば最大の ID に+1 した ID を生成する」という処理を行っています。
この式は、 IF( <条件>、 <条件がTrueの時の処理>、 <条件がFalseの時の処理> ) という大きな IF 文で構成されています。

  1. <条件> : ISNOTBLANK(読書メモ[書籍ID])

    • 意味：「 読書メモテーブルの [書籍 ID] 列は、空ではありませんか？（＝すでに 1 件でもデータが入っていますか？）」
    • 目的：テーブルにデータが 1 件もない（最初の 1 冊目を登録する）場合と、すでにデータがある（2 冊目以降を登録する）場合とで、処理を分けるためにあります。

  2. <条件が False の時の処理> : "b001"

    • 意味：「"b001"」という文字列を設定します。
    • 実行される時：ISNOTBLANK（空ではない）が False だった時、つまりテーブルが空（1 冊目）の時に実行されます。
    • 目的：最初のデータ ID を b001 として開始するためです。

  3. <条件が True の時の処理> : CONCATENATE( ... )

    • 意味：複雑な計算と文字列の合体処理を行います。
    • 実行される時：ISNOTBLANK（空ではない）が True だった時、つまりテーブルに 1 冊以上のデータがすでにある（2 冊目以降）の時に実行されます。
    • 目的：現在の最大の ID に+1 した、新しい ID（例: b031 ）を生成します。
「True の時の処理」の詳細 (内側から解説)

b031 のような次の ID を生成するロジックです。 AppSheet は式を内側から計算していくので、その順番で解説します。

CONCATENATE(
    "b",  <-- (4) 最後に "b" を付ける
    RIGHT(  <-- (3) 右から3文字抜き出す
        CONCATENATE("000", ( ... )), <-- (2) "000" を付ける
        3
    )
)
  • (1) (MAX(読書メモ[書籍ID_数値]) + 1)
    MAX(読書メモ[書籍ID_数値]) : まず、作成した仮想列 [書籍 ID_数値] （ {1, 2, ..., 30} という数値のリスト）から、 最大値 を探します。 （例: 30 ）
    ... + 1 : その最大値に 1 を足します。
    → 結果 (例)：31 （ Number 型の数値）
  • (2) CONCATENATE("000", ( ... ))
    意味: (1)で計算した数値 31 に、文字列の "000" を 前 に付けます。
    → 結果 (例)："00031" （ Text 型の文字列）
  • (3) RIGHT( ... , 3)
    意味: (2)で作成した文字列 "00031" の、 右側から 3 文字 だけを抜き取ります。
    → 結果 (例)："031" （ Text 型の文字列）
  • (4) CONCATENATE("b", ( ... ))
    意味：最後に、(3)で作成した 3 桁の文字列 "031" に、文字列の "b" を 前 に付けます。
    → 最終的な ID (例)："b031"

この式によって、数値の計算と文字列の操作だけで、「 b + ゼロ埋めの連番」という ID を生成することができます。

この設定が完了すると、規則に沿った書籍 ID が自動で入力されるようになります。

最後に作成した仮想列と、書籍 ID の SHOW? のチェックを外します。 これにより、アプリ画面上に ID の情報が表示されなくなります。

Show：条件に応じて項目を隠す

「読了」ステータスを選んだ時だけ「評価」や「感想」欄を表示して、入力できるようにします。

  1. 「Data」>「読書メモ」を開きます。
  2. [評価] 列の編集ボタン（鉛筆マーク）をクリックし、設定の詳細を開きます。
  3. Show? （フラスコのアイコン）を探し、入力欄に以下の式を入力します。
    [ステータス] = "読了"
    （[ステータス]列の値が"読了"と等しい場合のみ、この列を表示する）
  4. 同様に、[感想]列と[読了日]列の Show? にも [ステータス] = "読了" を設定します。

これで、プレビュー画面で入力フォーム（ + ボタン）を開き、[ステータス]を「読了」に切り替えた時だけ、関連する項目が表示されるようになります。

また、読書中メモ欄もステータスが「読書中」もしくは「読了」に設定したときに入力欄が表示されるように設定します。

  • [読書中メモ] 列の Show? 式：
    変更後: IN([ステータス], {"読書中", "読了"})
    （ステータスが「読書中」または「読了」のどちらかであれば、このメモ欄を表示します。 IN() 関数はリストに合致するかを調べる関数です）

この設定で、読みたい → 読書中（メモ欄表示） → 読了（メモ欄は表示されたまま、新たに感想欄と評価欄が表示される）という入力フローが完成します。

便利機能の追加（Action）

アプリをさらに効率化する「ボタン」を追加します。

Action：ワンタップでステータスを「読書中」、「読了」にする

ワンタップでステータスを読書中にするボタンを作成します。

  1. 「Actions」>「Add Action」>「Create a new action」をクリックします。
  2. 以下の通り設定します。
    • Action name：読書中チェックボタン
    • For a record of this table：読書メモ
    • Do this：Data: set the values of some columns in this row
    • Set these columns：
      • [ステータス] = "読書中"
      • [読書開始日] = TODAY()
        （ TODAY() 関数で、ボタンを押した"今日"の日付が自動で入ります）
    • Position：prominent
    • Appearance (外観)：
      • Display name：読書開始
      • Action icon：play_circle （ ▶️ アイコン）
      • Display：Display overlay （一覧画面に重ねて表示）
    • Behavior (動作)：
      • Only if this condition is true：（この条件が True の時だけ表示）
        [ステータス] = "読みたい"

これで、一覧画面に表示される「 ▶️ 」ボタンを押すだけで、ステータスと読書開始日がワンタップで更新されるようになります。

同様の設定で、ワンタップで読了にするボタンを作成します。

  1. 以下の通り設定します。
    • Action name：読了チェックボタン
    • For a record of this table：読書メモ
    • Do this：Data: set the values of some columns in this row
    • Set these columns：
      • [ステータス] = "読了"
      • [読了日] = TODAY()
    • Position：prominent
    • Display(外観)：
      • Display name：読了
      • Action icon：✅ (check_circle など)
    • Behavior (動作)：
      • Only if this condition is true：[ステータス] = "読書中"

これで、一覧画面に表示される「✅」ボタンを押すだけで、ステータスと読了日がワンタップで更新されるようになります。

データの可視化（ダッシュボード）

最後に、登録したデータを分析する「ダッシュボード」を作成します。
その前に、View 画面にある PRIMARY NAVIGATION, MENU NAVIGATION, REFERENCE VIEWS について解説します。これらの設定は View の配置場所を決定し、ユーザーに画面を「どのように見せるか」を設定します。

  1. PRIMARY NAVIGATION
    • 場所：アプリ画面の下部に表示されるメインメニュー（最大 5 個）です。
    • 用途：ユーザーが最も頻繁に使う、アプリの核となる画面（ホーム画面、入力画面など）を配置します。
  2. MENU NAVIGATION
    • 場所：アプリ画面の左上にあるハンバーガーメニュー（三本線）の中に格納されます。
    • 用途：普段は使わないけれど、たまにアクセスしたい画面（設定画面、利用規約など）を配置します。
  3. REFERENCE VIEWS
    • 場所：どこにも表示されません。（メニューにも、下部にも）
    • 用途: それ自体は独立した画面として表示する必要はないが、 他のビューの「部品」として呼び出されたり、参照されたりする画面を配置します。

1. Chart ビュー：グラフを作成する

  1. 「Views」>「REFERENCE VIEWS」の隣にある＋ボタンから「New View」>「Create a new view」をクリックします。
  2. 以下の通り設定します。
    • View name：ジャンル別グラフ
    • For this data：読書メモ
    • View type：Chart (チャート)
    • Chart type：histogram
    • Chart columns：[ジャンル]
    • Position：ref (参照専用。メインメニューには表示しない)

2. Dashboard ビュー：画面を統合する

  1. 「Views」>「New View」をクリックします。
  2. 以下の通り設定します。
    • View name：Home
    • View type：Dashboard (ダッシュボード)
    • Position:：leftmost
    • View entries (ダッシュボードに含めるビュー)：「Add」をクリックし、以下の 3 つを追加します。
      • ジャンル別グラフ（先ほど作成したグラフ）
      • 読書メモ（自動作成された本の一覧ビュー）
      • 読書メモ_Detail（自動作成された本の詳細ビュー）
  3. Interactive mode をオンにすると、グラフをクリックすると下の一覧がそのジャンルだけに絞り込まれる、連動するダッシュボードになります。
  4. 歯車アイコン（Settings）> General の Starting view を作成したダッシュボード画面に設定します。 これでアプリを開いた際にダッシュボード画面が最初に表示されるようになります。
  5. プレビュー画面の上にある Desktop（PC アイコン）をクリックすると画像のようなダッシュボード画面が表示されます。

これで「読書管理アプリ」の完成です。
これまでの作業を通して不明な点や、さらに詳細を知りたい場合は AppSheet ヘルプから確認することができます。

おわりに

ここまで AppSheet について、実際にデモアプリを作成しながら紹介してきました。

設定できる箇所がとても多く、最初は戸惑ったかもしれません。 しかし、慣れてくれば自分が思い描いた通りのアプリを簡単に作成できる可能性を感じていただけたと思います。

ちなみに、今回作成したアプリは個人利用であれば、無料プランで使用することができます。 （無料プランでは、デプロイして他のユーザーに共有することができません。）画面右上にある「Share」>「Share links」>「Open in browser」のリンクからもアプリを開くことが可能です。

この記事を通じて、AppSheet について少しでも理解が深まり、実際に利用してもらえたら幸いです。

Discussion