AppSheetをChatアプリ化して、Chat上で承認できるようにしたい！（後編）
前回に続いて、Chatアプリ化したAppSheetに「承認ボタン」を追加していきます。このボタンが押されたら、申請情報と承認結果を台帳に転記するようにしてみます！
イメージ図
前回の記事
View画面で購買台帳画面を作成しよう！
まず、前回取り込んだ購買台帳用の画面を作成しましょう。
- 画面左のViewsボタンを押した後、「＋（Add View）」をクリック
- Create a new viewをクリック
Create a new viewをクリック - 「View name」と「For this data」を「購買台帳」にして、レイアウトを表形式にする
レイアウトを表形式に - 「購買台帳」という画面が追加されました！
サンプルデータを表示させた様子
今度こそ、Actions画面で「承認ボタン」を追加しよう！
今度こそ、Chatアプリに「承認ボタン」を追加してみましょう。左にあるイナズママーク⚡️（Actions）をクリックします。ここから、新しいAction（ボタン）を追加していきます。
- 「＋（Add Action）」をクリック
＋（Add Action）をクリック - 「Create a new action」をクリック
Create a new actionをクリック - 「承認ボタン」を作っていきます
次のように設定しました。
・Action name：ボタンの名称です。「承認」としました。
・For a record of this table：「購買申請フォーム」を選択します。購買申請フォームのデータをスプレッドシートに転記するので。
・Do this：「add a new row to another table using values from this row」を選択します（＝フォームのデータを別のテーブル「購買台帳」にコピーする）
・Table to add to：「購買台帳」を選択します。コピー先となるスプレッドシートのことです。
承認ボタンが押されたら、フォームのデータを購買台帳に転記する - 続いて、新規フォームのデータ（列）と、購買台帳のデータ（列）を対応させる
左：購買台帳のデータ（コピー先）
右：新規フォームのデータ（コピー元）
例えば、新規フォームの「Response ID」というデータは、購買台帳の「id」にコピーさせます！
転記（コピー）するための設定
動作確認！Google Chat上で申請を承認してみよう
三度、新規フォームを提出して動作を確認してみます！
Google Chatに通知が届き、「承認ボタン」もちゃんといます！！
「承認ボタン」を押してみると、期待通りデータが転記されました！
当然、スプレッドシートにもデータが反映されています。
まとめ
次のイメージ図（再掲）のように、
- 申請者が「購買申請フォーム」を提出する
- フォームの提出がAppSheetに届く
- それがChatアプリにも届く
- Chat上の「承認ボタン」をクリックして申請を承認する
- 「承認ボタン」が押されたら「購買台帳（スプレッドシート）」に必要な情報が転記される
という一連の流れを作ってみました。
特に、AppSheetをGoogle Chatアプリ化すると、様々な業務をGoogle Chatに集約できることになるので非常に有用だと思います。ぜひ試してみてください！
AppSheetをChatアプリ化して、Chat上で承認できるようにしたい！（前編）
前回、AppSheetをChatアプリ化し、新規フォームの通知がGoogle Chatに届くようにしました。せっかくなので、Chatアプリ上に「承認ボタン」を作って、購買申請を承認できるようにしてみたいと思います！
連載ぽくなってきました。
おさらい
今のChatアプリには「Compose Emailボタン」というのはありますが、「承認ボタン」がありません。これを追加して申請を承認できるようにしたい！
Actions画面を確認してみよう！
画面左の「Actions」をクリックすると、「Compose Email」というActionが確認できます。
AppSheetの「メールアイコン✉️」や、Chatアプリの「Compose Email」ボタンの正体はこれですね！
この画面で「承認ボタン」を作ってあげれば、Chatアプリで申請の承認ができそう。
新規フォームを受け取る
→アプリの『承認ボタン』をクリック
→ステータスを『承認』に変える！
のように。
でも待てよ、、やっぱりスプレッドシートが必要なんじゃ、、？
今回の「購買申請アプリ」のデータソースはGoogleフォームそのもので、スプレッドシートは使ってきませんでした。その場合、強制的にAppSheetのDataは「Read-Only」になるようです、、！データの更新・追加・削除ができない汗
つまり、例えば「判定結果」みたいな列をAppSheetに追加して「このフォームは承認、このフォームは却下」ということができない！
苦し紛れの暫定策として
- 「購買台帳」というスプレッドシートを新たに準備（汗）
- 新規フォームが提出されたらスプレッドシート（購買台帳）に内容を転記
- 承認ボタンをクリックすると、スプレッドシート（購買台帳）の判定結果を「承認」にセットする
という感じにしてみたいと思います！
完成形のイメージ図です。結局、スプレッドシートが要るんじゃないか、、
スプレッドシートを準備しよう！
というわけで次のような購買台帳を作成しました。
- id
- 申請日時
- 氏名
- 物品名
- 金額
- 備考
- 判定日時
- 判定結果
AppSheet（購買申請アプリ）に購買台帳を取り込もう！
- Data画面で「＋（Add new Data）」をクリック
- Google Sheetsを選択
- 「購買台帳」を選択
- 「Add 1 table」をクリック
Dataは次のように設定しました。
- KEY?：idを設定
- LABEL?：物品名を設定
- 申請日時と判定日時：DateTime形式に設定
今回は購買台帳を準備するところまで。次回こそ「承認ボタン」を作成して、Chatアプリ上で承認できるようにするぞ！
AppSheetをChatアプリ化してみる！GoogleフォームをGoogle Chatへ通知（後編）
前回、AppSheetとChatアプリ化してみました。今回は、新規フォームをGoogle Chatに通知させてみます！AppSheetのAutomation機能を使います。
Automation機能で新規フォームをGoogle Chatに通知させよう！
Automation機能で「新規フォームが提出されたら、Google Chatへ通知する」という自動応答機能を作っていきます。画面左の「Automation」をクリックしましょう。
- 画面左のロボットアイコンをクリックし、メインウィンドウで「Create my first automation」をクリック
- Create a new botをクリック
- Configure eventをクリック
- Create a custom eventをクリック
- Event Typeを「Forms」に変更
- Add a stepをクリック
- Create a custom stepをクリック
- 「Send a chat messeage」をクリックしたのち、Space IDの「Add」をクリック
- Addをクリックして出現したアカウント名をクリック
- 新規フォームが提出されたときの自動応答文と、表示する画面を指定します
・Message Text: 「新規フォームが届きました！」にしました
・Send an app view: 「購買申請フォーム_Detail」にします
新しいフォームを提出してみよう！
これで新規フォームを提出すれば、Google Chatに通知が届くようになったはずです。実際にフォームを提出して確かめてみます！
おお、期待通りChatに通知が届きました！
あれ、承認ボタンがない！？
Chatに通知が届くようになったのは良いものの、Googleの紹介記事にあるような「承認（Approve）ボタン」がないではありませんか、、。代わりに「Compose Email」というボタンが、、。
↓Googleの紹介記事のGIFはこちら。Chat通知に承認ボタンがいる、、。
それもそのはず。ここに表示されるのは、AppSheetのActionという画面で定義したボタンです。今は承認ボタンというActionを作ってないので、お手本どおりとはなっていません。ここまで来たら、それも作ってみたい。
ということで次回は、Actions画面で承認ボタンを追加し、Chat上で承認操作ができるようにしてみましょう！
AppSheetをChatアプリ化してみる！GoogleフォームをGoogle Chatへ通知（前編）
前回、「AppSheetとGoogleフォームを直接連携させる」というのを試しました。今回はさらに進んで、AppSheetをChatアプリ化してみたいと思います。何が嬉しいかと言うと、新しいGoogleフォームが提出されたときに、Chatアプリに通知が届くようにできます！
前回の記事で作成した『購買申請アプリ』を使います。Googleフォームの結果をAppSheetで確認するというシンプルなアプリです。
まずはアプリをデプロイ（=本番リリース）してみよう！
実は、現段階のアプリはプロトタイプという状態で、AppSheetの機能をフル活用することができません。Chatアプリ化にはデプロイする必要があります。
とはいえ、デプロイ方法は簡単です。画面左上の「ロケット」ボタンをクリックし、「Mange > Deploy > Deployment Check」の「Move app to deployed state」をクリックするだけです。
「WARNING」という表示もありますが、今回は気にせず進みます。*1
ロケットにチェックが入り、画面中央に「xxx is deployed」というメッセージが表示されるようになればOKです。
AppSheetとGoogle Chatを連携しよう！
いよいよAppSheetをChatアプリ化して、Googleフォームの新規提出の通知をGoogle Chatに届くようにしてみます！
- まずは、画面左の「Chat apps」ボタンをクリックします
Chat apsをクリック（ロボットアイコンの下） - Createをクリック
- Nextでどんどん進んでください
これでChatアプリ化は完成です！
Google ChatからAppSheet（購買申請アプリ）を呼び出そう！
Chatアプリ化すると、Google ChatからAppSheetを呼び出せることができるようになります。実際に購買申請アプリを呼び出してみます！
- Google Chatを開いてください
- 「チャットを新規作成」から「購買申請アプリ」と検索してアプリ（Chatアプリ化したAppSheet）を呼び出します
Google Chatからアプリの呼び出し - Google Chatで購買申請アプリを呼び出すことができました
「Open in app」というボタンをクリックするとAppSheetが起動するようになっています。
Open in appをクリックするとAppSheetが起動します
まとめ
AppSheetをChatアプリ化し、Google Chatからアプリを使えるようにしてみました。便利ですね。でも、今の段階ではGoogleフォームが提出されてもChatに通知されるようにはなっていません。次回はその部分の機能を実装していきましょう！お楽しみにー。
*1:例えば「App description」という項目にWARNINGが出ていました。アプリの説明文（App description）がなくてもひとまずは大丈夫
AppSheetとGoogleフォームが直接連携できるらしいので試してみる！
最近、「Googleフォームを使用したAppSheetの自動化の構築」という機能がベータ公開されました。AppSheetとGoogleフォームを直接連携させられるようです！
workspaceupdates-ja.googleblog.com
実際にやってみる
公開されたGIFを見ると、
という様子が伺えます。興味深いので、実際に試してみたいと思います！
題材として「購買申請アプリ」を作成してみます。「フォームで購入したい物品情報を送って、その結果をAppSheetで確認できるか」を確認してみます！
申請フォームを準備しよう
何はともあれGoogleフォームが必要です。次のようなフォームを準備しました。
- メールアドレス（自動収集）
- 氏名
- 物品名
- 金額（整数）
- 備考
この時点では、
- フォームのステータスは「回答受付中」
- ただし、回答受け付用のスプレッドシートは準備していない
という状態です！
後述しますが、AppSheetのデータソースにフォームを指定するので、回答受付用のスプレッドシートは必要ありません！フォームの結果が、直接AppSheetに届くイメージ。
AppSheetを準備しよう
続いて、AppSheetでアプリを作っていきます。
- AppSheetのホーム画面へアクセス
- 画面左上の「Create」から「App > Start with existing data」を選択
- アプリ名称とカテゴリ（任意）を設定し「Choose your data」をクリック
-
データソース（アプリの元データ）として「Google Forms（BETA）」を選択
- 既に作成した「購買申請フォーム」を選択します
- 次のような画面が表示されるので「Customize with AppSheet」をクリック
- AppSheetのData画面を見ると、フォームの情報が取り込まれています
Data画面を編集しよう
取り込まれたDataを見てみましょう。
- KEY?：Response IDが自動指定されていました。変更不可です
- LABEL?：アプリ利用者が認識しやすい「物品名」を指定しました
- Timestamp：INITIAL VALUE（初期値）にNOW()が指定されており、フォームが提出された日時が入る
- 氏名、物品名、備考：Text形式としました
- 金額：Number形式としました
View画面を編集しよう
レイアウトを「Table（表形式）」に変更しておきます。それ以外はそのままでOK。
実際にフォームを提出してみよう
どうさ確認のため、サンプルフォームを提出してみます！
アプリをプレビューしよう！
アプリを編集すると、画面右側のプレビュー画面にリアルタイムで反映されるのがわかると思います（便利！）。プレビュー画面にも、サンプルフォームのデータが見えていました！
モバイル画面
こちらは「タブレット」画面。このようにボタンひとつでプレビュー画面を切り替えられます！
タブレット画面
デスクトップ画面
最後はPCデスクトップ画面。一番右の「Desktop」をクリックすると、、
新しいタブが開きプレビューできます。
まとめ
AppSheetとGoogleフォームを直接連携させて、フォーム結果をAppSheetで確認できるようになりました（回答受付用のGoogleスプレッドシートは準備せずに）。
せっかくなので、次回は新規フォームをGoogle Chatに通知してみたいと思います！（Googleの記事を追いかけてみる）
