AppSheet と Google Workspace の連携（5）Gmail

AppSheet （アップシート）と Google Workspace との連携について解説するシリーズです。
前回（第4回）は、Googelカレンダーに予定を追加して問い合わせと関連付けました。
第5回は、問い合わせ管理アプリで、AppSheetとGmailを連携します。
出張申請メールを送信して、Dynamic email機能を使用して、Gmail上で承認をやってみます。

1. AppSheet とGmailを連携させる

AppSheetとGmailの連携手順は以下の通りです。

1. Googleスプレッドシート「出張申請」を作成する
2. 問い合わせ管理アプリに「出張申請」テーブルを追加する
3. 「出張申請」テーブルの列を設定する
4. 出張申請を作成する
5. 出張申請メールのビュー（View：画面）を設定する
6. Automationを作成する
7. 出張申請メールを送信して、Gmail上で承認する

今回は、GmailのDynamic emailという機能を使用して、Automationから申請承認メールを送信します。
メール送信について、以下のような制限があるので注意してください。

• Automationを使用したメール送信制限
  • アプリがプロトタイプ（Not Deployed）の状態では、以下のような注意が表示されます。この時に送信したメールは、すべてアプリオーナー（アプリ作成者）のメールアドレスに届きます。任意のメールアドレスに送信するためには、アプリをデプロイ（Deployed）する必要があります。

• Dynamic emailの機能制限
  • メール受信者はアプリ共有しているユーザーである必要があります。
  • 自社ドメイン外にも送信ができます（Cross-domainサポート）。ただし、一日50件の制限と社外ドメイン分のライセンス費用が追加でかかります。

2. Googleスプレッドシート「出張申請」を作成する

問い合わせ管理アプリに、出張申請を追加します。

はじめに、Googleスプレッドシートで「出張申請」を作成します。Google Workspaceの「Googleアプリ」アイコン（右上の9点ドット）をクリックして、「スプレッドシート」をクリックします。

「空白のスプレッドシート」をクリックして、新しいスプレッドシートを作成します。

作成したスプレッドシートのタイトルを「出張申請」にします。「シート1」ワークシートの名前も「出張申請」にします。

「出張申請」ワークシートの1行目に、以下のデータ項目をA〜J列に入力します。

• ID
• 予定カレンダー
• 申請日
• 申請者
• 出発日
• 帰着日
• 訪問先
• 目的
• 費用
• 承認

 

3.「出張申請」テーブルを追加する

アプリエディタに戻ります。

アプリエディタ左側メニュー「Data」をクリックして、Dataナビゲーション右上にある「+」ボタンをクリックします。

「Add data」が開くので、Google Sheetsをクリックして選択します。

「出張申請」のGoogleスプレッドシートを選択して、「Select」をクリックします。

「出張申請」ワークシートのチェックボックスがONになっていることを確認して、「Add 1 table」をクリックします。

Dataナビゲーションに「出張申請」テーブルが追加されます。

 

4.「出張申請」テーブルの列を設定する

Dataナビゲーションにある「出張申請」テーブルをクリックして選択します。

中央のメインパネルに「出張申請」テーブルの列設定パネルが表示されます。

それでは、「出張申請」テーブルの列を設定してきましょう。下の表のように、各列の

• TYPEをプルダウンから選択する
• KEY、LABEL、SHOW?などのチェックボックスをON / OFF する

ことで設定してください。

「ID」列と「予定カレンダー」列のTYPEは、テーブルを読み込んだ時に自動的に設定されていると思います。チェックボックスは「ON」のフィールドをチェックして、空欄はチェックを外してOFFにします。

下の表のように、各列のフィールドを設定してください。

「出張申請」テーブルの列設定

 

今回は、以下の列設定に関する詳細な解説は省略します。

• 「ID」列の設定について
• KEYとLABELについて
• 「Ref」について

