© 2021 ESM, Inc.
65分でAppSheetを理解する
（Automation対応版）
2021年8月
永和システムマネジメント
岡島 幸男（@okajima_yukio)
1

© 2021 ESM, Inc.
このドキュメントについて
● 対象読者（想定する使い方）
○ 採用を検討している人が、 AppSheetの可能性（できること、うれしさ）を短時間で掴むために
○ 少し触ってみたことのある人が、 AppSheetの基本モデル（ViewやData、Tableの関連など）につい
て、さらに理解を深めるために
○ 実用的なアプリを、実際に手を動かしながら作ってみたい人のために
● 学べる事
○ AppSheet の基本モデル（メカニズム）
○ AppSheet のおおよその操作方法、アプリ開発、デプロイ手順
○ AppSheet が向いている領域（素早く業務デジタル化が実現できる機能）
○ 契約プランによる違いなど、企業組織での実利用に向けた注意点
● 学べないこと
○ AppSheetとはなんであるかや AppSheetにログインするには、など基礎的なこと
○ 関数やデータ型、各種設定項目などの詳細（公式へのリンクはあちこちに入れています）
○ エディタ操作の詳細（直感的なのですぐに慣れると思います )
○ Googleスプレッドシート以外をデータソースとする場合について（ Cloud SQLを利用するケースについ
ては、http://happyman.hatenablog.jp/entry/2020/02/17/092508 を参考にください）
2

© 2021 ESM, Inc.
AppSheet の使いどころ
● 企業内で利用するアプリ。業務効率化を目的としたもの
● 今は亡きAppMaker（や 今も健在なkintoneやPowerApps）と同じ領域だと思って
間違いはない
● iOSやAndroidにネイティブアプリとしてインストールできるのでわかりやすく、モバ
イル親和性が高い（もちろんPCでも利用できる）
3

© 2021 ESM, Inc.
AppSheet のライセンスモデル
● 代表的な有償プラン（企業内利用向け）は4つ
○ これら以外にパブリック向けの利用（ for apps used at a public event, a public survey, a city
guide, or a restaurant menu. ）に限定する「Public（pay per app)」がある
○ https://help.appsheet.com/en/articles/969649-how-to-choose-a-subscription-plan
○ Cloud SQL等のデータベースを利用する場合は Enterpriseプランが必要なので注意
4

© 2021 ESM, Inc.
Google Cloud ファミリーの一員として
● Google Workspace （旧G Suite）の、Enterprise エディションだと、追加料金なしで
AppSheetが利用できる
https://workspace.google.co.jp/intl/ja/pricing.html より
5

© 2021 ESM, Inc.
Free でどこまでできるか？
● 「In fact, you can stay on the Free plan forever if your apps are for personal (non-business) use and you are the only app user.」
あなた一人が個人用途で利用するならずっと FreeのままでOK。By
https://help.appsheet.com/en/articles/969649-how-to-choose-a-subscription-plan
● セキュリティのこと気にせず（ユーザー認証なし）、オフライン利用できなくて良いなら、
Freeでも
デプロイはできる（企業内利用ではありえないが）
● 10アカウント30日までは「ユーザーのフィードバックを取得する目的で」プロトタイプをユーザー
指定で使ってもらうことは可能
6
アプリの共有設定
（Users>share app）。こ
こでemailやドメインで共
有対象を追加できる。

© 2021 ESM, Inc.
AppSheetに触れてみよう
7

© 2021 ESM, Inc.
アプリの作り方は3通り
8
データ（スプレッドシート
等）から作り始める
※ 既存のデータを活用し
たい場合に
サンプルをコピーして改
造する
※大量の実用サンプル
あり。実務ではこれが一
番近道かも
やりたいことを Spec とし
て入力してベースを作る
※ データがまだ無く、ゼ
ロから作る場合に

© 2021 ESM, Inc.
今回は「Start with an idea」をやってみよう
9
アプリで扱いたいデータを単語で入力すると、候補が提案
されるのでやりたいことを選択する。よく使われる単語や
Specはあらかじめ準備されている。
（例：Orders,Products,Customers など）
ここでは、注文アプリが欲しいので「 orders」を入力する。

© 2021 ESM, Inc.
やりたいこと（Spec）を次々と入力する
10
この段階でイメージが表示され
る。実際に操作もできる。
さらにやりたいこと（ Spec）を追加
していける。

© 2021 ESM, Inc.
やりたいこと（Spec）を次々と入力する
11
ここでは items と入力。
すると、Spec候補をいくつか提案してくれ
る。一番やりたいことにマッチする項目を選
択する。

