AppSheet実践編 | ゼロからアプリを作ってみよう

この記事を読んでる方へ

▼データマーケティングの教科書 下

初心者の方から、より詳しくなりたいという方へ。
本書ではデータマーケティングの基礎から学び、データを通じて顧客の行動や感情を理解し、 より確かな意思決定を目指します。

詳しく知りたい

みなさん、こんにちは！

前回の記事で、AppSheetとは何かを中心に、基本的な機能や使い方をご紹介しました。

AppSheetを使うと、Googleスプレッドシートのデータを元に、業務に必要なアプリを手軽に作れることをイメージしていただけたかと思います。

今回はその続きとして、「実際にどうやってデータをつないでアプリを組み立てるのか」というより実践的なステップに踏み込んでいきます。

特に今回は、Googleスプレッドシートを活用したシンプルな在庫管理アプリを題材に、データ接続の方法から、ビュー調整、チャート表示、Automation設定まで、アプリ構築の流れを初心者でも迷わず進められるようにわかりやすく解説します。

アプリをつくろう

今回作るアプリのゴール

今回は、Googleスプレッドシートをデータベースにした、シンプルな在庫管理アプリを作成します。

＜完成形＞

＜機能＞

商品リストの閲覧
商品名・単価・担当者などを一覧で確認できる。

在庫数チャート
チャートで商品ごとの在庫数を確認できる。

発注状況の切り替え
「未発注 → 発注済み」など、ステータスを変更可能。

ステータス変更時のメール通知
発注状況が変わった場合、設定されたメールアドレスへ自動通知。

リアルタイム同期
アプリで変更すると、スプレッドシートにも即時反映。

ステップ1：Googleスプレッドシートを準備する

まずは、AppSheetでアプリを作る前に、土台となるデータを準備します。

ステップ2：AppSheetに取り込む

①ヘッダーの拡張機能＞②AppSheet＞③アプリを作成 をクリックするだけで、簡単にデータベースをAppSheetに取り込むことができます。

取り込みが完了すると、このような編集画面が表示されます。画面右側には自動生成されたアプリのプレビューがあり、スマートフォン・タブレット・PC のデバイスでどのように表示されるかをすぐに確認できます。

ステップ3：ビューを整えよう

データベースを読み込むだけで基本的なビューは自動生成されますが、そのままだと細かな部分が使いにくいことがあります。ここからは、より見やすく使いやすくするために、いくつかの設定を調整していきましょう。

単価(円)の表記を整える（商品詳細画面）

単価(円)の$マークを￥マークに修正、小数点以下を削除していきます。

①Data ＞単価(円)の編集画面

②Decimal digitsとCurrency symbolの修正

「Decimal digits」を 0 に設定すると小数点以下が表示されなくなり、「Currency symbol」を「¥」に変更することで円表記として扱えるようになります。

発注状況をわかりやすく表示する

商品一覧ページで発注状況がわかるように、文字とアイコンを追加し、色もつけていきます。

①発注状況ごとのテキスト設定

「Type Details」の「value」に表示したいテキストを入力します。（例：「”未発注”」「”発注済み”」）

②在庫一覧の表示に追加

サイドバーでViewsの画面に移り、「Summary column」に「発注状況」追加すると、一覧ページの各在庫の右上に発注状況が表示されるようになります。

③アイコンとテキストを設定

次に、発注状況別にアイコンとテキストを設定するため、サイドバーから「Format rules」をクリックし、+ボタン＞「Create a new format rule」をクリックします。

Rule name：ルールの名前を設定。
For this data：参照するデータベースを選択。
if this condition is true：どのような条件の時か（今回は「[発注状況] = TRUE」の時）
Format these columns and actions：ルールを適用したい列を選択。

わかりやすくなるようなアイコン、テキストやアイコンの色、テキストのデザインを設定してください。

同様に未発注のパターンも作成することで、発注状況をわかりやすく一覧に表示させることができます。

編集後は保存

設定を変更したら、右上の「Save」ボタンを押して内容を反映させましょう。変更後に保存しないまま画面を移動すると、編集内容が反映されないので注意してください。

ステップ4：ビューを追加しよう

チャートビューで在庫数を可視化する

次に、AppSheetが自動生成したビューとは別に、新しくチャートビューを追加し、各商品の在庫数をチャートで可視化できるようにします。

①ビューの追加

サイドバーから「Views」をクリックし、+ボタン＞「Create a new view」をクリックします。

View name：ルールの名前を設定。
For this data：参照するデータベースを選択。
View type：「chart」を選択。

「Position」は、ページ数が複数あった場合、このビューを置きたい位置を選びます。（laeterやlastにすると右端になります。）

また、アイコンについては、「Display」の「Icon」から任意のアイコンに変更できます。

Chart type：「Col Series」を選択。
Chart columns：「在庫数」を選択。
Sort by：表示の順序を見やすいように設定。今回は在庫数の昇順。

最後に、先ほどと同様に右上の保存ボタンを押して、設定完了です。

ステップ5：Automation機能を追加しよう

発注済みにしたらGmailが届くようにする

次に、発注状況が未発注から発注済みに変更になった時に、自動でメールを送信する機能を追加します。

①Botを追加

サイドバーから「Automation」をクリックし、+ボタン＞「Create a new bot」をクリックします。

②トリガーを設定

まずは、いつイベントが発火するかのトリガーを設定します。

Event name：トリガーの名前を設定。
Table：参照するデータベースを選択。
Data change type：今回は、「未発注→発注済みに変更になった時」だけメールを送信したいので、「Updates」のみを選択。
Condition：「未発注→発注済みに変更になった時」という条件を設定。(下記のコード)

AND(
 [_THISROW_BEFORE].[発注状況] <> TRUE,
 [_THISROW_AFTER].[発注状況] = TRUE
)

【発注通知】<<[商品名]>> が発注されました

担当者: <<[担当者]>>
商品名: <<[商品名]>>
在庫数: <<[在庫数]>>
発注状況: <<[発注状況]>>

このメールは 在庫管理アプリ より自動送信されています。

この記事を読んでる方へ

▼データマーケティングの教科書 下

初心者の方から、より詳しくなりたいという方へ。
本書ではデータマーケティングの基礎から学び、データを通じて顧客の行動や感情を理解し、 より確かな意思決定を目指します。

詳しく知りたい