今回は、公式サイトのクイックスタートを試してみます。
このアドオンサンプルは、「任意のメールを選択した際、そのメールの送信者に関連するメールを最新5件表示する」という機能です。
G Suiteの使用者は、実際に作成して試してみてください。以下公式のサンプルを日本語で転記します。
クイックスタート:Gmailアドオン https://developers.google.com/gmail/add-ons/guides/quickstart
必要なもの
- Gmailが有効なGoogleアカウント
- Googleドライブへのアクセスができること
ステップ1 スクリプトを作成する
- 新規にApps Script projectを作成します。
- 空のプロジェクトを選択します。
- 「コード.gs」を下記のように記述します。
- ファイル > 保存クリックして、プロジェクト名を「Quickstart」にしてOKを押す。
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();
}
ステップ2 マニフェストファイルを更新する
- スクリプトエディタの「表示」>「マニフェストファイルを表示」>「appsscript.json」を選択
- 中身を下記の記述に置き換える
- 「ファイル」>「保存」をクリックする
{
"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"
}
}
ステップ3 アドオンをデプロイする
- スクリプトエディタの「公開」>「マニフェストから配置」を選択する
- Deploymentsダイアログの「Get ID」をクリックして、Deployment IDをコピーする
- ダイアログを閉じて、Gmailアドオン設定タブを開きます。
- 「ご利用のアカウントで、デベロッパアドオンを有効にします」にチェックする。
- コピーしたDeployment IDを貼り付けて、「インストール」をクリックする。
- 以下のようになっていればインストール完了です。
ステップ4 アドオンを使ってみる
- Gmailを開くか、すでに開いていればページをリフレッシュします。
- 任意のメールを選択して、アドオンを開きます。
- 「アクセスを承認」をクリックして該当アカウントを選択して、「許可」します。