© 2021 ESM, Inc.
やりたいこと（Spec）を次々と入力する
12
注文（Orders）は、明細（Line
Items）を複数持つ、という Specを
選んだだけで、ここまでやってくれ
る。

© 2021 ESM, Inc.
ここまでのSpecの状況を確認する
13
Spec はグラフィカルに見るこ
ともできる。
関係性をわかりやすく表示
してくれる。

© 2021 ESM, Inc.
やりたいこと（Spec）を次々と入力する
14
データを右クリックすると、追加できる
Specが一覧表示されるので、ここか
らやりたいSpecを追加することもでき
る。こちらのほうが分かりやすくおす
すめ。

© 2021 ESM, Inc.
困ったときは
15
利用可能なよくある動詞を提案してくれるので、ある程度
適当に入力しても先に進めることができる。

© 2021 ESM, Inc.
一通りSpecの入力を完成させる
16
慣れればこの程度までは 1分で作ることができ
る。「Save & Refine」クリックして、仕上げをス
タート。

© 2021 ESM, Inc.
仕上げにはエディタを使う
17
「Save & Refine」をクリック
しばらく待つとエディタが起
動してくる。

© 2021 ESM, Inc.
ここまでの補足
● 項目（Property）の追加もSpecとしてできる
○ 例えば、a Customer has a Email property
○ 項目の型（TextとかTimeとか）は項目名からある推測して付けてくれる
○ 項目間の関連（Refという型になる）も、Specに応じて自動的に付けてくれる
○ 型の変更などのカスタマイズは、エディタにて行う必要あり
● データの追加や変更、削除を行いたい場合はそれに対応するSpecを入力する
○ 例えば、users can add new Line Items
○ テキスト入力するより Graph viewで右クリックメニューから指定したほうがわかりやすい
○ もちろん後からエディタから設定もできる（ Dataの「Are updates allowed?」で）
● 画面のカスタマイズはできない
○ カスタマイズはエディタを使う
18
現時点では、ベースを作るための方法だと考えたほうが良い。仕上げはエディタにて行う。
※ 非常に素早く作っては壊しができるので、効率は素晴らしい。

© 2021 ESM, Inc.
エディタを使って仕上げる
19

© 2021 ESM, Inc.
その前に
20

© 2021 ESM, Inc.
AppSheetの基本モデルを理解しよう（UXとData編）
21
UX
Data Table Slice
Column
Column
Slice
Slice
SliceはTableを指定した条件でフィルターし
た結果で、いくつでも作成できる。※Viewは
Tableだけでなく、Sliceも指定できる。
ViewはTableやSliceを表示するた
めのもの。deckやtableなど様々な
見せ方（Type）がある。Viewと
Dataは切り離されているので、
typeは簡単に切り替えられる。
View
Tableは複数のColumnの組
み合わせ。RDBMSと同様の
考え方。
表示対象を
指定する

© 2021 ESM, Inc.
AppSheetの基本モデルを理解しよう（Behavior／Action編）
22
UX
Data Table
View操作で発火するActionを指
定できる（操作はTypeにより異
なる。例えば tableならRow
Selected）。
View
Behavior Action
どのテーブル（のレコード）に対して、どの
ようなアクションをするか指定する。同一
Tableに複数Actionが作成できるので名前
付け重要。
選択可能なAction
Viewは、自身が表示対
象とするTableのAction
のみ指定可能。
※BehaviorのWorkflowとReportsは、Automationに移動、廃止された。（2021
年8月4日時点ではメニューに残存しているが）

© 2021 ESM, Inc.
Data（Table）の実体を見てみよう ＃１
23
Data＞Storageを覗く
と、Sourece Id という項
目がある。これがOrder
Tableの実体となるスプ
レッドシートのId。

© 2021 ESM, Inc.
Data（Table）の実体を見てみよう ＃２
24
クリックするとスプレッドシートが
開く。

© 2021 ESM, Inc.
ソースとなるスプレッドシートを確認しよう
25
サンプルのデータがあらかじめ
入っている。
Specから作り始めた場合は、テーブル毎にスプレッドシートが
作成される（例：4テーブルの場合は4つのスプレッドシートがド
ライブに作成される）。
先頭行はカラム名。

© 2021 ESM, Inc.
テーブル定義を変更してみよう ＃１
26
①カラム変更用のタブに切
り替え

© 2021 ESM, Inc.
テーブル定義を変更してみよう ＃２
27
②Date列をシートに
追加

© 2021 ESM, Inc.
テーブル定義を変更してみよう ＃３
28
③スプレッドシートに列を追加した後にこ
こをクリックする。
※ ソースはあくまでスプレッドシートなの
で、変更は、スプレッドシート⇒AppSheet
のTableとなる。
④Dateカラムが追加された
TYPE（型）も、Dateじゃないか
と推測されている。

