Gmailアドオンを作る (3)　TextButtonでアクションを作成しよう

今回はTextButtonを使って、用意した関数を実行する方法を覚えましょう。そしてサンプルとして、選択したスレッドの全内容をテキストファイルにまとめて保存するアドオンを作ってみます。

TextButtonを利用するには？

前回、クリックして選択したメッセージの内容を表示するアドオンを作成しましたが、ユーザーがアドオンを操作してなにかの処理を実行させるには、「操作用のUI」が必要になります。例えばボタンやリンクのようなものがあれば、それをクリックして何かを実行させることができるようになります。

ここでは、もっともシンプルな「TextButton」というUI部品を使ってみましょう。TextButtonは、テキストだけのボタンで、クリックして何らかの処理を実行させることができます。Webページの「リンク」のようなものと考えればいいでしょう。これは、以下のような形でオブジェクトを作成します。

TextButtonの作成
var 変数 = CardService.newTextButton()
.setText( 表示テキスト )
.setOnClickAction( [Action] );

CardService.newTextButtonメソッドでオブジェクトを作成します。setTextで表示するテキストを設定し、setOnClickActionでクリックしたときの処理を設定します。このsetOnClickActionの引数には「Action」というオブジェクトを用意します。これは以下のように作成します。

Actionの作成
var 変数 = CardService.newAction()
.setFunctionName( 関数名 );

CardService.newActionでオブジェクトを作成し、setFunctionNameでアクション時に実行する関数を設定します。こうして作成したActionをsetOnClickActionでTextButtonに設定すれば、クリックして何かを実行させることができるようになります。

Notificationを利用するには？

何かの処理を実行させたら、実行後の結果などを表示する必要もあるでしょう。何かのメッセージを表示するもっとも簡単な方法は「Notification」を使うことです。これは以下のような形で作成します。

Notificationの作成
var 変数 = CardService.newNotification().setText( 表示テキスト );

setTextで表示するテキストを設定するだけの比較的簡単なオブジェクトです。ただし、これを作っただけではメッセージは表示されません。

このNotificationは、TextButtonなどで呼び出される関数の中で利用することになります。こうした関数では、最後に「ActionResponse」というオブジェクトを作成してreturnします。このとき、setNotificationというメソッドを使ってActionResponseにNotificationを設定します。

ActionResponseを作成して返す
return CardService.newActionResponseBuilder()
.setNotification( [Notification] )
.build();

Actionで実行する関数で処理を実行した後、最後にActionResponseをreturnすることで、Notificationによるメッセージが表示されるようになります。

マニフェストファイルを修正する

では、TextButtonとNotificationを利用したアドオンを作ってみましょう。前回、作成したアドオンのプロジェクトを今回も再利用します。まず、マニフェストファイルのoauthScopesを以下のように修正しておきましょう。

リスト1

"oauthScopes": [
    "https://mail.google.com/",
    "https://www.googleapis.com/auth/gmail.addons.execute",
    "https://www.googleapis.com/auth/gmail.addons.current.message.metadata",
    "https://www.googleapis.com/auth/gmail.addons.current.message.readonly",
    "https://www.googleapis.com/auth/gmail.readonly",
    "https://www.googleapis.com/auth/drive"
],

これで必要なアクセス権が許可されるようになります。今回は、gmail.addonsのexecuteを追加してスクリプトが実行できるようにしました。またdriveを追加し、Googleドライブにアクセスできるようにしています。

スクリプトを修正しよう

では、アドオンプロジェクトのスクリプトを修正しましょう。以下のように内容を書き換えて下さい。

リスト2

function buildAddOn(e) {
  var accessToken = e.messageMetadata.accessToken;
  GmailApp.setCurrentMessageAccessToken(accessToken);
  // 選択メッセージの情報を取得
  var id = e.messageMetadata.messageId;
  var msg = GmailApp.getMessageById(id);
  var subject = msg.getThread().getFirstMessageSubject();
  // CardHeader作成
  var header = CardService.newCardHeader()
    .setTitle(subject);
  // KeyValueの作成
  var from = CardService.newCardSection()
    .addWidget(
      CardService.newKeyValue().setTopLabel("From:")
        .setContent(msg.getFrom())
    );
  // TextParagraphの作成
  var content = CardService.newCardSection()
    .addWidget(
      CardService.newTextParagraph()
        .setText(msg.getPlainBody())
    );
  // Actionの作成
  var buttonAction = CardService.newAction()
    .setFunctionName("notificationCallback");
  // TextButtonの作成
  var button = CardService.newTextButton().setText('SAVE THREAD')
    .setOnClickAction(buttonAction);
  // TextButton用CardSectionの作成
  var ui = CardService.newCardSection()
    .addWidget(button);
   // Cardの作成
   var card = CardService.newCardBuilder()
     .setHeader(header)
     .addSection(from)
     .addSection(ui)
     .addSection(content)
     .build();

return [card];
}

// TextButtonのActionで実行される関数
function notificationCallback(e) {
  var accessToken = e.messageMetadata.accessToken;
  GmailApp.setCurrentMessageAccessToken(accessToken);
  // 選択メッセージの情報を取得
  var id = e.messageMetadata.messageId;
  var msg = GmailApp.getMessageById(id);
  var subject = msg.getThread().getFirstMessageSubject();
  // スレッドのメッセージをテキストにまとめる
  var thread = msg.getThread();
  var messages = thread.getMessages();
  var result = '※「' + subject + '」のスレッド\r\n\r\n';
  for (var n in messages) {
    result += '\r\n\r\n[message]=============================\r\n\r\n'
      + messages[n].getPlainBody();
  }
  // Googleドライブにファイルを保存
  DriveApp.createFile(subject + ' の内容.txt', result);
  // Notificationを作成
  var notify = CardService.newNotification().setText('スレッドを保存しました。');
  // ActionResponseを作成して返す
  return CardService.newActionResponseBuilder()
    .setNotification(notify)
    .build();
}

Gmailをリロードし、作成したアドオンのアイコンをクリックしてパネルを呼び出して下さい。メールを選択しアドオンの表示が生成される際、アクセスの承認を行う必要があるでしょう。「アクセスを承認」リンクをクリックし、Googleアカウントを選択して承認して下さい。

メッセージを選択すると、その内容がアドオンのパネルに表示されますが、コンテンツ部分の手前に「SAVE THREAD」というリンクが表示されます。

• アドオンに「SAVE THREAD」リンクが追加される。

リンクをクリックすると、ウインドウの左下に「スレッドを保存しました」というメッセージが表示されます。これが、Notificationによるメッセージです。

• 画面左下に表示されるNotificationのメッセージ。

メッセージが表示さたら、Googleドライブのルートを開いて下さい。スレッド名のテキストファイルが保存されています。これを開くと、選択したスレッドの全メールの内容がまとめて保存されているのがわかります。

• 保存されたテキストファイルを開くと、スレッドのメールの内容がすべて書き出されている

以上、3回に渡って、Gmailのアドオンプログラム作成について説明をしました。アドオンを使えば、Gmailに独自の機能を追加し拡張することができます。Google Apps ScriptでGmailをカスタマイズする、おそらく唯一の機能といえるものですので、Gmailを更に活用したいならば、ぜひとも使えるようになっておきたいですね！