主にソフトウェアの開発経験のある方向けに、Google のノーコードツールである AppSheet を短時間でざっくり理解いただくための資料です。

1. © 2020 ESM, Inc.
60分でAppSheetを理解する
2020年10月27日
永和システムマネジメント
岡島 幸男（@okajima_yukio)
1

2. © 2020 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

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

4. © 2020 ESM, Inc.
AppSheet のライセンスモデル
● 代表的な有償プランは3つ
○ これら以外にパブリック向けの利用（ for apps used at a public event, a public survey, a city
guide, or a restaurant menu. ）に限定する「public Publisher Pro」がある
○ https://help.appsheet.com/en/articles/969649-how-to-choose-a-subscription-plan
○ Cloud SQL等のデータベースを利用する場合は Businessプランが必要なので注意
○ エンタープライズ向けの「 Enterprize（個別問い合わせ）」の扱い（ Businessとの違い）については良
くわからない…。
4

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

6. © 2020 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やドメインで共
有対象を追加できる。

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

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

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

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

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

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

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

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

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

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

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

18. © 2020 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
現時点では、ベースを作るための方法だと考えたほうが良い。仕上げはエディタにて行う。
※ 非常に素早く作っては壊しができるので、効率は素晴らしい。

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

20. © 2020 ESM, Inc.
その前に
20

21. © 2020 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と同様の
考え方。
表示対象を
指定する

22. © 2020 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も含まれるがここでは割愛した。なおWorkflowは
Dataの追加や変更で発火し、メールやWebhookなどの処理を起動できるが、
その一つの「Change Data」ではActionを指定することができる。

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

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

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

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

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

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

29. © 2020 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

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

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

32. © 2020 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

33. © 2020 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 テーブル
詳細画面
クリックすると詳細画面が
開く

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

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

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

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

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

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

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

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

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

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

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

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

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

47. © 2020 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）に含まれる注文数を
引いたもの。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

65. © 2020 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以下でも注文できる」を実現する。

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

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

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

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

70. © 2020 ESM, Inc.
ワークフローでPDF帳票を作成する
70

71. © 2020 ESM, Inc.
Workflowでできること
71
● メールやSMSにWebhook、Googleドライブにファイルを作成するなど
● PDF帳票はSave File やメールの添付ファイルとして実現できるが、今回はメール添付ファイルとすることに
● 詳細は、https://help.appsheet.com/en/collections/378226-behavior#workflow-introduction

72. © 2020 ESM, Inc.
Workflowもデータ駆動
72
Targetとなるテーブルを選
択する。
Workflow開始のトリガーとなるイベントを選択
する。

73. © 2020 ESM, Inc.
Workflowを手動で起動する ＃１
73
ここをタップしたときにPDF添付
メール送信（＝Workflow起動）を
行いたい。
● 注文書の再発行も必要だろうから、「orderが追加された
場合に自動メール」ではなく、「ボタンタップしたらメール」
のほうが便利そう
● Workflowはデータ駆動なので、ボタンがタップされたこと
に反応してデータを更新する仕掛け（Action)が必要
UX
（画面）
タップ
テーブルAction起動
更新
ワークフロー
更新
検知
起動

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

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

76. © 2020 ESM, Inc.
Workflowを手動で起動する ＃４
76
OrderテーブルをTargetに
「更新があった場合のみ」を選択
Workflow の設定

77. © 2020 ESM, Inc.
帳票テンプレートはGoogleDocsで作る ＃１
77
テンプレートとなるGoogleド
キュメントを指定

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

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

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

81. © 2020 ESM, Inc.
Workflowのデバッグ
81
Log をクリック

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

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

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

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

86. © 2020 ESM, Inc.
実稼働させる前にチェックしたいこと
86
Pro以上のプランでないと実利用
はできないことが多いので確認
が必要（ただしプロトタイプとして
は動作する）

87. © 2020 ESM, Inc.
プラン毎のできる／できないをチェックするには
87
Manage>Plan requirements でどのプランで
ないとデプロイできないか確認できる（ただし
プロトタイプとしては動作する）。例えばDB利
用は、Businessのみ許可されていることがわ
かる。

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

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

90. © 2020 ESM, Inc.
ちなみに gmail だと
90

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

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

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

94. © 2020 ESM, Inc.
「業務デジタル化」においてよく求められる機能と実現方法
94
機能 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｣Workflow）
OCR 標準機能（OCRTEXT関数）
特に企業において、デジタル化（ DX)案件で求められる機能
（※ 個人の経験による。Google App Maker での実現方法と比較してみた）

95. © 2020 ESM, Inc.
AppSheetでバーコード読み取り
95
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に

96. © 2020 ESM, Inc.
AppSheet で手書き署名
96
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型のカラムを作るだけ

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

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

99. © 2020 ESM, Inc.
AppSheet でOCR
99
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（画面）側は特に何もしなくても良い

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

101. © 2020 ESM, Inc.
以上
101