AppSheet と Google Workspace の連携（5）Gmail

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

1. AppSheet とGmailを連携させる

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

1. データソースのGoogleスプレッドシートに「出張申請」シートを追加して、テーブルとして読み込む
2. 「出張申請」テーブルの列を設定する
3. 出張申請を作成する
4. 出張申請メールのビュー（View：画面）を設定する
5. Automationを作成する
6. 失調申請メールを送信して、Gmail上で承認する

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

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

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

2.「出張申請」シートを追加して、テーブルとして読み込む

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

アプリエディタ左側メニュー「Data」をクリックして、Dataナビゲーションで「フォームの回答 1」を選択します。中央のメインパネル右上にある「View data source」をクリックします。

データソース（Googleスプレッドシート）の「お問い合わせ（回答）」が開きます。

左下の「+」ボタンをクリックして、ワークシートをひとつ追加します。

追加したワークシートの名前を「出張申請」にします。

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

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

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

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

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

「お問い合わせ（回答）」のGoogleスプレッドシートを選択して、「Select」をクリックします。

「Create a new table」が開くので、Worksheet Name/Qualifierで「出張申請」を選択します。

「Add This Table」ボタンをクリックして、新しいテーブルを追加します。

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

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

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」ボタンをクリックして、変更を保存します。

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

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

エディタ右側のプレビュー画面で、タブメニュー「フォームの回答 1」をクリックして選択します。問い合わせを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」ボタンをクリックして、変更を保存します。

5.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「出張申請を追加」にします。

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

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

「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 nameは「出張申請」を選択します。

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」ボタンをクリックして、変更を保存します。

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

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

エディタ画面右側のプレビュー画面で、タブメニュー「フォームの回答 1」を選択して、問い合わせを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サービスをさらに活用できるようになるので、是非チャレンジしてみてください。