Mais conteúdo relacionado
Semelhante a 60分でAppSheetを理解する (7)
Mais de Yukio Okajima (16)
60分で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やドメインで共
有対象を追加できる。
- 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
現時点では、ベースを作るための方法だと考えたほうが良い。仕上げはエディタにて行う。
※ 非常に素早く作っては壊しができるので、効率は素晴らしい。
- 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)の実体を見てみよう #1
23
Data>Storageを覗く
と、Sourece Id という項
目がある。これがOrder
Tableの実体となるスプ
レッドシートのId。
- 24. © 2020 ESM, Inc.
Data(Table)の実体を見てみよう #2
24
クリックするとスプレッドシートが
開く。
- 25. © 2020 ESM, Inc.
ソースとなるスプレッドシートを確認しよう
25
サンプルのデータがあらかじめ
入っている。
Specから作り始めた場合は、テーブル毎にスプレッドシートが
作成される(例:4テーブルの場合は4つのスプレッドシートがド
ライブに作成される)。
先頭行はカラム名。
- 26. © 2020 ESM, Inc.
テーブル定義を変更してみよう #1
26
①カラム変更用のタブに切
り替え
- 27. © 2020 ESM, Inc.
テーブル定義を変更してみよう #2
27
②Date列をシートに
追加
- 28. © 2020 ESM, Inc.
テーブル定義を変更してみよう #3
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.
バーチャルカラムで導出項目を定義してみよう #1
30
● 導出項目(計算で求められる項目)や、他の
テーブルに対する参照は、バーチャルカラム
として定義できる。
● バーチャルカラムの定義はAppSheetに保存
され、ソース(今回の場合はスプレッドシート)
には、反映されない。
● バーチャルカラムに関しては、
https://help.appsheet.com/en/articles/919
891-virtual-columns などがわかりやすい。
- 31. © 2020 ESM, Inc.
バーチャルカラムで導出項目を定義してみよう #2
31
例えば、注文明細(Line Item)あたりの金額トータルは、注文
(Order)テーブルのバーチャルカラムの App formula にこのよう
に書ける。
※ 参照(Ref)しているTableの項目へは、[Product].[Price]等の
記法でアクセスできる。
- 32. © 2020 ESM, Inc.
バーチャルカラムで導出項目を定義してみよう #3
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 間の関連を理解する #1
33
例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合
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 間の関連を理解する #2
34
例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合
Order
Line Item
Line Item
Line Item
● Order テーブルに対する参照(Ref)をOrderカラムとして保持
● Order テーブルのKeyカラムにて結びつく
Line Item テーブル
「注文明細は注文の一部」にし
たい場合はONに設定する必要
がある(※後述)。
詳細画面
- 35. © 2020 ESM, Inc.
Table 間の関連を理解する #3
35
①注文の新規作成と同時に注文明細
を追加できるようなUXにしたい場合
(デフォルトでは「ADD」が表示されな
い。
②詳細画面を開い
て
例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合
③明細側のカラムの「Is a part of」オ
プションを「ON」にする。
(デフォルトはOFF)
- 36. © 2020 ESM, Inc.
Table 間の関連を理解する #4
36
④そうすることでSpecも変わっていることが
確認できる(エディタからは「Info」>「Spec」
で閲覧可能)。
※ 変わらないときはブラウザリロード
例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合
- 37. © 2020 ESM, Inc.
Table 間の関連を理解する #5
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
- 41. © 2020 ESM, Inc.
どのようなアプリか
● 利用者
○ 卸売り
● 利用シーン
○ 展示会で小売り業者にタブレットで商品イメージを見せつつ、その場で注文を取る。そのまま注文
書を印刷し、署名してもらうことで商談成立
● その他
○ 今までは紙の注文書による運用だった。効率アップと「目新しさ・スマートさ」を出すためにもタブレッ
トを展示会に持ち込んでの運用に変えたい
41
過去に私がGASで開発したWebアプリとほぼ同等の機能を持つ AppSheetアプリを作ってみようという趣旨です(機
能は簡略化しています)。
- 42. © 2020 ESM, Inc.
画面のイメージ(※実際にGASで開発したもの)
42
社名ロゴ
商品画像
- 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.
スプレッドシートを取り込んでテーブルを作成する #1
48
一つのテーブルだけが取り込まれるので(おそらく一番左にあるシート) …
google を選択
(database-1は私の環境で追加した
データソース)
- 49. © 2020 ESM, Inc.
スプレッドシートを取り込んでテーブルを作成する #2
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.
導出項目を設定する #1
52
注文明細(order_details)に、注文数に応じた総額を出すためのバーチャルカラム「 total_price」を追加する。
注文明細の注文数( quantity)× 注文明
細から参照する items の price。
- 53. © 2020 ESM, Inc.
導出項目を設定する #2
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を整える #1
各項目を画面に表示する/しない(SHOW?)や、操作可能/不可能(EDITABLE?)、必
須かどうか(REQUIRE?)、表示名(DISPLAY NAME)などを設定する。
55
- 56. © 2020 ESM, Inc.
UXを整える #2
メニューへの表示の仕方を調整する。
56
「UX>Views>PRIMARY VIEWS」の該当のView
のViewTypeを選択し、「VIEW OPTIONS」
で詳細(表示する項目や順番)を設定。
- 57. © 2020 ESM, Inc.
UXを整える #3
orders に埋め込まれている(インラインの)order details のUXはどこで変更するのか?
57
UX>Views
なんか変
もし表示されてない場合は、
「Show system views」をクリッ
クする。
- 58. © 2020 ESM, Inc.
UXを整える #4
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
- 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で条件に応じて見栄えに変化を与える #1
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で条件に応じて見栄えに変化を与える #2
66
文字色を「red」に変える。
「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下でも注文できる」を実現する。
- 67. © 2020 ESM, Inc.
Format Rulesで条件に応じて見栄えに変化を与える #3
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
- 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を手動で起動する #1
73
ここをタップしたときにPDF添付
メール送信(=Workflow起動)を
行いたい。
● 注文書の再発行も必要だろうから、「orderが追加された
場合に自動メール」ではなく、「ボタンタップしたらメール」
のほうが便利そう
● Workflowはデータ駆動なので、ボタンがタップされたこと
に反応してデータを更新する仕掛け(Action)が必要
UX
(画面)
タップ
テーブルAction起動
更新
ワークフロー
更新
検知
起動
- 74. © 2020 ESM, Inc.
Workflowを手動で起動する #2
74
● (実は)ordersテーブルの「sheet_created_at」カラムはそのためにある
● 「ordersテーブルのsheet_created_atカラムを現在日時で更新する」Actionを作成する
(「Create Order Sheet」と名付けた)
「項目に値をセットするAction」で、カラムに現
在日時をセットするように設定。
- 75. © 2020 ESM, Inc.
Workflowを手動で起動する #3
75
● ordersのVIEW OPTIONSに、先ほど作成した「 Create Order Sheet」をActionとして指定する
①ここに追加したアクションが
(※ Delete は標準のアクション)
②ここにタップできるアイコンとし
て表示される
(※アイコン絵柄は選べる)
- 76. © 2020 ESM, Inc.
Workflowを手動で起動する #4
76
OrderテーブルをTargetに
「更新があった場合のみ」を選択
Workflow の設定
- 77. © 2020 ESM, Inc.
帳票テンプレートはGoogleDocsで作る #1
77
テンプレートとなるGoogleド
キュメントを指定
- 78. © 2020 ESM, Inc.
帳票テンプレートはGoogleDocsで作る #2
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で作る #3
79
今回のサンプルでは利用していませんが、 <<If:[]>> <<EndIf> を使った条件分岐も実現できます。
- 82. © 2020 ESM, Inc.
この段階で実現できたフィーチャー
1. 利用者(卸売り)は、お客様(小売り)に、直接画像を見せて商品を選んでいただく(操作
は卸売りが行い、適宜画面を小売りに見せる想定)
2. 商品は複数まとめて注文できる(注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある)
3. 納期(出荷可否)は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま
たは2の場合は「要確認」を、それより多い場合は「OK」を表示
4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で
も注文できる
5. 注文単位で注文書(PDF)を作成できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. データ(商品、顧客、注文等)はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
82
- 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にメンバーを招待で
きる
● 現状の嬉しさはこれくら
い?アプリをサンプルとし
てメンバー間に共有できる
● エンタープライズ契約が必
要
- 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