銀匙

ITを使って日々の仕事を少しラクにしよう

AppSheetをChatアプリ化して、Chat上で承認できるようにしたい!(後編)

前回に続いて、Chatアプリ化したAppSheetに「承認ボタン」を追加していきます。このボタンが押されたら、申請情報と承認結果を台帳に転記するようにしてみます!

イメージ図

イメージ図

前回の記事

sazine.hatenablog.com

 

View画面で購買台帳画面を作成しよう!

まず、前回取り込んだ購買台帳用の画面を作成しましょう。

  1. 画面左のViewsボタンを押した後、「+(Add View)」をクリック

     

  2. Create a new viewをクリック

     

    Create a new viewをクリック

     

  3. 「View name」と「For this data」を「購買台帳」にして、レイアウトを表形式にする

    レイアウトを表形式に

     

  4. 「購買台帳」という画面が追加されました!

    サンプルデータを表示させた様子

     

今度こそ、Actions画面で「承認ボタン」を追加しよう!

今度こそ、Chatアプリに「承認ボタン」を追加してみましょう。左にあるイナズママーク⚡️(Actions)をクリックします。ここから、新しいAction(ボタン)を追加していきます。

Actions画面のイナズマボタン⚡️を押す

 

  1. 「+(Add Action)」をクリック

    +(Add Action)をクリック


  2. 「Create a new action」をクリック

     

    Create a new actionをクリック
  3. 「承認ボタン」を作っていきます

    次のように設定しました。
    ・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:「購買台帳」を選択します。コピー先となるスプレッドシートのことです。

     

    承認ボタンが押されたら、フォームのデータを購買台帳に転記する

     

  4. 続いて、新規フォームのデータ(列)と、購買台帳のデータ(列)を対応させる

    左:購買台帳のデータ(コピー先)
    右:新規フォームのデータ(コピー元)

    例えば、新規フォームの「Response ID」というデータは、購買台帳の「id」にコピーさせます!

    転記(コピー)するための設定

 

動作確認!Google Chat上で申請を承認してみよう

三度、新規フォームを提出して動作を確認してみます!

 

Google Chatに通知が届き、「承認ボタン」もちゃんといます!!

 

 

「承認ボタン」を押してみると、期待通りデータが転記されました!

 

購買台帳画面

当然、スプレッドシートにもデータが反映されています。

フォームのデータ転記はもちろん、判定結果も「承認済み」に!

まとめ

次のイメージ図(再掲)のように、

  1. 申請者が「購買申請フォーム」を提出する
  2. フォームの提出がAppSheetに届く
  3. それがChatアプリにも届く
  4. Chat上の「承認ボタン」をクリックして申請を承認する
  5. 「承認ボタン」が押されたら「購買台帳(スプレッドシート)」に必要な情報が転記される

という一連の流れを作ってみました。

イメージ図

特に、AppSheetをGoogle Chatアプリ化すると、様々な業務をGoogle Chatに集約できることになるので非常に有用だと思います。ぜひ試してみてください!

sazine.hatenablog.com

sazine.hatenablog.com

sazine.hatenablog.com

sazine.hatenablog.com

 

 




 

AppSheetをChatアプリ化して、Chat上で承認できるようにしたい!(前編)

前回、AppSheetをChatアプリ化し、新規フォームの通知がGoogle Chatに届くようにしました。せっかくなので、Chatアプリ上に「承認ボタン」を作って、購買申請を承認できるようにしてみたいと思います!

連載ぽくなってきました。

sazine.hatenablog.com

sazine.hatenablog.com

sazine.hatenablog.com

おさらい

今のChatアプリには「Compose Emailボタン」というのはありますが、「承認ボタン」がありません。これを追加して申請を承認できるようにしたい!

 

Actions画面を確認してみよう!

画面左の「Actions」をクリックすると、「Compose Email」というActionが確認できます。

 

Compose Emailというアクションがあり、これがアプリ上のボタンになる!

 

AppSheetの「メールアイコン✉️」や、Chatアプリの「Compose Email」ボタンの正体はこれですね!

 

この画面で「承認ボタン」を作ってあげれば、Chatアプリで申請の承認ができそう。

新規フォームを受け取る
→アプリの『承認ボタン』をクリック
→ステータスを『承認』に変える!
のように。

でも待てよ、、やっぱりスプレッドシートが必要なんじゃ、、?