© 2021 ESM, Inc.
テーブル定義について注意すること
● テーブルやカラムの定義はあくまでAppSheet側に保持されること
○ スプレッドシートはデータの格納先であり、テーブル定義の元（ソース）ではあるが
○ カラムの名称（NAME)や型（TYPE)他は、AppSheetで定義している
○ なので、スプレッドシートのカラム名と AppSheetでのカラム名が違っても動作する（後から
AppSheetでカラム名を変更できるし、問題なく動く）
○ ただしわかりにくいので、可能ならスプレッドシートでのカラム名を変更し Regenerate Strucuture し
たほうが良い
○ Regenerate Structure すると、カラム名はスプレッドシートのもので上書きされる
29
AppSheet
スプレッドシート※
※実際はスプレッドシートに限らない。データソースにはGoogle Calendarや
Apigee、Cloud Databaseなど様々なものが利用できる。
カラム名や型
テーブル定義
(NAME,TYPE,FORM
ULA…)
イメージ
Regenerate
Structure

© 2021 ESM, Inc.
バーチャルカラムで導出項目を定義してみよう ＃１
30
● 導出項目（計算で求められる項目）や、他の
テーブルに対する参照は、バーチャルカラム
として定義できる。
● バーチャルカラムの定義はAppSheetに保存
され、ソース（今回の場合はスプレッドシート）
には、反映されない。
● バーチャルカラムに関しては、
https://help.appsheet.com/en/articles/919
891-virtual-columns などがわかりやすい。

© 2021 ESM, Inc.
バーチャルカラムで導出項目を定義してみよう ＃２
31
例えば、注文明細(Line Item)あたりの金額トータルは、注文
(Order)テーブルのバーチャルカラムの App formula にこのよう
に書ける。
※ 参照（Ref）しているTableの項目へは、[Product].[Price]等の
記法でアクセスできる。

© 2021 ESM, Inc.
バーチャルカラムで導出項目を定義してみよう ＃３
32
App formula では他にもたくさんの式（関
数）や記法を使うことができる。
詳しくは以下公式を参照
https://help.appsheet.com/en/articles/91
9759-expressions-the-essentials
https://help.appsheet.com/en/colle
ctions/377977-expressions#functio
ns

© 2021 ESM, Inc.
Table 間の関連を理解する ＃１
33
例えば、Order（注文）と Line Item（注文明細） の１対多関連の場合
Order
Line Item
Line Item
Line Item
● Line Itemテーブルに対する参照（Ref）を、List として保持する
バーチャルカラムを持つ
● 結びつける条件は「=REF_ROWS(“Line Item”,”Order”)」として表
現
○ Line Item テーブルの、Orderカラムにて結びつくという意
味
Order テーブル
詳細画面
クリックすると詳細画面が
開く

© 2021 ESM, Inc.
Table 間の関連を理解する ＃２
34
例えば、Order（注文）と Line Item（注文明細） の１対多関連の場合
Order
Line Item
Line Item
Line Item
● Order テーブルに対する参照（Ref）をOrderカラムとして保持
● Order テーブルのKeyカラムにて結びつく
Line Item テーブル
「注文明細は注文の一部」にし
たい場合はONに設定する必要
がある（※後述）。
詳細画面

© 2021 ESM, Inc.
Table 間の関連を理解する ＃３
35
①注文の新規作成と同時に注文明細
を追加できるようなUXにしたい場合
（デフォルトでは「ADD」が表示されな
い。
②詳細画面を開い
て
例えば、Order（注文）と Line Item（注文明細） の１対多関連の場合
③明細側のカラムの「Is a part of」オ
プションを「ON」にする。
（デフォルトはOFF）

© 2021 ESM, Inc.
Table 間の関連を理解する ＃４
36
④そうすることでSpecも変わっていることが
確認できる（エディタからは「Info」＞「Spec」
で閲覧可能）。
※ 変わらないときはブラウザリロード
例えば、Order（注文）と Line Item（注文明細） の１対多関連の場合

© 2021 ESM, Inc.
Table 間の関連を理解する ＃５
37
①Line Item からProductへの参照（Ref）は
ソースとなるスプレッドシートはどうなっているのか？例えば、Line Item
（注文明細）とProduct（商品） の関連の場合
②Line Itemテーブルに、Product テーブルの
「Key」カラムへの参照用項目がスプレッドシート
に作成されることで実現されている。

© 2021 ESM, Inc.
UX（画面）をカスタマイズしてみよう
38
Data毎に、様々なUXタイプに簡単に
切り替えできる。
表示順や表示する項目のカスタマイズ
も可能なのでいろいろ試してみよう。

