コーディング レベル: 中級
所要時間: 30 分
プロジェクトの種類: Google Workspace アドオン
目標
- アドオンの機能について説明します。
- Apps Script を使用してアドオンを作成する方法と、Apps Script サービスの機能について説明します。
- 環境を設定する。
- スクリプトを設定します。
- スクリプトを実行します。
この Google Workspace アドオンについて
このサンプルでは、Google ブックスのリンクをプレビューする Google Workspace アドオンを Google ドキュメント ドキュメントで作成します。ドキュメントに Google ブックスの URL を入力するか貼り付けると、アドオンがリンクを認識してリンクのプレビューをトリガーします。リンクをプレビューするには、リンクをスマートチップに変換し、リンクの上にポインタを置くと、書籍に関する詳細情報を表示するカードが表示されます。
このアドオンは、Apps Script の UrlFetch サービスを使用して Google Books API に接続し、Google ブックスに関する情報を取得して Google ドキュメントに表示します。
仕組み
Google Workspace アドオンのマニフェスト ファイルで、スクリプトは Google ドキュメントを拡張し、Google ブックスのウェブサイト(https://books.google.com
)の特定のパターンに一致する URL のリンク プレビューをトリガーするようにアドオンを構成します。
コードファイルでは、スクリプトが Google ブックス API に接続し、URL を使用して書籍に関する情報(Volume
リソースのインスタンス)を取得します。このスクリプトはこの情報を使用して、書籍のタイトルを表示するスマートチップと、概要、ページ数、書籍の表紙の画像、評価数を表示するプレビュー カードを生成します。
Apps Script サービス
このアドオンは次のサービスを使用します。
- UrlFetch サービス - Google ブックス API に接続して書籍に関する情報(API の
Volume
リソースのインスタンス)を取得します。 - カードサービス - アドオンのユーザー インターフェースを作成します。
前提条件
このサンプルを使用するには、次の前提条件を満たす必要があります。
- Google アカウント(Google Workspace アカウントでは管理者の承認が必要になる場合があります)。
インターネットにアクセスできるウェブブラウザ。
請求先アカウントが関連付けられた Google Cloud プロジェクト。プロジェクトの課金を有効にするをご覧ください。
環境を設定する
以降のセクションでは、アドオンをビルドする環境を設定します。
Google Cloud コンソールで Cloud プロジェクトを開く
まだ開いていない場合は、このサンプルに使用する Cloud プロジェクトを開きます。
- Google Cloud コンソールで、[プロジェクトの選択] ページに移動します。
- 使用する Google Cloud プロジェクトを選択します。または、[プロジェクトを作成] をクリックし、画面の指示に従います。Google Cloud プロジェクトを作成する場合、プロジェクトの課金を有効にする必要があります。
Google Books API を有効にする
このアドオンは Google Books API に接続します。Google API を使用する前に、Google Cloud プロジェクトで有効にする必要があります。1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。
Cloud プロジェクトで、Books API を有効にします。
OAuth 同意画面を構成する
このアドオンには、同意画面が構成された Cloud プロジェクトが必要です。OAuth 同意画面を設定すると、Google がユーザーに表示する内容を定義し、アプリを登録して後で公開できるようにします。
- Google Cloud コンソールで、メニュー > [API とサービス] > [OAuth 同意画面] に移動します。
- [ユーザーの種類] で [内部] を選択し、[作成] をクリックします。
- アプリ登録フォームに入力し、[保存して次へ] をクリックします。
現時点では、スコープの追加をスキップして、[保存して次へ] をクリックします。今後、Google Workspace 組織の外部で使用するアプリを作成する場合は、[ユーザーの種類] を [外部] に変更してから、アプリに必要な認証スコープを追加する必要があります。
- アプリ登録の概要を確認します。変更するには、[編集] をクリックします。アプリの登録に問題がない場合は、[Back to Dashboard] をクリックします。
Google ブックス API の API キーを取得する
- Google Cloud コンソールに移動します。 課金が有効なプロジェクトが開いていることを確認します。
Google Cloud コンソールで、メニュー > [API とサービス] > [認証情報] に移動します。
[認証情報を作成] > [API キー] をクリックします。
後のステップで使用するため、API キーをメモしておきます。
スクリプトを設定する
以下のセクションでは、アドオンをビルドするためのスクリプトを設定します。
Apps Script プロジェクトを作成する
- 次のボタンをクリックして、Apps Script プロジェクト「Preview links from Google Books」を開きます。
プロジェクトを開く - [概要] をクリックします。
- 概要ページで [コピーを作成] をクリックします。
- Apps Script プロジェクトのコピーで、
Code.gs
ファイルに移動し、YOUR_API_KEY
を前のセクションで生成した API キーに置き換えます。
Cloud プロジェクト番号をコピーする
- Google Cloud コンソールで、メニュー > [IAM と管理] > [設定] に移動します。
- [プロジェクト番号] フィールドに値をコピーします。
Apps Script プロジェクトの Cloud プロジェクトを設定する
- Apps Script プロジェクトで、 [プロジェクトの設定] をクリックします。
- [Google Cloud Platform(GCP)プロジェクト] で、[プロジェクトを変更] をクリックします。
- [GCP プロジェクト番号] に、Google Cloud プロジェクト番号を貼り付けます。
- [プロジェクトを設定] をクリックします。
アドオンをテストする
以下のセクションでは、作成したアドオンをテストします。
テストデプロイをインストールする
- Apps Script プロジェクトで、 [Editor] をクリックします。
YOUR_API_KEY
は、前のセクションで作成した Google ブックス API の API キーに置き換えます。- [デプロイ] > [デプロイをテスト] をクリックします。
- [インストール] > [完了] をクリックします。
Google ドキュメントでリンクをプレビューする
- docs.new で Google ドキュメント ドキュメントを作成する。
- 次の URL をドキュメントに貼り付け、Tab キーを押して URL をスマートチップに変換します。
https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
- スマートチップの上にポインタを置き、プロンプトが表示されたら、アドオンの実行を承認します。プレビュー カードには書籍に関する情報が表示されます。
次の図は、リンクのプレビューを示しています。
コードを確認する
このアドオンの Apps Script コードを確認するには、[ソースコードを表示] をクリックしてセクションを展開します。