2018年10月29日月曜日

アドオンでGmailをカスタマイズする

Gmail アドオンを活用すれば Gmail のサイドバーをカスタマイズして、自社に必要な機能を追加することができます。また、その機能はAndroidOSのGmailアプリからも利用することができるので、機能によっては業務効率が大きく向上することも期待できます。現在、iOSのGmail アプリはまだ対応していないそうなので、しばらく待ちましょう。

今回は、公式サイトのクイックスタートを試してみます。
このアドオンサンプルは、「任意のメールを選択した際、そのメールの送信者に関連するメールを最新5件表示する」という機能です。

G Suiteの使用者は、実際に作成して試してみてください。以下公式のサンプルを日本語で転記します。

クイックスタート:Gmailアドオン https://developers.google.com/gmail/add-ons/guides/quickstart

必要なもの

  1. Gmailが有効なGoogleアカウント
  2. Googleドライブへのアクセスができること

ステップ1 スクリプトを作成する

  1. 新規にApps Script projectを作成します。
  2. 空のプロジェクトを選択します。
  3. 「コード.gs」を下記のように記述します。
  4. var MAX_THREADS = 5;
    
    /**
     * Returns the array of cards that should be rendered for the current
     * e-mail thread. The name of this function is specified in the
     * manifest 'onTriggerFunction' field, indicating that this function
     * runs every time the add-on is started.
     *
     * @param {Object} e data provided by the Gmail UI.
     * @return {Card[]}
     */
    function buildAddOn(e) {
      // Activate temporary Gmail add-on scopes.
      var accessToken = e.messageMetadata.accessToken;
      GmailApp.setCurrentMessageAccessToken(accessToken);
    
      var messageId = e.messageMetadata.messageId;
      var senderData = extractSenderData(messageId);
      var cards = [];
    
      // Build a card for each recent thread from this email's sender.
      if (senderData.recents.length > 0) {
        senderData.recents.forEach(function(threadData) {
          cards.push(buildRecentThreadCard(senderData.email, threadData));
        });
      } else {
        // Present a blank card if there are no recent threads from
        // this sender.
        cards.push(CardService.newCardBuilder()
          .setHeader(CardService.newCardHeader()
            .setTitle('No recent threads from this sender')).build());
      }
      return cards;
    }
    
    /**
     *  This function builds a set of data about this sender's presence in your
     *  inbox.
     *
     *  @param {String} messageId The message ID of the open message.
     *  @return {Object} a collection of sender information to display in cards.
     */
    function extractSenderData(messageId) {
      // Use the Gmail service to access information about this message.
      var mail = GmailApp.getMessageById(messageId);
      var threadId = mail.getThread().getId();
      var senderEmail = extractEmailAddress(mail.getFrom());
    
      var recentThreads = GmailApp.search('from:' + senderEmail);
      var recents = [];
    
      // Retrieve information about up to 5 recent threads from the same sender.
      recentThreads.slice(0, MAX_THREADS).forEach(function(thread) {
        if (thread.getId() != threadId && ! thread.isInChats()) {
          recents.push({
            'subject': thread.getFirstMessageSubject(),
            'count': thread.getMessageCount(),
            'link': 'https://mail.google.com/mail/u/0/#inbox/' + thread.getId(),
            'lastDate': thread.getLastMessageDate().toDateString()
          });
        }
      });
    
      var senderData = {
        email: senderEmail,
        recents: recents
      };
    
      return senderData;
    }
    
    /**
     *  Given the result of GmailMessage.getFrom(), extract only the email address.
     *  getFrom() can return just the email address or a string in the form
     *  "Name ".
     *
     *  @param {String} sender The results returned from getFrom().
     *  @return {String} Only the email address.
     */
    function extractEmailAddress(sender) {
      var regex = /\<([^\@]+\@[^\>]+)\>/;
      var email = sender; // Default to using the whole string.
      var match = regex.exec(sender);
      if (match) {
        email = match[1];
      }
      return email;
    }
    
    /**
     *  Builds a card to display information about a recent thread from this sender.
     *
     *  @param {String} senderEmail The sender email.
     *  @param {Object} threadData Infomation about the thread to display.
     *  @return {Card} a card that displays thread information.
     */
    function buildRecentThreadCard(senderEmail, threadData) {
      var card = CardService.newCardBuilder();
      card.setHeader(CardService.newCardHeader().setTitle(threadData.subject));
      var section = CardService.newCardSection()
        .setHeader('Recent thread');
      section.addWidget(CardService.newTextParagraph().setText(threadData.subject));
      section.addWidget(CardService.newKeyValue()
        .setTopLabel('Sender')
        .setContent(senderEmail));
      section.addWidget(CardService.newKeyValue()
        .setTopLabel('Number of messages')
        .setContent(threadData.count.toString()));
      section.addWidget(CardService.newKeyValue()
        .setTopLabel('Last updated')
        .setContent(threadData.lastDate.toString()));
    
      var threadLink = CardService.newOpenLink()
        .setUrl(threadData.link)
        .setOpenAs(CardService.OpenAs.FULL_SIZE);
      var button = CardService.newTextButton()
        .setText('Open Thread')
        .setOpenLink(threadLink);
      section.addWidget(CardService.newButtonSet().addButton(button));
    
      card.addSection(section);
      return card.build();
    }
  5. ファイル > 保存クリックして、プロジェクト名を「Quickstart」にしてOKを押す。

ステップ2 マニフェストファイルを更新する

  1. スクリプトエディタの「表示」>「マニフェストファイルを表示」>「appsscript.json」を選択
  2. 中身を下記の記述に置き換える
  3. {
      "oauthScopes": [
        "https://www.googleapis.com/auth/gmail.addons.execute",
        "https://www.googleapis.com/auth/gmail.readonly"
      ],
      "gmail": {
        "name": "Gmail Add-on Quickstart",
        "logoUrl": "https://www.gstatic.com/images/icons/material/system/2x/bookmark_black_24dp.png",
        "contextualTriggers": [{
          "unconditional": {
          },
          "onTriggerFunction": "buildAddOn"
        }],
        "openLinkUrlPrefixes": [
          "https://mail.google.com/"
        ],
        "primaryColor": "#4285F4",
        "secondaryColor": "#4285F4"
      }
    }
    
  4. 「ファイル」>「保存」をクリックする

ステップ3 アドオンをデプロイする

  1. スクリプトエディタの「公開」>「マニフェストから配置」を選択する
  2. Deploymentsダイアログの「Get ID」をクリックして、Deployment IDをコピーする

  3. ダイアログを閉じて、Gmailアドオン設定タブを開きます。
  4. 「ご利用のアカウントで、デベロッパアドオンを有効にします」にチェックする。
  5. コピーしたDeployment IDを貼り付けて、「インストール」をクリックする。

  6. 以下のようになっていればインストール完了です。

ステップ4 アドオンを使ってみる

  1.  Gmailを開くか、すでに開いていればページをリフレッシュします。
  2. 任意のメールを選択して、アドオンを開きます。

  3. 「アクセスを承認」をクリックして該当アカウントを選択して、「許可」します。

以上でアドオンの作成と反映は完了です。