© 2021 ESM, Inc.
注意点
● AppSheet は完全に「データありき」な仕組みであることを理解する
○ 基本、Data（Column）に存在しない項目を画面の好きな場所に表示することはできない
■ バーチャルカラムを使えば固定の文字列を出すことは可能だが …
○ 項目の表示順は「Column Order」で設定できる。
39

© 2021 ESM, Inc.
実用的なアプリを作ってみよう
40

© 2021 ESM, Inc.
どのようなアプリか
● 利用者
○ 卸売り
● 利用シーン
○ 展示会で小売り業者にタブレットで商品イメージを見せつつ、その場で注文を取る。そのまま注文
書を印刷し、署名してもらうことで商談成立
● その他
○ 今までは紙の注文書による運用だった。効率アップと「目新しさ・スマートさ」を出すためにもタブレッ
トを展示会に持ち込んでの運用に変えたい
41
過去に私がGASで開発したWebアプリとほぼ同等の機能を持つ AppSheetアプリを作ってみようという趣旨です（機
能は簡略化しています）。

© 2021 ESM, Inc.
画面のイメージ（※実際にGASで開発したもの）
42
社名ロゴ
商品画像

© 2021 ESM, Inc.
注文書のイメージ（※実際にGASで開発したもの）
43

© 2021 ESM, Inc.
フィーチャー （やりたいこと）
1. 利用者（卸売り）は、お客様（小売り）に、直接画像を見せて商品を選んでいただく（操作
は卸売りが行い、適宜画面を小売りに見せる想定）
2. 商品は複数まとめて注文できる（注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある）
3. 納期（出荷可否）は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま
たは2の場合は「要確認」を、それより多い場合は「OK」を表示
4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で
も注文できる
5. 注文単位で注文書（PDF）を作成できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. データ（商品、顧客、注文等）はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
44

© 2021 ESM, Inc.
どの方式で作るか
● 今回は「Start with your own Data」方式で
45
ちなみに「Order Capture」という、今回作りたいものにドンピシャなサンプルアプリがあります。実務では、サンプル
からコピーして改造するのが一番効率良いかもしれません。

© 2021 ESM, Inc.
まずはスプレッドシートでテーブルの設計
4種類のテーブル（1つのスプレッドシートに4つのシート）
https://docs.google.com/spreadsheets/d/1lL_OY1E5xTvzTcjHfcCQlWFaMswLyVSJh2fub1WUZIQ/edit#gid=0
46
テーブル（シート名） 用途 特記事項
orders 注文
order_details 注文明細
customers 顧客マスタ
items 商品マスタ 現在の在庫数はスプレッドシートの関数を使っ
て導出する
実際のスプレッドシート（閲覧専用）で
す。

© 2021 ESM, Inc.
導出項目について
47
スプレッドシートの機能で実現できる導出項目は、スプレッドシートの関数を利用しても良い。
AppSheetの機能（App formula）でも可能だが、「お客様はスプレッドシートでもメンテナンスしたい」というフィーチャーを満たすためにそ
うした。
※ UXから即座に計算される App formula とは違い、スプレッドシートの関数の場合、その計算はスプレッドシートとデータ同期を行うタ
イミングに行われる。詳しく知りたい方は以下公式を。
https://help.appsheet.com/en/articles/961393-spreadsheet-formulas
https://intercom.help/appsheet/en/articles/961507-app-formulas-and-initial-values
初期の在庫数から、注文明細
（order_details）に含まれる注文数を
引いたもの。

© 2021 ESM, Inc.
スプレッドシートを取り込んでテーブルを作成する ＃１
48
一つのテーブルだけが取り込まれるので（おそらく一番左にあるシート） …
google を選択
（database-1は私の環境で追加した
データソース）

© 2021 ESM, Inc.
スプレッドシートを取り込んでテーブルを作成する ＃２
49
他のテーブル（今回の場合は 3つ）を順次追加していく
スプレッドシートに存在する他のシート
は、ここから簡単に追加できる（New
Tableをクリックしてもできる。今回は
その手順でやってみた）

© 2021 ESM, Inc.
テーブル間の関連の初期設定について
スプレッドシートのカラム名を適切に設定することで、自動的に関連を作成してくれる（自
動設定されなくても後で手動で設定変更すればOK）。
50
例えば、orders と customers の場合
ordersテーブル
customersテーブル
カラム名をcustomer (customersの単
数形）にすることで、自動的に関連が
作成される。

© 2021 ESM, Inc.
テーブルごとにカラムを調整・設定する
51
型（Type）は、スプレッドシートの内容やカラム名か
ら推測したものが初期設定されている。もし、違っ
ているものがあれば変更する。ここでは「 Text」から
「DateTime」に変更する。

© 2021 ESM, Inc.
導出項目を設定する ＃１
52
注文明細（order_details)に、注文数に応じた総額を出すためのバーチャルカラム「 total_price」を追加する。
注文明細の注文数（ quantity）× 注文明
細から参照する items の price。