こちらの解説は、「AppSheetで請求書アプリ（第2回）スプレッドシートからアプリ作成」や「AppSheet で在庫管理アプリ（第2回）スプレッドシートからアプリ作成」など、ハンズオンでアプリ作成するブログ記事で解説しているので、参照してください。

それでは、いくつかの列について、設定を追加していきます。

予定カレンダー

「予定カレンダー」列の設定を確認してみましょう。

テーブルを追加した時に、Typeが「Ref」に自動的に設定されていると思います。
編集アイコンをクリックして、列設定パネルを開きます。

「予定カレンダー」列は、テーブルを追加した時に

• Type：Ref
• Source table：予定カレンダー

が設定されています。設定はこのままで、変更する必要はありません。

Initial Value（初期値）を設定する

以下の列について、Initial Value（初期値）を設定します。

• 申請日
• 出発日
• 帰着日
• 目的

エディタ中央のメインパネルで、各列のInitial Valueフィールドをクリックします。

Expression Assistantが開くので、以下の式をコピペしてください。

申請日

出発日

帰着日

目的

 

費用

「費用」列の編集アイコンをクリックして、列設定パネルを開きます。

以下の項目を設定します。

• Decimal digits：0
• Currency symbol：¥

承認

「承認」列の編集アイコンをクリックして、列設定パネルを開きます。

以下の項目を設定します。

• No value：却下
• Yes value：承認

アプリエディタ右上の「Save」ボタンをクリックして、変更を保存します。

 

5. ビュー（画面）を設定する

次に、ビュー（画面）を設定します。

エディタ右側のプレビュー画面で、タブメニュー「お問い合わせ」をクリックして選択します。前回（第4回）で、予定カレンダーに予定を追加した問い合わせを1件、クリックします。

「Related 予定カレンダーs」に、前回（第4回）で追加した予定が1件あると思うので、クリックします。

「Related 出張申請s」の「Add」をクリックします。

出張申請のフォーム（Form）ビュー（画面）が表示されます。

出張申請を追加する時に、「承認」欄は不要なので非表示にしましょう。プレビュー画面下にある、「View: 出張申請_Form」のリンクをクリックします。

中央のメインパネルに、「出張申請_Form」ビューの設定パネルが開きます。

Column orderの「Add」を1回クリックして、その後「Enter（Return）」キーを長押しします。

「出張申請」テーブルの列がすべて追加されます。以下の不要な列をゴミ箱アイコンをクリックして削除します。

• All other columns
• _RowNumber
• 承認

アプリエディタ右上の「Save」ボタンをクリックして、変更を保存します。

出張申請を1件追加してみましょう。

出張申請のフォームビューを表示すると、「承認」欄が非表示になっています。必要事項を適当に入力して、「Save」をクリックして出張申請を1件追加してください。

予定カレンダーの「Related 出張申請s」に追加した出張申請が1件、表示されるのでクリックします。

先ほど追加した出張申請の詳細（Detail）ビュー（画面）が表示されます。

このビューの設定をしたいので、プレビュー画面下にある、「View: 出張申請_Detail」のリンクをクリックします。

中央のメインパネルに、「出張申請_Detail」ビューの設定パネルが開きます。

Quick edit columnsの「Add」をクリックして、1つ追加します。

プルダウンで「承認」を選択します。

アプリエディタ右上の「Save」ボタンをクリックして、変更を保存します。

 

6. Automationを作成する

出張申請で使用するAutomationでは、以下のようなワークフローを実行します。

• ボット（Bot）：出張申請を追加した時に申請メールを送信する
• イベント（Event）：「出張申請」テーブルに出張申請が追加された時
• プロセス（Process）、ステップ（Step）：申請メールを送信する

ボットを作成します。

左側メニュー「Automation」をクリックします。Botsナビゲーションの「+」ボタン（Create a new bot）をクリックします。

「Create a new bot」ボタンをクリックしてボットを追加します。

Botsナビゲーションの「Other」内に「New Bot」が追加されます。右端にある3点ドットアイコンをクリックして「Rename」をクリックします。

