arrow_back

Gmail アドオンを作成する

参加 ログイン
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Gmail アドオンを作成する

Lab 45分 universal_currency_alt クレジット: 1 show_chart 入門
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP249

Google Cloud セルフペース ラボ

概要

Gmail アドオンは Gmail 内のタスクを自動化し、ユーザーの時間と労力を節約します。Gmail アドオンでは、受信メッセージの内容を確認し、メッセージに対するさまざま処理を行うことができます。たとえば以下のような処理を行います。

  • Gmail UI にユーザー用の追加情報を表示する。
  • Google 以外のサービスに接続して、情報を取得したり、その他の処理を行ったりする。
  • インタラクティブなインターフェースを提供することで、ユーザーがアドオンを制御したり、別のサービスに情報を送信したりできるようにする。

演習内容

このハンズオンラボでは、メールスレッドのラベルを簡単に変更できる Gmail アドオンを作成します。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの手順をお読みください。ラボの時間は制限されており、一時停止することはできません。[ラボを開始] をクリックするとスタートするタイマーは、ラボ用のリソースを利用できる時間を示しています。

このハンズオンラボでは、シミュレーションやデモ環境ではなく、実際のクラウド環境を使ってご自身でラボのアクティビティを行うことができます。そのため、ラボの受講中に Gmail にログインしてアクセスするための新しい一時的な認証情報が提供されます。

必要なもの

このラボを完了するためには、下記が必要です。

  • 標準的なインターネット ブラウザ（Chrome を推奨）
  • ラボを完了するために十分な時間

  1. ラボには、必ずシークレット ウィンドウを使用してログインしてください。

  2. 準備が整ったら [ラボを開始] ボタン をクリックします。

    新しいパネルが開き、このラボで使用する一時的な認証情報が表示されます。

    ラボの料金をお支払いいただく必要がある場合は、表示されるポップアップでお支払い方法を選択してください。

  3. ラボの認証情報をメモしておきます。この情報は、ラボの Gmail にログインする際に使用します。

    他の認証情報を使用すると、エラーが表示されたり、料金が発生したりします。

  4. [Gmail を開く] をクリックします。

  5. [ログイン] ダイアログで [次へ] をクリックします。

  6. 提供されたパスワードを入力して [次へ] をクリックします。

  7. 必要に応じて、[同意] をクリックして利用規約に同意します。

Gmail が開きます。[使ってみる] をクリックし、その他の情報ウィンドウを閉じます。

これで、Gmail の受信トレイが表示されます。

タスク 1. スクリプト プロジェクトを作成する

Apps Script を起動する

  1. こちらの Apps Script へのリンクをクリックして、新しいタブまたはブラウザ ウィンドウで開きます。新しいプロジェクトが表示されます。
注: Apps Script では、プロジェクト ファイルはドライブのルートフォルダに配置されます。
  1. 設定アイコンをクリックし、[「appsscript.json」マニフェスト ファイルをエディタで表示する] オプションをオンにします。

[「appsscript.json」マニフェスト ファイルをエディタで表示する] オプションがオフになっている設定

  1. エディタ アイコンをクリックします。

プロジェクトに名前を付ける

  1. 左上の [無題のプロジェクト] をクリックします。
  2. プロジェクトに「Gmail Add-on Quickstart」という名前を付け、[名前を変更] をクリックします。

コード.gs スクリプト ファイルを作成する

  • コード.gs ファイルの内容を次のように置き換えます。

コード.gs