© 2021 ESM, Inc.
導出項目を設定する ＃２
53
以下のフィーチャーを実現するために、 order_details に、「delivery_status」 バーチャルカラムを追加する。
納期（出荷可否）は在庫数ベースで自動判別する。在庫が 0以下の場合は「NG」を、1または2の場合は「要確認」を、
それより多い場合は「 OK」を表示
IFS関数等を駆使して、フィーチャーを実
現する

© 2021 ESM, Inc.
テーブル間の関連を作成・調整する
「エディタを使った仕上げ」でやったように、項目間の参照（Ref）と、「Is a part of｣設定に
よる結び付けを行う。
54
ちなみに、ordersから、order_details への参照（バーチャルカラム）の
「Required」をOnにすると、注文明細の作成を必須にできる（画面にエ
ラーが表示されるようになる）。

© 2021 ESM, Inc.
UXを整える ＃１
各項目を画面に表示する／しない（SHOW?）や、操作可能／不可能(EDITABLE?)、必
須かどうか（REQUIRE?）、表示名（DISPLAY NAME）などを設定する。
55

© 2021 ESM, Inc.
UXを整える ＃２
メニューへの表示の仕方を調整する。
56
「UX＞Views＞PRIMARY VIEWS」の該当のView
のViewTypeを選択し、「VIEW OPTIONS」
で詳細（表示する項目や順番）を設定。

© 2021 ESM, Inc.
UXを整える ＃３
orders に埋め込まれている（インラインの）order details のUXはどこで変更するのか？
57
UX＞Views
なんか変
もし表示されてない場合は、
「Show system views｣をクリッ
クする。

© 2021 ESM, Inc.
UXを整える ＃４
orders に埋め込まれている（インラインの）order details のUXはどこで変更するのか？
58
REF VIEWSの中にorder_details_inlineというViewがあり、
View Typeを「table」にすると、それらしく表示される

© 2021 ESM, Inc.
この段階で実現できたフィーチャー
1. 利用者（卸売り）は、お客様（小売り）に、直接画像を見せて商品を選んでいただく（操作
は卸売りが行い、適宜画面を小売りに見せる想定）
2. 商品は複数まとめて注文できる（注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある）
3. 納期（出荷可否）は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま
たは2の場合は「要確認」を、それより多い場合は「OK」を表示
4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で
も注文できる
5. 注文単位で注文書（PDF）を作成できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. データ（商品、顧客、注文等）はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
59

© 2021 ESM, Inc.
見栄え・使い勝手を洗練する
60

© 2021 ESM, Inc.
DataのSliceを使ってデータを絞り込む
61
Itemテーブルのcategoryが”EModel”であるデータに
絞り込んだSliceを作成。カテゴリは3つなので、Slice
も3種類作成した。作成したSliceは、UX（画面）から表
示対象のデータ（For this data）として選択できるよう
になる。
「商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい」
を実現する。

© 2021 ESM, Inc.
DataのSliceを使ってデータを絞り込む
62
Position を「left」にすると、
左側にボタンが配置される。
新しいViewを作成し、「For this data」に、作成したSliceを指定する。

© 2021 ESM, Inc.
DataのSliceを使ってデータを絞り込む
63
Position を「menu」にする
と、メニューの中に移動す
る。
新しいViewを作成し、「For this data」に、作成したSliceを指定する。

© 2021 ESM, Inc.
メニュー構造（PRIMARY と MENU）をいい感じに
64
あまり使わないUX（画面）はメニュー（MENU
VIEWS)に移動させる。
よく使うUX（画面）だけPRIMARY VIEWSに
絞る。

© 2021 ESM, Inc.
Format Rulesで条件に応じて見栄えに変化を与える ＃１
65
UX＞Format Rules ＞New Format Rule より、
itemsの在庫数(current_stock)が1を切った場合は、code
のフォーマットを変更する。というルールを設定する。詳細
は以下公式を。
https://help.appsheet.com/en/articles/948896-format-r
ules-the-essentials
「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が
0以下でも注文できる」を実現する。

© 2021 ESM, Inc.
Format Rulesで条件に応じて見栄えに変化を与える ＃２
66
文字色を「red」に変える。
「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が
0以下でも注文できる」を実現する。