ボットの名前を「出張申請」に変更します。

続けて、イベントを設定します。

「Configure event」ボタンをクリックします。

Event name「出張申請を追加」にします。

Tableは「出張申請」に設定します。

Data change typeを「Adds」に変更します。出張申請が追加された時に、メール送信を行うプロセスを実行できるようになります。

「Add a step」をクリックして、新しいステップを追加します。

ステップの名前をつけます。

「Step name」に「申請メール送信」と名前をつけました。

ステップを開いて、種類を「Run a task」にします。

エディタ画面右側に Settings ペインが開くので、「Send an email」ボタンをクリックして選択します。

「Send an email」には2つのEmail Typeがあります。

• Embedded app view：dynamic emailという機能で、Gmail上にアプリのビュー（画面）を表示してデータ変更などの操作ができます。
• Custom template：通常のemailです。

今回は、Email Typeで「Embedded app view」ボタンをクリックして選択します。

Tableは「出張申請」に設定されます。

Toは、メール受信者を「Add」で追加できます。
アプリがプロトタイプ（Deployed）の場合、設定が無視されて、すべてのメールはアプリオーナー（アプリ作成者）のアドレスに届きます。よって、ここでは設定はしません。

Email Subjectは、メールの標題です。ここでは簡単に「出張申請」というテキストを入力しておきます。

App view to embed in email bodyは、Gmail上で申請メールを開いた時に、表示したいアプリのビューを選択します。
選択できるのは、Detail（詳細）ビューかForm（フォーム）ビューですが、ここでは、「出張申請_Detail」ビューを選択します。

ビューを選択したら、「Preview email body」ボタンをクリックしてみましょう。

プレビューが表示されて、Gmail上で申請メールを開いた時に、どのようにビューが表示されるのか確認できます。

「承認」は、Quick edit columnsに設定したので、詳細（Detail）ビュー上でもデータ変更できるようになっています。メール上で、ボタンクリックで承認か却下か選択できることが分かります。

アプリエディタ右上の「Save」ボタンをクリックして、変更を保存します。

 

7. 出張申請メールを送信して、Gmail上で承認する

出張申請メールを送信して、Gmail上で申請を承認してみましょう。

エディタ画面右側のプレビュー画面で、タブメニュー「お問い合わせ」を選択して、予定カレンダーに予定を追加済みの問い合わせを1件、クリックします。

「Related 予定カレンダーs」の予定を1件クリックして選択します。さきほど、出張申請を追加した予定で大丈夫です。

「Related 出張申請s」の「Add」をクリックします。

出張申請のフォーム（Form）ビュー（画面）が表示されます。

さきほどと同じ内容でよいので、フォームに入力後、「Save」をクリックして出張申請を追加します。

「Related 出張申請s」に出張申請が1件、追加されます。

Gmailを開いてみましょう。「出張申請」という標題のメールが届いているでしょうか。
メールが届いたら、クリックして開いてみましょう。

メール本文に、「出張申請_Detail」ビューが表示されて、アプリを操作できるようになります。

「承認」ボタンをクリックして選択してみましょう。

「Last saved just now」と表示されたら、データ変更が保存されています。

アプリエディタに戻ります。

エディタ画面右側のプレビューで、さきほど追加した出張申請を開いて、詳細（Detail）ビューを確認してみましょう。

アプリ上でも「承認」されていることが分かります。

以上、AppSheetとGmailを連携して、メール上にアプリのビューを表示し、データ変更してみました。
今回の出張申請のように、申請承認ワークフローの中にメール送信（dynamic email機能を活用したEmbedded app view）を追加することで、自動化ができるようになります。

ここまで、

• Googleフォーム
• Googleチャット
• Googleカレンダー
• Gmail

とAppSheetの連携について、具体的な活用事例をハンズオンで学習しました。AppSheet アプリに機能を追加して、連携することで、これらのGoogle Workspaceサービスをさらに活用できるようになるので、是非チャレンジしてみてください。