AppSheetを使い倒してみた～ GASで1週間かかったアプリはどの程度で開発できるのか

© Copyright 2020, ESM, Inc.
AppSheetを使い倒してみた
～ GASで1週間かかったアプリはどの程度で開発できるのか
2020/2/7
Agile Studio Fukui
岡島幸男
1

なぜAppSheet？
● AppMakerの終了（2021年1月）に伴い、Googleは「AppSheet等に移行してね」と
言っている。
● AppMakerは実務投入済みで、今後も使える場面では使ったろ！モードだったのに
…。
● 今後 S Suite でアプリ開発する場合はGAS一択になるのか？AppSheet も使える
のか？どのように使い分けると良いのか？などを身をもって知りたい。
2

検証方法（やったこと）
「過去に実際にGASで開発したアプリをAppSheetで一から作り直してみる」
評価観点（定性評価）
● 機能性～どの程度複雑な機能まで作ることができるのか
● 開発効率～どの程度のスピードで完成させられるか
● 開発の容易さ～非エンジニアでも使いこなせるか
● ワクワク感～今までと違う開発の楽しさはあるか
3

対象アプリ
● 利用者
○ 卸売り
● 利用シーン
○ 展示会で小売り業者にタブレットで商品イメージを見せつつ、その場で注文を取る。そのまま注文
書を印刷し、署名してもらうことで商談成立。
● 開発期間
○ GASでのコーディングとテストで 1週間（その前の仕様確定に 1週間程度）
● 利用技術
○ GAS（Web）
○ HTML ＋ JQuery
○ データベース代わりに Googleスプレッドシート
● その他
○ 今までは紙ベース運用だった。効率アップと「目新しさ・スマートさ」を出すためにもタブレットを展示
会に持ち込んでの運用に変えたい
4

画面のイメージ（※実際にGASで開発したもの）
5
社名ロゴ
商品画像

注文書のイメージ（※実際にGASで開発したもの）
6

フィーチャー（機能面）
1. 利用者（卸売り）は、お客様（小売り）に、直接画像を見せて商品を選んでいただく（操作
は卸売りが行い、適宜画面を小売りに見せる想定）
2. 商品は複数まとめて注文できる（注文と注文明細にわかれる。各注文明細ごとに、商品
とその注文数がある）
3. 注文単位で注文書（PDF）を作成できる
4. 商品には二種類の納期（在庫数ベースで自動判別する”OK” or “NG” または、入荷目安
時期の文言）があり、利用者は注文時にいずれかを選ぶことができる（選んだ納期が注
文書に表示される）
5. 商品を注文すると在庫はその分減り、在庫が規定数を下回ると、その商品を表示する際
に赤く表示する。ただし、在庫が0を切っても注文できる
6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商
品コードで絞り込むこともできるようにする
7. 注文書に商品単価を表示するかどうかを選択することができる
7

フィーチャー（非機能面）
1. データ（商品、顧客、注文等）はスプレッドシートに格納する。データのメンテナンス
はスプレッドシートを直接操作する
2. 展示会には複数の担当者が参加するため、アプリを同時に利用してもデータに不
整合が発生しないようにする
3. 注文書は展示会場のプリンタで印刷できるようにすること（Googleドライブに格納
やメールで添付などの手段で利用者が扱えるようにする）
8

データのイメージ
● 商品
○ 品番、カテゴリ、色、商品画像、卸値（税別）、卸値（税込）、売値（税別）、売値（税込）、納期 1（現在
個数による自動判別）、納期 2（任意の文言）、初期在庫数、現在庫数
● 顧客
○ 顧客名、メールアドレス、地域
● 注文
○ 注文日、顧客、備考
● 注文明細
○ 商品、注文数、金額（税別の売値 ×注文数）、納期（商品の「納期 1」または「納期2」）
9

検証する前に試してみた
10

開発の始め方は3つ
11
詳細は公式を参照してください。簡単です。
データ（スプレッドシート
等）から作り始める
※便宜上「ボトムアップ方
式」と呼びます
サンプルをコピーして改
造する
※本資料では割愛します
が、大量の実用サンプル
があります
やりたいことを Spec とし
て入力してベースを作る
※ 便宜上「トップダウン
方式」と呼びます

やりたいことを Spec として入力してベースを作る
12
データの種類を単語で入力すると、候補が提案される
よく使われる単語はあらかじめ準備されているっぽい。
（例：Orders,Products,Customers など）