© 2021 ESM, Inc.
Format Rulesで条件に応じて見栄えに変化を与える ＃３
67
「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が
0以下でも注文できる」を実現する。
一つの設定で、あらゆるUX（画面）で有効となるの
が嬉しい。

© 2021 ESM, Inc.
検索（絞り込み）機能を実現する
68
「商品コードで絞り込むこともできるようにする」
を実現する。
直感的に絞り込むことができる。設定は、各カラム
の「SEARCH?」にて。
複数設定されている場合はどちらでもサーチでき
る。

© 2021 ESM, Inc.
この段階で実現できたフィーチャー
1. 利用者（卸売り）は、お客様（小売り）に、直接画像を見せて商品を選んでいただく（操作
は卸売りが行い、適宜画面を小売りに見せる想定）
2. 商品は複数まとめて注文できる（注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある）
3. 納期（出荷可否）は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま
たは2の場合は「要確認」を、それより多い場合は「OK」を表示
4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で
も注文できる
5. 注文単位で注文書（PDF）を作成できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. データ（商品、顧客、注文等）はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
69

© 2021 ESM, Inc.
AutomationでPDF帳票を作成する
70

© 2021 ESM, Inc.
Automationでできること
71
イメージ：
Botくんが、人間のかわりにデータの変更や時計を監視してくれてい
て、なにかあったタイミング（Event）で、あらかじめ人間が定義した、具
体的なやること（Process／Task)を実行してくれる。（Processは、
Taskをまとめた一連の仕事）

© 2021 ESM, Inc.
（参考）Workflowからの移行
72
以前作成したWorkflowがあ
ると、自動的にBotに移行で
きる。

© 2021 ESM, Inc.
BotをAction経由で起動する ＃１
73
ここをタップしたときにPDF添付
メール送信を行いたい。
● 注文書の再発行のことも考え、「orderが追加された場合
に自動メール」ではなく、「手動でボタンタップしたらメー
ル」とする
● Botはデータ駆動なので、ボタンがタップされたことに反応
してデータを更新する仕掛け（Action)が必要
UX
（画面）
タップ
テーブル
Action起動
更新
Bot/Event
更新
検知
Process起動

© 2021 ESM, Inc.
BotをAction経由で起動する ＃２
74
● （実は）ordersテーブルの「sheet_created_at」カラムはそのためにある
● 「ordersテーブルのsheet_created_atカラムを現在日時で更新する」Actionを作成する
（「Create Order Sheet」と名付けた）
「項目に値をセットするAction」で、カラムに現
在日時をセットするように設定。

© 2021 ESM, Inc.
BotをAction経由で起動する ＃３
75
● ordersのVIEW OPTIONSに、先ほど作成した「 Create Order Sheet」をActionとして指定する
①ここに追加したアクションが
（※ Delete は標準のアクション）
②ここにタップできるアイコンとし
て表示される
（※アイコン絵柄は選べる）

© 2021 ESM, Inc.
作成するBotの全体イメージ
76
「注文書発行」Bot
「Orderが更新されたときに」 Event
更新されたOrderに対して
Orderテーブル更新時
「注文者に注文書をメールする」 Process
「注文書PDFメール送信」Task
Process
起動 Order単位でテンプレートからPDFを生成
PDFを添付してメール送信
あるOrderの内容（注文明細他）を一覧で
出力する
テンプレートファイル

© 2021 ESM, Inc.
「注文書発行」Botの作成
77
今回は、まず一番外側である
Botから作り始める（ Process
やTaskから作り始めても問題
ない）

© 2021 ESM, Inc.
「Orderが更新されたときに」Event の作成
78
Event Typeは
「Data Change」、Tableには
「Order」を指定する。
Data change typeに
「UPDATES_ONLY」を指定す
る。

© 2021 ESM, Inc.
「注文者に注文書をメールする」Processの作成
79
メール送信Taskを実行す
る

© 2021 ESM, Inc.
「注文書PDFメール送信」Taskの作成
80
注文者に送信する

© 2021 ESM, Inc.
「注文書PDFメール送信」Taskの作成（続き）
81
※ テンプレートはこちらから開いて、ご自身のドライブにコピーしてください（ Idの変更も忘れずに）
帳票テンプレートの指定

© 2021 ESM, Inc.
帳票テンプレートはGoogleDocsで作る ＃１
82
<<[項目名]>>でバインディングできる。
バインドできるのは、「 Target data」（ここではOrder） に
指定したテーブルの項目のみ。
参照（Ref）しているカラムも
<<[項目名].[参照先項目名]>> で参照できる。
<<Start:[]>> と <<End>> で、
Listとして参照しているデータ（ここでは注文明細 Related
order_details）を、全件順次参照できる。
実物ドキュメントテンプレートは以下から見ることができます。
https://docs.google.com/document/d/1QyByGafRlBtyxDOYJl26yZF7jKinnA7KMUPCOIxm7QA/edit?usp=sharing

