Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

60分でAppSheetを理解する

1,294 views

Published on

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

Published in: Software
  • Be the first to comment

60分でAppSheetを理解する

  1. 1. © 2020 ESM, Inc. 60分でAppSheetを理解する 2020年10月27日 永和システムマネジメント 岡島 幸男(@okajima_yukio) 1
  2. 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. 3. © 2020 ESM, Inc. AppSheet の使いどころ ● 企業内で利用するアプリ。業務効率化を目的としたもの ● 今は亡きAppMaker(や 今も健在なkintoneやPowerApps)と同じ領域だと思って 間違いはない ● iOSやAndroidにネイティブアプリとしてインストールできるのでわかりやすく、モバ イル親和性が高い(もちろんPCでも利用できる) 3
  4. 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. 5. © 2020 ESM, Inc. Google Cloud ファミリーの一員として ● Google Workspace (旧G Suite)の、Enterprise エディションだと、追加料金なしで AppSheetが利用できる(っぽい) https://workspace.google.co.jp/intl/ja/pricing.html より 5
  6. 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. 7. © 2020 ESM, Inc. AppSheetに触れてみよう 7
  8. 8. © 2020 ESM, Inc. アプリの作り方は3通り 8 データ(スプレッドシート 等)から作り始める ※ 既存のデータを活用し たい場合に サンプルをコピーして改 造する ※大量の実用サンプル あり。実務ではこれが一 番近道かも やりたいことを Spec とし て入力してベースを作る ※ データがまだ無く、ゼ ロから作る場合に
  9. 9. © 2020 ESM, Inc. 今回は「Start with an idea」をやってみよう 9 アプリで扱いたいデータを単語で入力すると、候補が提案 されるのでやりたいことを選択する。よく使われる単語や Specはあらかじめ準備されている。 (例:Orders,Products,Customers など) ここでは、注文アプリが欲しいので「 orders」を入力する。
  10. 10. © 2020 ESM, Inc. やりたいこと(Spec)を次々と入力する 10 この段階でイメージが表示され る。実際に操作もできる。 さらにやりたいこと( Spec)を追加 していける。
  11. 11. © 2020 ESM, Inc. やりたいこと(Spec)を次々と入力する 11 ここでは items と入力。 すると、Spec候補をいくつか提案してくれ る。一番やりたいことにマッチする項目を選 択する。
  12. 12. © 2020 ESM, Inc. やりたいこと(Spec)を次々と入力する 12 注文(Orders)は、明細(Line Items)を複数持つ、という Specを 選んだだけで、ここまでやってくれ る。
  13. 13. © 2020 ESM, Inc. ここまでのSpecの状況を確認する 13 Spec はグラフィカルに見るこ ともできる。 関係性をわかりやすく表示 してくれる。
  14. 14. © 2020 ESM, Inc. やりたいこと(Spec)を次々と入力する 14 データを右クリックすると、追加できる Specが一覧表示されるので、ここか らやりたいSpecを追加することもでき る。こちらのほうが分かりやすくおす すめ。
  15. 15. © 2020 ESM, Inc. 困ったときは 15 利用可能なよくある動詞を提案してくれるので、ある程度 適当に入力しても先に進めることができる。
  16. 16. © 2020 ESM, Inc. 一通りSpecの入力を完成させる 16 慣れればこの程度までは 1分で作ることができ る。「Save & Refine」クリックして、仕上げをス タート。
  17. 17. © 2020 ESM, Inc. 仕上げにはエディタを使う 17 「Save & Refine」をクリック しばらく待つとエディタが起 動してくる。
  18. 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. 19. © 2020 ESM, Inc. エディタを使って仕上げる 19
  20. 20. © 2020 ESM, Inc. その前に 20
  21. 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. 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. 23. © 2020 ESM, Inc. Data(Table)の実体を見てみよう #1 23 Data>Storageを覗く と、Sourece Id という項 目がある。これがOrder Tableの実体となるスプ レッドシートのId。
  24. 24. © 2020 ESM, Inc. Data(Table)の実体を見てみよう #2 24 クリックするとスプレッドシートが 開く。
  25. 25. © 2020 ESM, Inc. ソースとなるスプレッドシートを確認しよう 25 サンプルのデータがあらかじめ 入っている。 Specから作り始めた場合は、テーブル毎にスプレッドシートが 作成される(例:4テーブルの場合は4つのスプレッドシートがド ライブに作成される)。 先頭行はカラム名。
  26. 26. © 2020 ESM, Inc. テーブル定義を変更してみよう #1 26 ①カラム変更用のタブに切 り替え
  27. 27. © 2020 ESM, Inc. テーブル定義を変更してみよう #2 27 ②Date列をシートに 追加
  28. 28. © 2020 ESM, Inc. テーブル定義を変更してみよう #3 28 ③スプレッドシートに列を追加した後にこ こをクリックする。 ※ ソースはあくまでスプレッドシートなの で、変更は、スプレッドシート⇒AppSheet のTableとなる。 ④Dateカラムが追加された TYPE(型)も、Dateじゃないか と推測されている。
  29. 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. 30. © 2020 ESM, Inc. バーチャルカラムで導出項目を定義してみよう #1 30 ● 導出項目(計算で求められる項目)や、他の テーブルに対する参照は、バーチャルカラム として定義できる。 ● バーチャルカラムの定義はAppSheetに保存 され、ソース(今回の場合はスプレッドシート) には、反映されない。 ● バーチャルカラムに関しては、 https://help.appsheet.com/en/articles/919 891-virtual-columns などがわかりやすい。
  31. 31. © 2020 ESM, Inc. バーチャルカラムで導出項目を定義してみよう #2 31 例えば、注文明細(Line Item)あたりの金額トータルは、注文 (Order)テーブルのバーチャルカラムの App formula にこのよう に書ける。 ※ 参照(Ref)しているTableの項目へは、[Product].[Price]等の 記法でアクセスできる。
  32. 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. 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. 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. 35. © 2020 ESM, Inc. Table 間の関連を理解する #3 35 ①注文の新規作成と同時に注文明細 を追加できるようなUXにしたい場合 (デフォルトでは「ADD」が表示されな い。 ②詳細画面を開い て 例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合 ③明細側のカラムの「Is a part of」オ プションを「ON」にする。 (デフォルトはOFF)
  36. 36. © 2020 ESM, Inc. Table 間の関連を理解する #4 36 ④そうすることでSpecも変わっていることが 確認できる(エディタからは「Info」>「Spec」 で閲覧可能)。 ※ 変わらないときはブラウザリロード 例えば、Order(注文)と Line Item(注文明細) の1対多関連の場合
  37. 37. © 2020 ESM, Inc. Table 間の関連を理解する #5 37 ①Line Item からProductへの参照(Ref)は ソースとなるスプレッドシートはどうなっているのか?例えば、Line Item (注文明細)とProduct(商品) の関連の場合 ②Line Itemテーブルに、Product テーブルの 「Key」カラムへの参照用項目がスプレッドシート に作成されることで実現されている。
  38. 38. © 2020 ESM, Inc. UX(画面)をカスタマイズしてみよう 38 Data毎に、様々なUXタイプに簡単に 切り替えできる。 表示順や表示する項目のカスタマイズ も可能なのでいろいろ試してみよう。
  39. 39. © 2020 ESM, Inc. 注意点 ● AppSheet は完全に「データありき」な仕組みであることを理解する ○ 基本、Data(Column)に存在しない項目を画面の好きな場所に表示することはできない ■ もちろんバーチャルカラムを使えば固定の文字列を出すことは可能だが … ○ 項目の表示順は「Column Order」で設定できる(2020年8月ごろ追加された) 39
  40. 40. © 2020 ESM, Inc. 実用的なアプリを作ってみよう 40
  41. 41. © 2020 ESM, Inc. どのようなアプリか ● 利用者 ○ 卸売り ● 利用シーン ○ 展示会で小売り業者にタブレットで商品イメージを見せつつ、その場で注文を取る。そのまま注文 書を印刷し、署名してもらうことで商談成立 ● その他 ○ 今までは紙の注文書による運用だった。効率アップと「目新しさ・スマートさ」を出すためにもタブレッ トを展示会に持ち込んでの運用に変えたい 41 過去に私がGASで開発したWebアプリとほぼ同等の機能を持つ AppSheetアプリを作ってみようという趣旨です(機 能は簡略化しています)。
  42. 42. © 2020 ESM, Inc. 画面のイメージ(※実際にGASで開発したもの) 42 社名ロゴ 商品画像
  43. 43. © 2020 ESM, Inc. 注文書のイメージ(※実際にGASで開発したもの) 43
  44. 44. © 2020 ESM, Inc. フィーチャー (やりたいこと) 1. 利用者(卸売り)は、お客様(小売り)に、直接画像を見せて商品を選んでいただく(操作 は卸売りが行い、適宜画面を小売りに見せる想定) 2. 商品は複数まとめて注文できる(注文と注文明細にわかれる。各注文明細ごとに、商品 とその注文数がある) 3. 納期(出荷可否)は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま たは2の場合は「要確認」を、それより多い場合は「OK」を表示 4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で も注文できる 5. 注文単位で注文書(PDF)を作成できる 6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商 品コードで絞り込むこともできるようにする 7. データ(商品、顧客、注文等)はスプレッドシートに格納する。データのメンテナンス はスプレッドシートを直接操作する 44
  45. 45. © 2020 ESM, Inc. どの方式で作るか ● 今回は「Start with your own Data」方式で 45 ちなみに「Order Capture」という、今回作りたいものにドンピシャなサンプルアプリがあります。実務では、サンプル からコピーして改造するのが一番効率良いかもしれません。
  46. 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. 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. 48. © 2020 ESM, Inc. スプレッドシートを取り込んでテーブルを作成する #1 48 一つのテーブルだけが取り込まれるので(おそらく一番左にあるシート) … google を選択 (database-1は私の環境で追加した データソース)
  49. 49. © 2020 ESM, Inc. スプレッドシートを取り込んでテーブルを作成する #2 49 他のテーブル(今回の場合は 3つ)を順次追加していく スプレッドシートに存在する他のシート は、ここから簡単に追加できる(New Tableをクリックしてもできる。今回は その手順でやってみた)
  50. 50. © 2020 ESM, Inc. テーブル間の関連の初期設定について スプレッドシートのカラム名を適切に設定することで、自動的に関連を作成してくれる(自 動設定されなくても後で手動で設定変更すればOK)。 50 例えば、orders と customers の場合 ordersテーブル customersテーブル カラム名をcustomer (customersの単 数形)にすることで、自動的に関連が 作成される。
  51. 51. © 2020 ESM, Inc. テーブルごとにカラムを調整・設定する 51 型(Type)は、スプレッドシートの内容やカラム名か ら推測したものが初期設定されている。もし、違っ ているものがあれば変更する。ここでは「 Text」から 「DateTime」に変更する。
  52. 52. © 2020 ESM, Inc. 導出項目を設定する #1 52 注文明細(order_details)に、注文数に応じた総額を出すためのバーチャルカラム「 total_price」を追加する。 注文明細の注文数( quantity)× 注文明 細から参照する items の price。
  53. 53. © 2020 ESM, Inc. 導出項目を設定する #2 53 以下のフィーチャーを実現するために、 order_details に、「delivery_status」 バーチャルカラムを追加する。 納期(出荷可否)は在庫数ベースで自動判別する。在庫が 0以下の場合は「NG」を、1または2の場合は「要確認」を、 それより多い場合は「 OK」を表示 IFS関数等を駆使して、フィーチャーを実 現する
  54. 54. © 2020 ESM, Inc. テーブル間の関連を作成・調整する 「エディタを使った仕上げ」でやったように、項目間の参照(Ref)と、「Is a part of」設定に よる結び付けを行う。 54 ちなみに、ordersから、order_details への参照(バーチャルカラム)の 「Required」をOnにすると、注文明細の作成を必須にできる(画面にエ ラーが表示されるようになる)。
  55. 55. © 2020 ESM, Inc. UXを整える #1 各項目を画面に表示する/しない(SHOW?)や、操作可能/不可能(EDITABLE?)、必 須かどうか(REQUIRE?)、表示名(DISPLAY NAME)などを設定する。 55
  56. 56. © 2020 ESM, Inc. UXを整える #2 メニューへの表示の仕方を調整する。 56 「UX>Views>PRIMARY VIEWS」の該当のView のViewTypeを選択し、「VIEW OPTIONS」 で詳細(表示する項目や順番)を設定。
  57. 57. © 2020 ESM, Inc. UXを整える #3 orders に埋め込まれている(インラインの)order details のUXはどこで変更するのか? 57 UX>Views なんか変 もし表示されてない場合は、 「Show system views」をクリッ クする。
  58. 58. © 2020 ESM, Inc. UXを整える #4 orders に埋め込まれている(インラインの)order details のUXはどこで変更するのか? 58 REF VIEWSの中にorder_details_inlineというViewがあり、 View Typeを「table」にすると、それらしく表示される
  59. 59. © 2020 ESM, Inc. この段階で実現できたフィーチャー 1. 利用者(卸売り)は、お客様(小売り)に、直接画像を見せて商品を選んでいただく(操作 は卸売りが行い、適宜画面を小売りに見せる想定) 2. 商品は複数まとめて注文できる(注文と注文明細にわかれる。各注文明細ごとに、商品 とその注文数がある) 3. 納期(出荷可否)は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま たは2の場合は「要確認」を、それより多い場合は「OK」を表示 4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で も注文できる 5. 注文単位で注文書(PDF)を作成できる 6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商 品コードで絞り込むこともできるようにする 7. データ(商品、顧客、注文等)はスプレッドシートに格納する。データのメンテナンス はスプレッドシートを直接操作する 59
  60. 60. © 2020 ESM, Inc. 見栄え・使い勝手を洗練する 60
  61. 61. © 2020 ESM, Inc. DataのSliceを使ってデータを絞り込む 61 Itemテーブルのcategoryが”EModel”であるデータに 絞り込んだSliceを作成。カテゴリは3つなので、Slice も3種類作成した。作成したSliceは、UX(画面)から表 示対象のデータ(For this data)として選択できるよう になる。 「商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい」を実現する。
  62. 62. © 2020 ESM, Inc. DataのSliceを使ってデータを絞り込む 62 Position を「left」にすると、 左側にボタンが配置される。 新しいViewを作成し、「For this data」に、作成したSliceを指定する。
  63. 63. © 2020 ESM, Inc. DataのSliceを使ってデータを絞り込む 63 Position を「menu」にする と、メニューの中に移動す る。 新しいViewを作成し、「For this data」に、作成したSliceを指定する。
  64. 64. © 2020 ESM, Inc. メニュー構造(PRIMARY と MENU)をいい感じに 64 あまり使わないUX(画面)はメニュー(MENU VIEWS)に移動させる。 よく使うUX(画面)だけPRIMARY VIEWSに 絞る。
  65. 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. 66. © 2020 ESM, Inc. Format Rulesで条件に応じて見栄えに変化を与える #2 66 文字色を「red」に変える。 「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下でも注文できる」を実現する。
  67. 67. © 2020 ESM, Inc. Format Rulesで条件に応じて見栄えに変化を与える #3 67 「在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下でも注文できる」を実現する。 一つの設定で、あらゆるUX(画面)で有効となるの が嬉しい。
  68. 68. © 2020 ESM, Inc. 検索(絞り込み)機能を実現する 68 「商品コードで絞り込むこともできるようにする」を実現する。 直感的に絞り込むことができる。設定は、各カラム の「SEARCH?」にて。 複数設定されている場合はどちらでもサーチでき る。
  69. 69. © 2020 ESM, Inc. この段階で実現できたフィーチャー 1. 利用者(卸売り)は、お客様(小売り)に、直接画像を見せて商品を選んでいただく(操作 は卸売りが行い、適宜画面を小売りに見せる想定) 2. 商品は複数まとめて注文できる(注文と注文明細にわかれる。各注文明細ごとに、商品 とその注文数がある) 3. 納期(出荷可否)は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま たは2の場合は「要確認」を、それより多い場合は「OK」を表示 4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で も注文できる 5. 注文単位で注文書(PDF)を作成できる 6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商 品コードで絞り込むこともできるようにする 7. データ(商品、顧客、注文等)はスプレッドシートに格納する。データのメンテナンス はスプレッドシートを直接操作する 69
  70. 70. © 2020 ESM, Inc. ワークフローでPDF帳票を作成する 70
  71. 71. © 2020 ESM, Inc. Workflowでできること 71 ● メールやSMSにWebhook、Googleドライブにファイルを作成するなど ● PDF帳票はSave File やメールの添付ファイルとして実現できるが、今回はメール添付ファイルとすることに ● 詳細は、https://help.appsheet.com/en/collections/378226-behavior#workflow-introduction
  72. 72. © 2020 ESM, Inc. Workflowもデータ駆動 72 Targetとなるテーブルを選 択する。 Workflow開始のトリガーとなるイベントを選択 する。
  73. 73. © 2020 ESM, Inc. Workflowを手動で起動する #1 73 ここをタップしたときにPDF添付 メール送信(=Workflow起動)を 行いたい。 ● 注文書の再発行も必要だろうから、「orderが追加された 場合に自動メール」ではなく、「ボタンタップしたらメール」 のほうが便利そう ● Workflowはデータ駆動なので、ボタンがタップされたこと に反応してデータを更新する仕掛け(Action)が必要 UX (画面) タップ テーブルAction起動 更新 ワークフロー 更新 検知 起動
  74. 74. © 2020 ESM, Inc. Workflowを手動で起動する #2 74 ● (実は)ordersテーブルの「sheet_created_at」カラムはそのためにある ● 「ordersテーブルのsheet_created_atカラムを現在日時で更新する」Actionを作成する (「Create Order Sheet」と名付けた) 「項目に値をセットするAction」で、カラムに現 在日時をセットするように設定。
  75. 75. © 2020 ESM, Inc. Workflowを手動で起動する #3 75 ● ordersのVIEW OPTIONSに、先ほど作成した「 Create Order Sheet」をActionとして指定する ①ここに追加したアクションが (※ Delete は標準のアクション) ②ここにタップできるアイコンとし て表示される (※アイコン絵柄は選べる)
  76. 76. © 2020 ESM, Inc. Workflowを手動で起動する #4 76 OrderテーブルをTargetに 「更新があった場合のみ」を選択 Workflow の設定
  77. 77. © 2020 ESM, Inc. 帳票テンプレートはGoogleDocsで作る #1 77 テンプレートとなるGoogleド キュメントを指定
  78. 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. 79. © 2020 ESM, Inc. 帳票テンプレートはGoogleDocsで作る #3 79 今回のサンプルでは利用していませんが、 <<If:[]>> <<EndIf> を使った条件分岐も実現できます。
  80. 80. © 2020 ESM, Inc. 帳票の仕上がりイメージ 80
  81. 81. © 2020 ESM, Inc. Workflowのデバッグ 81 Log をクリック
  82. 82. © 2020 ESM, Inc. この段階で実現できたフィーチャー 1. 利用者(卸売り)は、お客様(小売り)に、直接画像を見せて商品を選んでいただく(操作 は卸売りが行い、適宜画面を小売りに見せる想定) 2. 商品は複数まとめて注文できる(注文と注文明細にわかれる。各注文明細ごとに、商品 とその注文数がある) 3. 納期(出荷可否)は在庫数ベースで自動判別する。在庫が0以下の場合は「NG」を、1ま たは2の場合は「要確認」を、それより多い場合は「OK」を表示 4. 在庫が0以下になると、その商品を表示する際に赤く表示する。ただし、在庫が0以下で も注文できる 5. 注文単位で注文書(PDF)を作成できる 6. 商品は3つのカテゴリに分かれる。それぞれのカテゴリに絞り込んで見せたい。また、商 品コードで絞り込むこともできるようにする 7. データ(商品、顧客、注文等)はスプレッドシートに格納する。データのメンテナンス はスプレッドシートを直接操作する 82
  83. 83. © 2020 ESM, Inc. 企業での実利用に向けて 知っておくと良いこと 83
  84. 84. © 2020 ESM, Inc. 本番運用に乗せるにはデプロイが必要 84 ● 他のユーザーに使ってもらうた めにはデプロイが必要 ● プロトタイプで動いていたからと いってそのまま運用できるわけ ではない ● あらかじめしかるべきプランに契 約しておく(実質的にFreeプラン では無理) Manage>Deployからデプロイできる が、その前にDeployment Checkが必 要。Freeプランだとこのチェックが通ら ずデプロイできない
  85. 85. © 2020 ESM, Inc. デプロイの手順 85 デプロイ可能な状態だとこのようにボタ ンが押せるようになる
  86. 86. © 2020 ESM, Inc. 実稼働させる前にチェックしたいこと 86 Pro以上のプランでないと実利用 はできないことが多いので確認 が必要(ただしプロトタイプとして は動作する)
  87. 87. © 2020 ESM, Inc. プラン毎のできる/できないをチェックするには 87 Manage>Plan requirements でどのプランで ないとデプロイできないか確認できる(ただし プロトタイプとしては動作する)。例えばDB利 用は、Businessのみ許可されていることがわ かる。
  88. 88. © 2020 ESM, Inc. チームで利用するには(共同作成) 88 https://help.appsheet.com/en/articles/954445-shared-authoring-of-apps ● アプリのアクセス蹴権限の設定で簡単に実現できる ○ ※ 詳細は下記URLを参照 ● ただし、「同時編集」はできない(後で更新したほうで何の警告もなく上書きされる)なので 注意
  89. 89. © 2020 ESM, Inc. ドメインのアカウントだと「My Team」が使える 89 https://help.appsheet.com/en/articles/2615244-working-with-google-team-drive ● Teamにメンバーを招待で きる ● 現状の嬉しさはこれくら い?アプリをサンプルとし てメンバー間に共有できる ● エンタープライズ契約が必 要
  90. 90. © 2020 ESM, Inc. ちなみに gmail だと 90
  91. 91. © 2020 ESM, Inc. TeamDriveにリソースを格納する方法 91 My account>Settings より [TeamDrive]チームドライブ名/フォ ルダパス を設定する。 https://help.appsheet.com/en/articles/2615244-working-with-google-team-drive
  92. 92. © 2020 ESM, Inc. 安定バージョンに固定して公開する方法(有償プランのみ) 92 最新版と安定バージョンへにアクセスす るユーザーの比率を決めることもできる。 (ユーザーごとに固定することももちろん 可能)
  93. 93. © 2020 ESM, Inc. AppSheet の得意領域 (あっという間に実現できること) 93
  94. 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. 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. 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. 97. © 2020 ESM, Inc. AppSheet でCSVエクスポート 97 App:export this view to a CSV file を選 択。 ● Actionから選ぶだけ ● テーブル単位
  98. 98. © 2020 ESM, Inc. AppSheet でチャットに投稿 98 Slack 以外のURLでも指定できる。この 例は Google Hangout Chat 。 ● Workflowの Webhookから設定 ● Presetから「Slack Hook」を選択し ● UrlやBodyを入力
  99. 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. 100. © 2020 ESM, Inc. より詳しく知りたい方への情報 ● 岡島のブログ ○ AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか (この資 料の元ネタですがエンジニア視点なので、ややマニアックです) ○ App Makerで開発したアプリをAppSheetに移行する (スプレッドシートでなくてデータベースと接続 してみたいエンジニアの方にお勧め) ● AppSheet 公式(ドキュメントが充実してます) 100
  101. 101. © 2020 ESM, Inc. 以上 101

×