/** * Copyright Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * https://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * 現在のメールスレッド用にレンダリングするカードの * 配列を返す。この関数の名前は * マニフェストの 'onTriggerFunction' フィールドに指定される。これは、この関数が * アドオン開始のたびに実行されることを意味する。 * * @param {Object} e Gmail の UI によって提供されるデータ。 * @return {Card[]} */ function buildAddOn(e) { // 一時的な Gmail アドオン スコープを有効にする。*. var accessToken = e.messageMetadata.accessToken; GmailApp.setCurrentMessageAccessToken(accessToken); var messageId = e.messageMetadata.messageId; var message = GmailApp.getMessageById(messageId); // ユーザーとスレッドのラベルは、素早く並べ替えてインデックス登録ができるように配列として取得する。 var threadLabels = message.getThread().getLabels(); var labels = getLabelArray(GmailApp.getUserLabels()); var labelsInUse = getLabelArray(threadLabels); // ユーザーラベルすべてを含むセクションを作成する。 var section = CardService.newCardSection() .setHeader("<font color=\"#1257e0\"><b>Available User Labels</b></font>"); // 前のセクションに追加されたユーザーラベルのチェックボックス グループを作成する。 var checkboxGroup = CardService.newSelectionInput() .setType(CardService.SelectionInputType.CHECK_BOX) .setFieldName('labels') .setOnChangeAction(CardService.newAction().setFunctionName('toggleLabel')); // Add checkbox with 各ユーザーラベルの名前と選択した値を含むチェックボックスを追加する。 for(var i = 0; i < labels.length; i++) { checkboxGroup.addItem(labels[i], labels[i], labelsInUse.indexOf(labels[i])!= -1); } // チェックボックス グループをセクションに追加する。 section.addWidget(checkboxGroup); // セクションを追加した後にメインカードを作成する。 var card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader() .setTitle('Quick Label') .setImageUrl('https://www.gstatic.com/images/icons/material/system/1x/label_googblue_48dp.png')) .addSection(section) .build(); return [card]; } /** * ユーザーの選択に基づき、現在のスレッドのラベルを * 更新する。作成した CHECK_BOX ごとに * OnChangeAction を介して実行する。 * * @param {Object} e Gmail の UI によって提供されるデータ。 */ function toggleLabel(e){ var selected = e.formInputs.labels; // 一時的な Gmail アドオン スコープを有効にする。 var accessToken = e.messageMetadata.accessToken; GmailApp.setCurrentMessageAccessToken(accessToken); var messageId = e.messageMetadata.messageId; var message = GmailApp.getMessageById(messageId); var thread = message.getThread(); if (selected != null){ for each (var label in GmailApp.getUserLabels()) { if(selected.indexOf(label.getName()) != -1){ thread.addLabel(label); } else { thread.removeLabel(label); } } } else { for each (var label in GmailApp.getUserLabels()) { thread.removeLabel(label); } } } /** * GmailLabel オブジェクトを文字列の配列に変換する。 * 簡単な並べ替え、または値が存在するかどうかの判断に使用される。 * * @param {labelsObjects} GmailLabel オブジェクトの配列。 * @return {lables[]} ラベル名の文字列としての配列。 */ function getLabelArray(labelsObjects){ var labels = []; for(var i = 0; i < labelsObjects.length; i++) { labels[i] = labelsObjects[i].getName(); } labels.sort(); return labels; } 注: 保存する前に、エラーを回避するためにスクリプト マニフェストを更新する必要があります。

タスク 2. スクリプト マニフェストを更新する

マニフェスト（appsscript.json）を更新して、アドオンに必要なデプロイメント情報を提供します。

  1. スクリプト エディタで、左側のメニューから appsscript.json ファイルを選択します。
  2. マニフェスト（appsscript.json）の内容を次のように置き換えます。

appsscript.json

{ "oauthScopes": [ "https://www.googleapis.com/auth/gmail.addons.execute", "https://www.googleapis.com/auth/gmail.addons.current.message.metadata", "https://www.googleapis.com/auth/gmail.modify" ], "gmail": { "name": "Gmail Add-on Quickstart - QuickLabels", "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/label_googblue_24dp.png", "contextualTriggers": [{ "unconditional": { }, "onTriggerFunction": "buildAddOn" }], "openLinkUrlPrefixes": [ "https://mail.google.com/" ], "primaryColor": "#4285F4", "secondaryColor": "#4285F4" } }
  1. [プロジェクトを保存] アイコンをクリックして、マニフェストとコード.gs に対する変更を保存します。これでアドオンに必要なデプロイメント情報が提供されます。エラー メッセージが表示された場合は、コード.gs をもう一度保存してください。
新しい Apps Script プロジェクトを作成する

タスク 3. アドオンをデプロイする

  1. 画面上部の [デプロイ] > [デプロイをテスト] ボタンをクリックします。

  2. [アプリケーション: Gmail] の [インストール] をクリックします。

  3. [完了] をクリックします。

  4. Gmail のアドオンの設定タブを開きます。

  5. [アドオン] タブの [設定] ダイアログが表示されます。

強調表示されている [アドオン] タブ

これらの手順を完了すると、インストールされたデベロッパー アドオンの一覧にアドオンが表示され、Gmail で利用できるようになります。

注: インストールされたデベロッパー アドオンの一覧にアドオンが表示されない場合は、ブラウザ ウィンドウを更新してください。それでもアドオンが一覧に表示されない場合は、[Gmail Add-on Quickstart] タブに戻り、[デプロイをテスト] ウィンドウからアドオンをアンインストールして再インストールしてください。

タスク 4. アドオンを実行する

  1. [Gmail] タブに戻って、タブを更新します。
  2. Gmail でメッセージを選択して開きます。
  3. 右側のサイドメニューが開いていることを確認します。閉じている場合は矢印をクリックして展開します。

ラベルを作成します。

  1. メールの上にある Gmail メニューバーから [ラベル] ボタン（Gmail ラベルアイコン）をクリックします。
  2. [新規作成] をクリックします。
  3. ラベル名として「Test 1」と入力して [作成] ボタンをクリックします。
  4. これらの手順を繰り返して、「Test 2」と名付けた別のラベルを作成します。

アドオンを承認する

インストールしたアドオンが、開いたメールスレッドの右側のメニューに表示されます。

  1. 画面の右側にある Gmail ラベルアイコン をクリックします。

アドオンは、承認を求めるメッセージとともにウィンドウの右側にコンテキスト カードを配置します。

  1. [アクセスを承認] リンクをクリックして、アドオンを承認するためのダイアログを開きます。
  2. アドオンを承認する受講者アカウントを選択します。
  3. [許可] をクリックします。
  4. 次のダイアログで、アプリが検証されていないことが通知される場合があります。
  • [詳細設定] をクリックします。
  • ダイアログの下部にある [Go to Gmail Add-on Quickstart（unsafe）] をクリックします。
  • 新しいダイアログで、テキスト フィールドに「Continue」と入力したら [次へ] をクリックします。
  1. 承認されると、アドオンは自動的に更新されてサービス提供を開始します。

タスク 5. アドオンを使用する

「Test 1」と「Test 2」のラベルがアドオンの [Available User Labels] セクション（右側のサイドメニュー）で選択されていることを確認します。

  1. [Test 2] チェックボックスをクリックするとラベルの選択が解除され、現在開いているメールスレッドからラベルが削除されます。
  2. 適切なラベルが適用されていることを検証するため、受信トレイに戻り、ブラウザを更新して、「Test 1」ラベルだけが適用されており、「Test 2」が削除されていることを確認します。
  3. 別のメールを開きます。
  4. アドオンメニューで [Test 1] チェックボックスと [Test 2] チェックボックスを選択し、どちらも有効にします。
  5. 受信トレイに戻り、ブラウザを更新します。両方のラベルがメールスレッドに適用されます。
Gmail アドオンを作成して使用する

お疲れさまでした

今回のラボでは Gmail アドオンにどのような機能があるのかを学びました。他にも、送信者が開始した最近のスレッドを表示したり、メールのテキストを他の言語に翻訳したりなど、Gmail 内で多くのことが行えます。

クエストを完了する

このセルフペース ラボは、「Workspace Integrations」クエストの一部です。クエストとは学習パスを構成する一連のラボのことで、完了すると成果が認められて上のようなバッジが贈られます。バッジは公開して、オンライン レジュメやソーシャル メディア アカウントにリンクできます。このラボの修了後、このラボが含まれるクエストに登録すれば、すぐにクレジットを受け取ることができます。受講可能な全クエストについては、Google Cloud Skills Boost カタログをご覧ください。

次のラボを受講する

Workspace の詳細:

次のステップ

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2023 年 2 月 16 日

ラボの最終テスト日: 2023 年 2 月 16 日

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。