メール作成用 UI を作成アクションで拡張する

ユーザーが Gmail メッセージを読んでいるときにカードベースのインターフェースを表示するだけでなく、Gmail を拡張する Google Workspace アドオンは、ユーザーが新しいメッセージを作成したり、既存のメッセージに返信したりするときに別のインターフェースを提供できます。これにより、アドオンはユーザーのメール作成タスクを自動化できます。

Google Workspace アドオンの作成 UI にアクセスする

アドオンの作成 UI を表示するには、次の 2 つの方法があります。1 つ目は、アドオンがすでに開いている状態で、新しい下書きの作成または返信を開始する方法です。2 つ目は、下書きを作成しながらアドオンを起動する方法です。

いずれの場合も、アドオン マニフェストで定義されている対応する 作成トリガー関数がアドオンによって実行されます。作成トリガー関数は、その作成アクションの作成 UI を作成します。この UI は Gmail によってユーザーに表示されます。

作成アドオンを作成する

次の一般的な手順に沿って、アドオンに作成機能を追加できます。

  1. アドオン スクリプト プロジェクト マニフェストgmail.composeTrigger フィールドを追加し、作成アクションに必要なマニフェスト スコープを含めるように更新します。
  2. トリガーが起動したときに作成 UI を作成する作成トリガー関数を実装します。作成トリガー関数は、単一の Cardオブジェクトか、作成アクションの作成 UI を形成する Cardオブジェクトの配列を返します。
  3. ユーザーの作成 UI 操作に対応するために必要な関連するコールバック関数を実装します。これらの関数は、作成アクション自体ではありません(作成 UI の表示のみ)。作成 UI のさまざまな要素が選択されたときに何が起こるかを制御する個々の関数です。たとえば、ボタンを含む UI カードには通常、ユーザーがそのボタンをクリックしたときに実行される関連するコールバック関数があります。下書きメッセージのコンテンツを更新するウィジェットのコールバック関数は、 UpdateDraftActionResponse オブジェクトを返す必要があります。

作成トリガー関数

アドオンの作成 UI は、 アドオンのメッセージ UI と同じ方法で作成されます。Apps Script Card サービスを使用してカードを作成し、 ウィジェットを入力します。

マニフェストで定義した gmail.composeTrigger.selectActions[].runFunction を実装する必要があります。作成トリガー関数は、単一の Card オブジェクトか、Card オブジェクトの配列を返す必要があります。これらの関数は、コンテキスト トリガー関数とよく似ており、同じ方法でカードを作成する必要があります。

作成トリガー イベント オブジェクト

作成アクションが選択されると、対応する作成トリガー 関数が実行され、イベント オブジェクト がパラメータとして関数に渡されます。イベント オブジェクトは、アドオンのコンテキストと作成中の下書きに関する情報をトリガー関数に伝達できます。

イベント オブジェクトでの情報の配置方法について詳しくは、イベント オブジェクトの構造 をご覧ください。イベント オブジェクトに含まれる情報は、 マニフェスト フィールドの値によって部分的に制御されます。gmail.composeTrigger.draftAccess

  • gmail.composeTrigger.draftAccess マニフェスト フィールドが NONE の場合、または含まれていない場合、イベント オブジェクトには 最小限の情報しか含まれません。

  • If gmail.composeTrigger.draftAccessMETADATA に設定されている場合、作成トリガー関数に渡されるイベント オブジェクト には、作成中のメールの受信者のリストが入力されます。 METADATA 下書きアクセスを使用するには、 アドオン マニフェストに https://www.googleapis.com/auth/gmail.addons.current.message.metadata Gmail スコープを含める必要があります。

アクティブな下書きにコンテンツを挿入する

通常、 アドオンの作成 UI には、メッセージの作成に役立つオプションとコントロールが用意されています。このようなユースケースでは、ユーザーが UI で選択を行うと、アドオンが選択内容を解釈し、現在の作業中のメールの下書きを適宜更新します。

現在の下書きメールを簡単に更新できるように、Card サービス が次のクラスで拡張されました。

通常、アドオンの作成 UI には、[保存] ウィジェットまたは [挿入] ウィジェットが含まれています。ユーザーは、このウィジェットをクリックして、UI での選択が完了し、選択した内容を作成中のメールに追加することを指定できます。このインタラクティビティを追加するには、ウィジェットに、ウィジェットがクリックされたときに特定のアドオンを実行するようにアドオンに指示する Actionオブジェクトを関連付ける必要があります。これらのコールバック関数を実装する必要があります。各コールバック関数は、現在のメールの下書きに加える変更の詳細を示す、作成済みの UpdateDraftActionResponse オブジェクトを返す必要があります。

例 1

次のコード スニペットは、現在のメールの下書きの件名、宛先、Cc、Bcc の受信者を更新する作成 UI を作成する方法を示しています。

/**
 * Compose trigger function that fires when the compose UI is
 * requested. Builds and returns a compose UI for inserting images.
 *
 * @param {event} e The compose trigger event object. Not used in
 *         this example.
 * @return {Card[]}
 */
function getComposeUI(e) {
  return [buildComposeCard()];
}

/**
 * Build a card to display interactive buttons to allow the user to
 * update the subject, and To, Cc, Bcc recipients.
 *
 * @return {Card}
 */
