ユーザーが Gmail を読んでいるときに カードベースのインターフェースを提供すること Google Workspace アドオンを使用して ユーザーが新しいメッセージを作成したり、 簡単に返信できるようになりましたこれにより、Google Workspace アドオンでユーザーのメールを作成するタスクを自動化できます。
アドオンの作成 UI にアクセスする
アドオンの作成 UI を表示する方法は 2 つあります。1 つ目の方法は アドオンを開いた状態で新しい下書きや返信を作成する。2 つ目の 下書きの作成中にアドオンを起動する方法です。
いずれの場合も、アドオンは対応する Compose トリガー関数（アドオンで定義） マニフェストをご覧ください。 Compose トリガー関数は、その Compose の Compose UI を作成します。 アクションが実行され、Gmail がユーザーに表示されます。
Compose アドオンの作成
アドオンに Compose 機能を追加する手順は次のとおりです。
gmail.composeTriggerを追加する フィールドに追加します。 マニフェスト マニフェストを更新します。 含めるスコープ 作成アクションに必要なオブジェクトです- 次のときに Compose UI を作成する Compose トリガー関数を実装します。
トリガーが発動しますCompose トリガー関数は、単一のリクエストまたは
Cardオブジェクトまたは 構成するCardオブジェクト 作成アクションの作成 UI - ユーザーのリクエストに応答するのに必要な、関連するコールバック関数を実装します。
作成する方法を学びます。これらの関数は Compose アクション自体ではありません
（Compose UI が表示されるだけです）。むしろ
ファイアウォール ルールの個々の要素に
Compose UI が選択されています。たとえばボタンを含む UI カードは
通常、ユーザーが広告をクリックしたときに実行されるコールバック関数が関連付けられています。
クリックします。下書きメッセージを更新するウィジェットのコールバック関数
コンテンツで
UpdateDraftActionResponse渡されます。
Compose トリガー関数
アドオンの作成 UI はアドオンのメッセージと同じ方法で構築される UI - Apps Script カードサービスを使用して作成 カードに入力し、 widgets。
実装する必要があります。
gmail.composeTrigger.selectActions[].runFunction
マニフェストで定義した値を使用します。Compose トリガー関数は、
単一の Card オブジェクト、または
Card オブジェクトの配列
そのアクションの Compose UI を構成する要素です。これらの関数はよく似ています。
コンテキスト トリガー関数
同じ方法でカードを作成できます
Compose トリガー イベント オブジェクト
作成アクションを選択すると、対応する作成トリガーが実行される 関数にイベント オブジェクトを渡します。 渡します。イベント オブジェクトは、アドオン コンテキストに関する情報を保持できます。 トリガー関数に作成される下書きです
イベント オブジェクトの構造をご覧ください。
をご覧ください。情報
イベント オブジェクトに含まれる各値は、
gmail.composeTrigger.draftAccess
マニフェスト フィールド:
gmail.composeTrigger.draftAccessマニフェスト フィールドがNONEであるか、含まれていない場合、イベント オブジェクトには 最小限に抑える必要があります。gmail.composeTrigger.draftAccessの場合METADATAに設定されている場合、Compose トリガー関数に渡されるイベント オブジェクト には、作成中のメールの受信者のリストが入力されます。
アクティブな下書きにコンテンツを挿入する
通常、Google Workspace アドオンの作成 UI には メッセージ作成に役立つユーザー オプションとコントロールです。これらのユースケースでは ユーザーが UI で選択を行うと、アドオンはその選択を解釈します それに応じて、現在のメールの下書きを更新します。
現在のメールの下書きを簡単に更新できるように、カードサービス 次のクラスで拡張されました。
ContentType- 変更可能な HTML、変更不可能な HTML（ （ユーザーは編集不可）、書式なしテキストのコンテンツなどです。UpdateDraftActionResponse- 表します アクションに対する返信で、現在のメールの下書きを更新する。UpdateDraftActionResponseBuilder- A 構築UpdateDraftActionResponse説明します。UpdateDraftBodyAction- 表します 現在の下書きメールの本文を更新するアクション。UpdateDraftBodyType- 本文の変更方法を定義する列挙型です。UpdateDraftSubjectAction- 表します 現在の下書きメールの件名を更新するアクション。UpdateDraftToRecipientsAction- 表します 現在の下書きメールの To 受信者を更新する操作。UpdateDraftCcRecipientsAction- 表します 現在の下書きメールの Cc 受信者を更新する操作。UpdateDraftBccRecipientsAction- 表します 現在の下書きメールの Bcc 受信者を更新する操作。
通常、アドオンの作成 UI には [保存] ボタンまたは [挿入]通知するウィジェットを
クリックして UI での選択が完了したことを示し、
作成中のメールに追加できるオプションです。これを追加するには
インタラクティビティを提供する場合、ウィジェットは
関連付けられている Action オブジェクト。
ウィジェットが呼び出されたときに特定のコールバック関数を実行するよう、アドオンに指示しています。
クリックします。これらのコールバック関数を実装する必要があります。各コールバック関数は、
ビルドされた
UpdateDraftActionResponse
現在の下書きメールに対する変更の詳細を示すオブジェクトです。
例 1
次のコード スニペットは、現在のメールの下書きの件名、宛先、Cc、Bcc の受信者を更新する Compose 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
次のコード スニペットは、画像を挿入する Compose 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;
}