© 2021 ESM, Inc.
帳票テンプレートはGoogleDocsで作る ＃２
83
今回のサンプルでは利用していませんが、 <<If:[]>> <<EndIf> を使った条件分岐も実現できます。

© 2021 ESM, Inc.
帳票の仕上がりイメージ
84

© 2021 ESM, Inc.
Botのデバッグ
85
Test をクリック
テンプレートに間違いがあ
るとエラーが表示される
Botは、デプロイしないとスケジューリングされ
ず、時間が来ても実行されないので注意。
開発中は「Run」ボタンで、Botを実行させてテ
ストする。

© 2021 ESM, Inc.
この段階で実現できたフィーチャー
1. 利用者（卸売り）は、お客様（小売り）に、直接画像を見せて商品を選んでいただく（操作
は卸売りが行い、適宜画面を小売りに見せる想定）
2. 商品は複数まとめて注文できる（注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある）
3. 納期（出荷可否）は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま
たは2の場合は「要確認」を、それより多い場合は「OK」を表示
4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で
も注文できる
5. 注文単位で注文書（PDF）を作成できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. データ（商品、顧客、注文等）はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
86

© 2021 ESM, Inc.
追加フィーチャー
せっかくなので、もう一つBotを作成してみる。次のようなシナリオ。
1. 毎晩、PDFをまだ作成していない注文があったら、まとめてメールする
2. 一度PDFを送ったら、連続してメールが行かないように、注文出力「済」にする
87

© 2021 ESM, Inc.
「注文書を夜にまとめて送る」Bot（および「毎日午後9時にEvent」） の作成
88
Event Typeは
「Schedule」、
ForEachRowInTableをTrueにし
て、Tableには「orders」を指定す
る。
Filter Condition には
= [sheet_created_at] = “未”
を設定することで、まだ作成され
ていないorderのみ対象とでき
る。
日本時間で毎日午後 9時
を指定

© 2021 ESM, Inc.
「注文者に注文書をメールする」Processの指定（再利用）
89
すでに作成済みの「注文
者に注文書をメールする」
Processを指定（選択）す
る。
Process（EventやTask）は、再利用できるので、様々なシナリオが後から簡単に追加できる。

© 2021 ESM, Inc.
「sheet_created_at」を更新するためのStep（Action）を追加する
90
sheet_created_atを更新するた
めの処理を追加。
これらはordersテーブルの
Behavior（Action）となる
メール送信の後処理 Stepとして「Run a data action」を追加。
sheet_created_at に = NOW()
を設定

© 2021 ESM, Inc.
テストしてみる
91
Run をクリックして、
メールが届くか確認
ここまで正しく設定できていれば、以下のような挙動になる。
１．まだ一度もメールを出していない先（ sheet_created_at が空、sheet_created が “未” のレコードの分だけ、それ
ぞれ注文書PDFがメールされている。
２．続けてRunを押しても、一度送信された先にはメールが送信されない（ sheet_created_atに送信した日時が設
定されている）。

© 2021 ESM, Inc.
企業での実利用に向けて
知っておくと良いこと
92

© 2021 ESM, Inc.
本番運用に乗せるにはデプロイが必要
93
● 他のユーザーに使ってもらうた
めにはデプロイが必要
● プロトタイプで動いていたからと
いってそのまま運用できるわけ
ではない
● あらかじめしかるべきプランに契
約しておく（実質的にFreeプラン
では無理）
Manage＞Deployからデプロイできる
が、その前にDeployment Checkが必
要。Freeプランだとこのチェックが通ら
ずデプロイできない

© 2021 ESM, Inc.
デプロイの手順
94
デプロイ可能な状態だとこのようにボタ
ンが押せるようになる

© 2021 ESM, Inc.
実稼働させる前にチェックしたいこと
95
Core以上のプランでないと実利
用はできない機能は多いので注
意。

© 2021 ESM, Inc.
プラン毎のできる／できないをチェックするには
96
Manage>Plan requirements でどのプランで
ないとデプロイできないか確認できる（ただし
プロトタイプとしては動作する）。

© 2021 ESM, Inc.
チームで利用するには（共同作成）
97
https://help.appsheet.com/en/articles/954445-shared-authoring-of-apps
● アプリのアクセス蹴権限の設定で簡単に実現できる
○ ※ 詳細は下記URLを参照
● ただし、「同時編集」はできない（後で更新したほうで何の警告もなく上書きされる）なので
注意幅