13
この段階でイメージが表示され
る。実際に操作もできる
さらにやりたいこと（ Spec）を追加
していける

14
可能性のあるSpec候補を提案し
てくれる

15
注文（Orders）は、明細（Line
Items）を複数持つ、という Specを
選んだだけで、ここまでやってくれる

16
Spec はグラフィカルに見るこ
ともできる
データを右クリックすると、
追加できるSpecが一覧表
示される

17
利用可能なよくある動詞を提案してくれるので、ある程度
適当に入力しても先に進めることができる

18
操作に慣れればこの程度までは 1分で作ることができる。
ここをクリックして、本格的な開発をスタート

19
本格開発は、エディター (開
発環境）にて
Data、UX（画面）、Behavior（アクショ
ンやワークフロー）を設定することで開
発する（ノーコード）

「やりたいことを Spec として入力してベースを作る」補足
● 項目（Property）の追加はSpecとしてできる
○ 項目の型（TextとかTimeとか）は項目名からある程度推測して付けてくれる
○ 型の変更などのカスタマイズは、エディタにて行う必要あり
● 画面のカスタマイズはできない
○ カスタマイズはエディタを使う
20
現時点では、プロトタイプを開発するための方法だと考えたほうが良い。仕上げはエディタにて行う。
※ 非常に効率よく作っては壊しができるので、効率は素晴らしい。

エディタでの開発基礎
21

データのカスタマイズから始める
22
Specから作り始めた場合は、テーブル毎に
スプレッドシートが作成される。（例： 3テーブ
ルの場合は3つのスプレッドシートがドライブ
に作成される）

カラムレイアウトを変更したい場合
23
②スプレッドシートにカラムを追
加したり削除した後にここをクリッ
ク
①ソースとなるスプレッドシートが表示
されるので

ソースとなるスプレッドシート
24

カラムレイアウトを変更したい場合
25
②スプレッドシートにカラムを追
加したり削除した後にここをクリッ
ク
①ソースとなるスプレッドシートが表示
されるので

Table 間の関連について
26
①Productテーブルへの参照（Ref）は、
「a Product has many Line Items」Specに
よって生成すると
例えば、Line Item（注文明細）とProduct の関連の場合
②Product Tableの「Key」カラムへの参照を持
つ形のレイアウトが自動的に作成されている

バーチャルカラム＃１
27
導出項目（計算で求められる項目）
や、他のデータに対する参照（例：注
文と注文明細）は、バーチャルカラムと
して定義できる
①参照（Ref）されているTableの項目
へは、[Product].[Price]などでアクセス
できるので…（次ページ続く）

バーチャルカラム＃２
28
②例えば、注文明細あたりの金額トータ
ルは、バーチャルカラムのFormula に計
算式をこのように書ける
Formulaには他にも様々な関数が利
用できる（スプレッドシートの関数イ
メージ）

テーブル関連とバーチャルカラムについて注意＃１
29
Order（注文）と Line Item （注文明細）の場合
①注文の新規作成時に注文明細を追
加できるようなUXにしたい場合
③明細側のカラムの「Is a part of」オ
プションを「ON」にすれば良い
（デフォルトはOFF）
②わかりにくいがク
リックできる

テーブル関連とバーチャルカラムについて注意＃２
30
Order（注文）と Line Item （注文明細）の場合
④そうすることでSpec（エディタからは
「Info」から閲覧可能）も変わっている
ことが確認できる

テーブル関連とバーチャルカラムについて注意＃３
31
ハマったポイント（※ 将来的には改善される可能性もあるし、私の環境だけかもしれないのですが）
● 明細の「Is a part of」を「ON」にしても、UXに明細追加が反映されない
○ ちなみにトップダウン方式で「Is a part of」は、Spec として入力できない
● トップダウンで入力したSpecである「Order has many Line Items」によりOrder側に自
動的に作成されるバーチャルカラムを、一旦削除する必要がある。
● そうすると、自動的に「Related ...」バーチャルカラムが作成され、UXに明細追加が可
能となる。

UX（画面）をカスタマイズする
32
Data毎に、様々なUXパターンが簡単
に切り替えできる
表示順や表示する項目のカスタマイズも
可能なのでいろいろ試してみよう

注意点
● AppSheet は完全に「データありき」な仕組みであることを理解する
○ Data（Column）に存在しない項目を画面に表示することはできない
○ UX（画面）に表示する項目の順序は Column定義の並びに依存する。変更したかったら、 Column
定義から順序を変える必要がある
○ バーチャルカラムは、通常のカラムの後に並ぶ。そのため、画面上に通常カラムより前にバーチャ
ルカラムを並べることはできない ⇒ 導出項目はバーチャルでなくて通常カラムとしても実現できる
ので、導出項目用のカラムをスプレッドシートに定義して、そのカラムに Formulaを書くことで対応で
きる
33
現時点では、プロトタイプを開発するための方法だと考えたほうが良い。仕上げはエディタにて行う。
※ 非常に効率よく作っては壊しができるので、効率は素晴らしい。

実際に注文アプリを開発してみる
34

そもそも、どの方式が良いか？
● ①トップダウン、②ボトムアップ、③サンプルからのコピー＆カスタマイズ、それぞれ
良し悪しはある
● 今回は「ボトムアップ」方式を採用
○ すでにお客様が作られていたスプレッドシートが存在しているのが一番の理由 ※ 過去にGASで開
発したアプリも同様のアプローチであった
35
ちなみに「Order Capture」という、今回作りたいものにドンピシャなサンプルアプリがありますが、検証の趣旨からし
て、そこからのカスタマイズは行いませんでした。実務では、サンプルからコピーして改造するのが一番効率良いか
もしれません。

やったこと
1. スプレッドシートでテーブル設計
36
Orders
Order Details
Customers
Items
これらは最終形で、実際には適宜項
目を追加したり変更したり
カラム名は、もともとのお客様シートの
ものをそのまま使っているのが多い

（補足）導出項目について
37
スプレッドシートの機能で実現できる導出項目は、スプレッドシートの関数を利用
AppSheetの機能（Formula）でも可能だが、「お客様はスプレッドシートでもメンテナンスしたい」というフィーチャー
を満たすためにそうした

スプレッドシートを取り込む
38

テーブル間の関連を作成
「エディタでの開発基礎」にあるように、テーブル間を項目間の参照（Ref）と、バーチャル
カラムと、「Is a part of｣設定による結び付けを行う。
39
ちなみに、Order Detail からOrderへの参照（Ref）の「Required」を「Off」
に設定すると、Spec が「can be made of」となる。

この段階で実現できたフィーチャー
40
標準
機能！

見栄え・使い勝手をカスタマイズする
41

DataのSliceを使ってデータを絞り込む
42
Itemテーブルのcategoryが”EModel”であるデータに絞り込ん
だSliceを作成
カテゴリは3つなので、Sliceも3種類作成した。作成したSlice
は、UX（画面）から選択できるようになる

FormatRulesで条件に応じて見栄えに変化を与える
43
itemsの在庫数(current_stock)が1を切った場合は、code
のフォーマットを変更する。というルールを設定する

FormatRulesで条件に応じて見栄えに変化を与える
44
文字色を「red」に変える

45

ワークフローでPDF帳票を作成する
46

Workflow でできること
47
● メールやSMSにWebhook、シンプルにドライブ等にファイルを作成するなど
● PDFはSave File やメールの添付ファイルとして実現できる
● ⇒ 今回はメールへの添付ファイルとすることを選択

当然Workflowもデータ駆動
48
OrderテーブルをTargetに
今回は「更新があった場合
のみ」を線タック

帳票テンプレートはGoogleDocsで作る
49
<<[項目名]>>でバインディングできる。
バインドできるのは、「Target data」（ここでは
Order）に指定したテーブルの項目のみ
参照（Ref）しているカラムも
<<[項目名].[参照先項目名]>> で参照できる
<<Start:[]>> と <<End>> で、
Listとして参照しているデータ（ここでは注文明
細）を、全件順次参照できる

50
<<If:[]>><<EndIf>により条件分
岐もできる。

51

Workflow の起動方法（注意点＃１）
52
ここをタップしたときにPDF添付
メール送信（＝Workflow起動）を
行う
● Workflowはデータが追加や更新された時に起動される
● なので「OrderテーブルにADDされた（ADDS_ONLY）」イ
ベントで起動する設定で良いはず
● なのだが、実際には注文明細部分が表示されないPDFが
生成されてしまった
● おそらく、「注文はスプレッドシートに更新されたが、注文
明細はまだ更新されて無い状態でPDFが生成されてしま
うから」だと思われる（※ 違うかもしれないし、回避策があるのかもし
れない）
● なので、「Orderテーブルが更新された
（UPDATE_ONLY）」イベントで起動する設定として（※次
ページ続く）

Workflow の起動方法（注意点＃２）
53
ここをタップしたときにPDF添付
メール送信（＝Workflow起動）を
行う
● ダミー的に「sheet_created_at」カラムを追加し
● Actionに「Create Order Sheet」を追加
「項目に値をセットするAction」
で、カラムに現在時刻をセットす
るように設定

Workflow の起動方法（注意点＃３）
54
● OrdersのActionsに、先ほど作成した「Create Order Sheet」を追加
①ここに追加したアクションが
（※ Delete は標準のアクション）
②ここにタップできるアイコンとし
て表示される
（※アイコンは選べる）

55

その他細かなUXについて
56

注文書をまだ作成していないことを知らせたい
57
注文書がまだ一度も作成されて
いない場合の注意喚起
● 今回作ったAppSheet版は何度でも注文書を作成できる
○ なんらかエラーが発生した場合でも安心
○ 再作成は、もともとのGAS版には存在しない機能（GAS版
は注文追加時に自動的に注文書を作成し、再作成はできな
い）
○ 「一度も注文書を作成していない」状態もありうるので、ユー
ザーに注意喚起する機能が欲しくなった
● カラムのFormulaとFormatRulesを利用して実現している
○ FormatRulesは文字色を変えるだけでなくアイコンを付与で
きる一度もシートが作成されていない
（sheet_created_atがブランク）の場合は
「未」と表示させる

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

評価結果
59

結果
60
観点評価
機能性 1アプリのみでの評価ではあるが、お客様がやりたかったことは全て実現できた。よほど細かな機能要件で無い
限り、大抵の業務系モバイルアプリは実現できるように思える。（サンプルも豊富で大概はそのカスタマイズで対
応できそう）
※ 時間の関係で、一部オリジナルのGAS版にあった「顧客が国内か海外かに応じて帳票を日英切り替える」機
能を実現しなかったが、実現できることはわかっている。おそらく1時間もかからないであろう。
開発効率仕様がFixした状態であったこともあり、AppSheetの使い方の習得を含め、2～3日程度で仕上げることができ
た。再度同じものを作れと言われたら数時間で終わるかと思う。仕様の変更も基本的は設定またはスプレッド
シートの変更とその取込直しで済むので気楽にできる。
開発の容
易さ
エンジニアならすぐに習得できる。非エンジニアの方でも、アプリ開発に関心・情熱のある方であれば習得でき
るかと思う。ただ、ノーコードといいつつも、Formulaに関数をセットしたり、帳票テンプレートに条件分岐を埋め
込んだりと、ある程度のプログラミング経験（VBAとかGAS）がないと厳しいかもしれない。
ワクワク
感
今回は利用しなかったが、Specを積み重ねる方式には将来性を感じ、楽しさを感じる。今は限られたものを組
み合わせる形だが、利用できる主語や述語が増えることで、完全なノーコードに近づくのではないか。

補足・所感
61
● 非機能面について
● Freeプランということもあり実際のタブレットでは試しておらず、性能や同時更新時の扱いは検証しき
れなかった。AppSheetのアプリはUX側で更新されたデータを非同期にデータソース（スプレッドシート
等）とSyncする方式となっている。（更新がストックされ、順次サーバーと同期されるようだ）
● 「利用者によるアプリケーション開発（純粋な内製開発）」の可能性
● 全ての人が可能だとは思えないが、 App MakerやGASに比べると各段に敷居は低い
● ただし、Excel関数やVBAなどで、何等かプログラミングに近い経験をしていないと習得に相当の時間
はかかりそう。でも、「これは面白い！」という気持ちがあればなんとかなるレベル
● 「エンジニアが利用者の代わりに使うツール」としてどうか
● できることが限られているため、利用者に対して「ツールの制限でできません」ということが増えそう。
ただ、発想しだいでより使いやすい UXを提案できる可能性はある。まさに「不自由は自由」
● GASどころか、App Makerとも比較にならないぐらいポータビリティはないため、請け負ったとしてもや
すやすと保守はできないかと
● やはり、利用者自身が自由にアイディアをふくらましながら「お、これでいいやん！これで十分運用で
きる」という感覚で使うのが良いかと。

以上
62

AppSheetを使い倒してみた～ GASで1週間かかったアプリはどの程度で開発できるのか

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie AppSheetを使い倒してみた～ GASで1週間かかったアプリはどの程度で開発できるのか

Ähnlich wie AppSheetを使い倒してみた～ GASで1週間かかったアプリはどの程度で開発できるのか (20)

Mehr von Yukio Okajima

Mehr von Yukio Okajima (16)