今回の「購買申請アプリ」のデータソースはGoogleフォームそのもので、スプレッドシートは使ってきませんでした。その場合、強制的にAppSheetのDataは「Read-Only」になるようです、、!データの更新・追加・削除ができない汗

Data画面 > Table Settings(画面右上)で確認できます

つまり、例えば「判定結果」みたいな列をAppSheetに追加して「このフォームは承認、このフォームは却下」ということができない!

苦し紛れの暫定策として

という感じにしてみたいと思います!

完成形のイメージ図です。結局、スプレッドシートが要るんじゃないか、、

イメージ図

スプレッドシートを準備しよう!

というわけで次のような購買台帳を作成しました。

  • id
  • 申請日時
  • 氏名
  • 物品名
  • 金額
  • 備考
  • 判定日時
  • 判定結果

購買台帳のスプレッドシートを作成

 

AppSheet(購買申請アプリ)に購買台帳を取り込もう!

  1. Data画面で「+(Add new Data)」をクリック
  2. Google Sheetsを選択
  3. 「購買台帳」を選択
  4. 「Add 1 table」をクリック
「+(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機能を使います。

sazine.hatenablog.com

sazine.hatenablog.com

Automation機能で新規フォームをGoogle Chatに通知させよう!

Automation機能で「新規フォームが提出されたら、Google Chatへ通知する」という自動応答機能を作っていきます。画面左の「Automation」をクリックしましょう。

 

  1. 画面左のロボットアイコンをクリックし、メインウィンドウで「Create my first automation」をクリック


  2. Create a new botをクリック




  3. Configure eventをクリック



  4. Create a custom eventをクリック



  5. Event Typeを「Forms」に変更



  6. Add a stepをクリック



  7. Create a custom stepをクリック



  8. 「Send a chat messeage」をクリックしたのち、Space IDの「Add」をクリック



  9. Addをクリックして出現したアカウント名をクリック



  10. 新規フォームが提出されたときの自動応答文と、表示する画面を指定します

    ・Message Text: 「新規フォームが届きました!」にしました
    ・Send an app view: 「購買申請フォーム_Detail」にします



新しいフォームを提出してみよう!

これで新規フォームを提出すれば、Google Chatに通知が届くようになったはずです。実際にフォームを提出して確かめてみます!

 

 

おお、期待通りChatに通知が届きました!

あれ、承認ボタンがない!?

Chatに通知が届くようになったのは良いものの、Googleの紹介記事にあるような「承認(Approve)ボタン」がないではありませんか、、。代わりに「Compose Email」というボタンが、、。

 

Googleの紹介記事のGIFはこちら。Chat通知に承認ボタンがいる、、。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_ItwSo0vy_Srrl1n3B4t2nWD2kbwyS-TX-CnNJuaDE1CK32WTtHOIuCUzHN8ABe12jHLeknYZkswNkFaScHgZkxaHnmaGqRq_EaHJuOwOpXHIzMo78puAk5orLKPR9DlZf77VTQJdSJqdEjdLV5fe4gzY2MQQcpc9mduMdPbHJum-isUdHkYOCD3Bt4/s1228/Build%20AppSheet%20automations%20using%20Google%20Forms.png

 

それもそのはず。ここに表示されるのは、AppSheetのActionという画面で定義したボタンです。今は承認ボタンというActionを作ってないので、お手本どおりとはなっていません。ここまで来たら、それも作ってみたい。

ということで次回は、Actions画面で承認ボタンを追加し、Chat上で承認操作ができるようにしてみましょう!

AppSheetをChatアプリ化してみる!GoogleフォームをGoogle Chatへ通知(前編)

前回、「AppSheetとGoogleフォームを直接連携させる」というのを試しました。今回はさらに進んで、AppSheetをChatアプリ化してみたいと思います。何が嬉しいかと言うと、新しいGoogleフォームが提出されたときに、Chatアプリに通知が届くようにできます!

前回の記事で作成した『購買申請アプリ』を使います。Googleフォームの結果をAppSheetで確認するというシンプルなアプリです。

sazine.hatenablog.com

 

まずはアプリをデプロイ(=本番リリース)してみよう!

実は、現段階のアプリはプロトタイプという状態で、AppSheetの機能をフル活用することができません。Chatアプリ化にはデプロイする必要があります。

プロトタイプ状態(Not deployed)

とはいえ、デプロイ方法は簡単です。画面左上の「ロケット」ボタンをクリックし、「Mange > Deploy > Deployment Check」の「Move app to deployed state」をクリックするだけです。
「WARNING」という表示もありますが、今回は気にせず進みます。*1

Move app to deployed stateをクリック

ロケットにチェックが入り、画面中央に「xxx is deployed」というメッセージが表示されるようになればOKです。

デプロイ完了

AppSheetとGoogle Chatを連携しよう!

いよいよAppSheetをChatアプリ化して、Googleフォームの新規提出の通知をGoogle Chatに届くようにしてみます!

  1. まずは、画面左の「Chat apps」ボタンをクリックします

    Chat apsをクリック(ロボットアイコンの下)
  2. Createをクリック



  3. Nextでどんどん進んでください

     

これでChatアプリ化は完成です!

Google ChatからAppSheet(購買申請アプリ)を呼び出そう!

Chatアプリ化すると、Google ChatからAppSheetを呼び出せることができるようになります。実際に購買申請アプリを呼び出してみます!

  1. Google Chatを開いてください
  2. 「チャットを新規作成」から「購買申請アプリ」と検索してアプリ(Chatアプリ化したAppSheet)を呼び出します

    Google Chatからアプリの呼び出し
  3. Google Chatで購買申請アプリを呼び出すことができました
    「Open in app」というボタンをクリックするとAppSheetが起動するようになっています。

    Open in appをクリックするとAppSheetが起動します

まとめ

AppSheetをChatアプリ化し、Google Chatからアプリを使えるようにしてみました。便利ですね。でも、今の段階ではGoogleフォームが提出されてもChatに通知されるようにはなっていません。次回はその部分の機能を実装していきましょう!お楽しみにー。

 

sazine.hatenablog.com

*1:例えば「App description」という項目にWARNINGが出ていました。アプリの説明文(App description)がなくてもひとまずは大丈夫

AppSheetとGoogleフォームが直接連携できるらしいので試してみる!

最近、「Googleフォームを使用したAppSheetの自動化の構築」という機能がベータ公開されました。AppSheetとGoogleフォームを直接連携させられるようです!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_ItwSo0vy_Srrl1n3B4t2nWD2kbwyS-TX-CnNJuaDE1CK32WTtHOIuCUzHN8ABe12jHLeknYZkswNkFaScHgZkxaHnmaGqRq_EaHJuOwOpXHIzMo78puAk5orLKPR9DlZf77VTQJdSJqdEjdLV5fe4gzY2MQQcpc9mduMdPbHJum-isUdHkYOCD3Bt4/s1228/Build%20AppSheet%20automations%20using%20Google%20Forms.png

workspaceupdates-ja.googleblog.com

 

実際にやってみる

公開されたGIFを見ると、

  1. Googleフォームの結果がAppSheetに反映【今回はコレだけ試す★】 
  2. 新規フォームの通知がGoogle Chatに通知が届く
  3. Google Chat上で「Approve」をクリックして承認する

という様子が伺えます。興味深いので、実際に試してみたいと思います!

題材として「購買申請アプリ」を作成してみます。「フォームで購入したい物品情報を送って、その結果をAppSheetで確認できるか」を確認してみます!

申請フォームを準備しよう

何はともあれGoogleフォームが必要です。次のようなフォームを準備しました。

  • メールアドレス(自動収集)
  • 氏名
  • 物品名
  • 金額(整数)
  • 備考

この時点では、

  • フォームのステータスは「回答受付中」
  • ただし、回答受け付用のスプレッドシートは準備していない

という状態です!

後述しますが、AppSheetのデータソースにフォームを指定するので、回答受付用のスプレッドシートは必要ありません!フォームの結果が、直接AppSheetに届くイメージ。

AppSheetを準備しよう

続いて、AppSheetでアプリを作っていきます。

  1. AppSheetのホーム画面へアクセス

    https://www.appsheet.com/home/apps

  2. 画面左上の「Create」から「App > Start with existing data」を選択



  3. アプリ名称とカテゴリ(任意)を設定し「Choose your data」をクリック



  4. データソース(アプリの元データ)として「Google Forms(BETA)」を選択

     

  5. 既に作成した「購買申請フォーム」を選択します



  6. 次のような画面が表示されるので「Customize with AppSheet」をクリック



  7. 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の記事を追いかけてみる)

 

sazine.hatenablog.com