function buildComposeCard() {

  var card = CardService.newCardBuilder();
  var cardSection = CardService.newCardSection().setHeader('Update email');
  cardSection.addWidget(
      CardService.newTextButton()
          .setText('Update subject')
          .setOnClickAction(CardService.newAction()
              .setFunctionName('applyUpdateSubjectAction')));
  cardSection.addWidget(
      CardService.newTextButton()
          .setText('Update To recipients')
          .setOnClickAction(CardService.newAction()
              .setFunctionName('updateToRecipients')));
  cardSection.addWidget(
      CardService.newTextButton()
          .setText('Update Cc recipients')
          .setOnClickAction(CardService.newAction()
              .setFunctionName('updateCcRecipients')));
  cardSection.addWidget(
      CardService.newTextButton()
          .setText('Update Bcc recipients')
          .setOnClickAction(CardService.newAction()
              .setFunctionName('updateBccRecipients')));
  return card.addSection(cardSection).build();
}

/**
 * Updates the subject field of the current email when the user clicks
 * on "Update subject" in the compose UI.
 *
 * Note: This is not the compose action that builds a compose UI, but
 * rather an action taken when the user interacts with the compose UI.
 *
 * @return {UpdateDraftActionResponse}
 */
function applyUpdateSubjectAction() {
  // Get the new subject field of the email.
  // This function is not shown in this example.
  var subject = getSubject();
  var response = CardService.newUpdateDraftActionResponseBuilder()
      .setUpdateDraftSubjectAction(CardService.newUpdateDraftSubjectAction()
          .addUpdateSubject(subject))
      .build();
  return response;
}

/**
 * Updates the To recipients of the current email when the user clicks
 * on "Update To recipients" in the compose UI.
 *
 * Note: This is not the compose action that builds a compose UI, but
 * rather an action taken when the user interacts with the compose UI.
 *
 * @return {UpdateDraftActionResponse}
 */
function applyUpdateToRecipientsAction() {
  // Get the new To recipients of the email.
  // This function is not shown in this example.
  var toRecipients = getToRecipients();
  var response = CardService.newUpdateDraftActionResponseBuilder()
      .setUpdateDraftToRecipientsAction(CardService.newUpdateDraftToRecipientsAction()
          .addUpdateToRecipients(toRecipients))
      .build();
  return response;
}

/**
 * Updates the Cc recipients  of the current email when the user clicks
 * on "Update Cc recipients" in the compose UI.
 *
 * Note: This is not the compose action that builds a compose UI, but
 * rather an action taken when the user interacts with the compose UI.
 *
 * @return {UpdateDraftActionResponse}
 */
function applyUpdateCcRecipientsAction() {
  // Get the new Cc recipients of the email.
  // This function is not shown in this example.
  var ccRecipients = getCcRecipients();
  var response = CardService.newUpdateDraftActionResponseBuilder()
      .setUpdateDraftCcRecipientsAction(CardService.newUpdateDraftCcRecipientsAction()
          .addUpdateToRecipients(ccRecipients))
      .build();
  return response;
}

/**
 * Updates the Bcc recipients  of the current email when the user clicks
 * on "Update Bcc recipients" in the compose UI.
 *
 * Note: This is not the compose action that builds a compose UI, but
 * rather an action taken when the user interacts with the compose UI.
 *
 * @return {UpdateDraftActionResponse}
 */
function applyUpdateBccRecipientsAction() {
  // Get the new Bcc recipients of the email.
  // This function is not shown in this example.
  var bccRecipients = getBccRecipients();
  var response = CardService.newUpdateDraftActionResponseBuilder()
      .setUpdateDraftBccRecipientsAction(CardService.newUpdateDraftBccRecipientsAction()
          .addUpdateToRecipients(bccRecipients))
      .build();
  return response;
}

例 2

次のコード スニペットは、現在のメールの下書きに画像を挿入する作成 UI を作成する方法を示しています。

/**
 * Compose trigger function that fires when the compose UI is
 * requested. Builds and returns a compose UI for inserting images.
 *
 * @param {event} e The compose trigger event object. Not used in
 *         this example.
 * @return {Card[]}
 */
function getInsertImageComposeUI(e) {
  return [buildImageComposeCard()];
}

/**
 * Build a card to display images from a third-party source.
 *
 * @return {Card}
 */
function buildImageComposeCard() {
  // Get a short list of image URLs to display in the UI.
  // This function is not shown in this example.
  var imageUrls = getImageUrls();

  var card = CardService.newCardBuilder();
  var cardSection = CardService.newCardSection().setHeader('My Images');
  for (var i = 0; i < imageUrls.length; i++) {
    var imageUrl = imageUrls[i];
    cardSection.addWidget(
        CardService.newImage()
            .setImageUrl(imageUrl)
            .setOnClickAction(CardService.newAction()
                  .setFunctionName('applyInsertImageAction')
                  .setParameters({'url' : imageUrl})));
  }
  return card.addSection(cardSection).build();
}

/**
 * Adds an image to the current draft email when the image is clicked
 * in the compose UI. The image is inserted at the current cursor
 * location. If any content of the email draft is currently selected,
 * it is deleted and replaced with the image.
 *
 * Note: This is not the compose action that builds a compose UI, but
 * rather an action taken when the user interacts with the compose UI.
 *
 * @param {event} e The incoming event object.
 * @return {UpdateDraftActionResponse}
 */
function applyInsertImageAction(e) {
  var imageUrl = e.parameters.url;
  var imageHtmlContent = '<img style=\"display: block\" src=\"'
        + imageUrl + '\"/>';
  var response = CardService.newUpdateDraftActionResponseBuilder()
      .setUpdateDraftBodyAction(CardService.newUpdateDraftBodyAction()
          .addUpdateContent(
              imageHtmlContent,
              CardService.ContentType.MUTABLE_HTML)
          .setUpdateType(
              CardService.UpdateDraftBodyType.IN_PLACE_INSERT))
      .build();
  return response;
}