© 2021 ESM, Inc.
ドメインのアカウントだと「My Team」が使える
98
https://help.appsheet.com/en/articles/2615244-working-with-google-team-drive
● Teamにメンバーを招待で
きる
● 現状の嬉しさはこれくら
い？アプリをサンプルとし
てメンバー間に共有できる
● エンタープライズ契約が必
要

© 2021 ESM, Inc.
ちなみに gmail だと
99

© 2021 ESM, Inc.
TeamDriveにリソースを格納する方法
100
My account＞Settings より
[TeamDrive]チームドライブ名/フォ
ルダパス
を設定する。
https://help.appsheet.com/en/articles/2615244-working-with-google-team-drive

© 2021 ESM, Inc.
安定バージョンに固定して公開する方法（有償プランのみ）
101
最新版と安定バージョンへにアクセスす
るユーザーの比率を決めることもできる。
（ユーザーごとに固定することももちろん
可能）

© 2021 ESM, Inc.
AppSheet の得意領域
（あっという間に実現できること）
102

© 2021 ESM, Inc.
「業務デジタル化」においてよく求められる機能と実現方法
103
機能 App Maker での実現方法 AppSheet での実現方法
バーコード読み取り HTML Widget と Quagga.js の組み合わせ
でクライアントサイドで実装
標準機能（Textデータ型を「SCAN可能」に設
定する）
手書き署名 HTML Widget と HTML5 Canvas の組み
合わせでクライアントサイドで実装
標準機能（Signatureデータ型）
CSVエクスポート Serverスクリプト（GAS) にて実装
DriveApp にて
標準機能（「App:export this view to a CSV
file」Action）
チャットに投稿 Serverスクリプト（GAS) にて実装
UrlFetchApp にて Incoming Webhook に
POST
標準機能（Webhook）
OCR 標準機能（OCRTEXT関数）
特に企業において、デジタル化（ DX)案件で求められる機能
（※ 個人の経験による。Google App Maker での実現方法と比較してみた）

© 2021 ESM, Inc.
AppSheetでバーコード読み取り
104
https://www.appsheet.com/samples/Scan-a-barcode-to-find-out-all-the-details-of-an-item?appGuidString=87c05a28-539d-40b8-a
b52-2259ec5bb925
スマホなどで動作させるとここを
タップするとカメラが起動する。ス
キャンはリアルタイムで、高速か
つ高精度！
一次元バーコードだけでなくQR
コードもOK。
※公式サンプルを参照
● 入力項目のバーコードに実際のスキャン結果を取り込む場合
● Text 型のカラムの「SCAN?」をONに設定するだけ
○ 今回はProductテーブルのBarcodeカラムのSCAN？をONに

© 2021 ESM, Inc.
AppSheet で手書き署名
105
https://www.appsheet.com/samples/A-work-order-app-in-which-employees-can-request-repairs-and-fixes?appGuidString=7dab4f
ea-19f8-47c6-b760-8fc435fdf639
スマホで試したところ、指で気持
ちよく署名できた。
※公式サンプルを参照
● Signature型のカラムを作るだけ

© 2021 ESM, Inc.
AppSheet でCSVエクスポート
106
App:export this view to a CSV file を選
択。
● Actionから選ぶだけ
● テーブル単位

© 2021 ESM, Inc.
AppSheet でチャットに投稿
107
Slack 以外のURLでも指定できる。この
例は Google Hangout Chat 。
● Automationの
Webhookから設定
● Presetから「Slack
Hook」を選択し
● UrlやBodyを入力

© 2021 ESM, Inc.
AppSheet でOCR
108
https://www.appsheet.com/samples/How-to-grab-the-text-from-an-image-using-OCR?appGuidString=e6b13b43-6967-4d61-ab72-530c0d000
04b
図形混じりの割と複雑な日本語
入りの画像でも
かなりの精度でテキストを抜き出
してくれる。
※公式サンプルを参照
● ImageとLongTextのカラムを持つテーブルを
作り
● LongTextのINITIAL VALUEに
「OCRTEXT([Imageのカラム名])」を設定する
だけ
● UX（画面）側は特に何もしなくても良い

© 2021 ESM, Inc.
より詳しく知りたい方への情報
● 岡島のブログ
○ AppSheetを使い倒してみた ～ GASで1週間かかったアプリはどの程度で開発できるのか （この資
料の元ネタですがエンジニア視点なので、ややマニアックです）
○ App Makerで開発したアプリをAppSheetに移行する （スプレッドシートでなくてデータベースと接続
してみたいエンジニアの方にお勧め）
○ AppSheetからApigee経由でREST APIを呼び出す
○ AppSheetからGASの関数を呼び出す
● AppSheet 公式
109

© 2021 ESM, Inc.
以上
110