アドオンをユーザーに宣伝する

デベロッパーは、Meet の通話中チャットや Meet の画面共有機能を通じてアドオンを宣伝することで、アドオンの検索性を高めることができます。

通話中のチャット

メッセージにアドオンに関連付けられたリンクが含まれている場合、Google Meet アドオンは、通話中の Meet のチャットでユーザーに自動的に宣伝されます。チャットでアドオンを宣伝するためにデベロッパーが対応する必要はありません。審査チームは、サイドパネルの URI と、デプロイ マニフェスト内で設定されたアドオンのオリジンに基づいて、アドオンに関連付けるリンクを決定します。

ユーザーがアドオンに関連付けられた通話内チャットでメッセージを送信すると、次のいずれかが発生します。

1. アドオンがインストールされていない場合は、アドオンをインストールするよう求めるカードが表示されます。
2. アドオンがすでにインストールされている場合は、アドオンを開くようユーザーに促すボタンが表示されます。

画面共有

このページでは、別のウェブページに少量のコードを配置して、Google Meet でタブを画面共有しているときに、アドオンをユーザーに宣伝する方法について説明します。

exposeToMeetWhenScreensharing() メソッドを使用すると、タブが画面共有されたときに、サイトから Meet に情報を送信できます。この情報は、ユーザーがアドオンをインストールしている場合に、プレゼンテーション バナーの [アクティビティを開始] をクリックしたときに、Meet のアドオン エクスペリエンスで使用されます。タブを画面共有するときにアドオンがインストールされていない場合は、アドオンをインストールするよう求められます。

AddonScreenshareInfo オブジェクトには、ユースケースに基づいて追加できる 5 つのプロパティが含まれています。

• additionalData: アドオンが自身を初期化するために使用できる情報。startActivityOnOpen プロパティが true の場合にのみ設定でき、ActivityStartingState を使用してアクセスできます。詳しくは、アクティビティの開始状態を取得するをご覧ください。

• cloudProjectNumber: 必須。Google Cloud プロジェクトのプロジェクト番号。

• mainStageUrl: アドオンの起動時にメインステージが開く URL（例: https://www.example.com）。この URL は、アドオン マニフェストで指定された URL と同じオリジンに属している必要があります。

• sidePanelUrl: アドオンの起動時にサイドパネルが開く URL（https://www.example.com など）。この URL は、アドオン マニフェストで指定された URL と同じオリジンに属している必要があります。

• startActivityOnOpen: 必須。ユーザーがプレゼンテーション バナーからアドオンを開始したときに、Meet でアクティビティ アドオン エクスペリエンスをすぐに開始するかどうか。mainStageUrl プロパティを使用する場合は true にする必要があります。

注: プレゼンテーション バナーのインストール プロンプトを機能させるには、アドオンを公開する必要があります。詳しくは、Meet 用アドオンを公開するをご覧ください。

<

SDK をインストールしてインポートする

SDK には、npm または gstatic を使用してアクセスできます。

npm（推奨）

プロジェクトで npm を使用している場合は、 Meet アドオン SDK npm パッケージのご紹介の手順に沿って操作してください。

まず、npm パッケージをインストールします。

npm install @googleworkspace/meet-addons

Meet アドオン SDK は、MeetAddonScreenshareExport インターフェースをインポートすることで利用できます。

import {meet} from '@googleworkspace/meet-addons/meet.addons.screenshare';

TypeScript ユーザーの場合、TypeScript の定義はモジュールにパッケージ化されています。TypeScript ユーザーは、プロジェクトの tsconfig.json 内で moduleResolution を "bundler" に設定する必要があります。これにより、package.json の「exports」仕様で、画面共有パッケージのエクスポートをインポートできるようになります。

gstatic

Google Meet アドオン SDK は、静的コンテンツを配信するドメインである gstatic から JavaScript バンドルとして入手できます。

Meet アドオン SDK を使用するには、アプリに次のスクリプトタグを追加します。

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.js"></script>

Meet アドオン SDK は、window.meet.addon の MeetAddon インターフェースから利用できます。

注: TypeScript を使用している場合は、https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.d.ts から最新の型を取得することもできます。ファイルをローカルに保存するだけです。

例: アクティビティを開始せずにサイドパネルに読み込む

次のコードサンプルでは、ユーザーがアドオンを含むページを画面共有しています。アクティビティを開始する前に、アドオンがリソース権限を調整する必要があります。この要件により、アドオンはサイドパネルで開始される必要があります。アクティビティは全員に対して開始されません。

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

次のように置き換えます。

• CLOUD_PROJECT_NUMBER: 文字列。Cloud プロジェクトのプロジェクト番号。
• SIDE_PANEL_URL: 文字列。サイドパネルの URL。

Meet 通話画面でユーザーがページを共有すると、Meet にプレゼンテーション バナーが表示されます。バナーのボタンをクリックすると、指定されたクラウド プロジェクト番号のアドオンがサイドパネルで開きます。startActivityOnOpen プロパティが false に設定されているため、ActivityStartingState が設定されるまで、アクティビティ開始ボタンは無効になっています。詳しくは、アクティビティの開始状態を使用するをご覧ください。

アクティビティが開始されると、通話中の他のユーザーにアドオンの起動またはインストールを求めるメッセージが表示されます。

GitHub の「Animation」サンプル アドオンには、この例が完全なアドオンの一部として含まれています。アドオンに関連付けられたウェブアプリのインデックス ページが表示されると、プレゼンテーションを行うユーザーにアドオンのインストールまたは設定を求めるメッセージが表示されます。

例: メインステージに読み込む

次のコードサンプルでは、次のコードを含む Meet のウェブページを画面共有しているユーザーに、アドオンの起動を求めるメッセージが表示されます。

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

次のように置き換えます。

• CLOUD_PROJECT_NUMBER: 文字列。Google Cloud プロジェクトのプロジェクト番号。
• MAIN_STAGE_URL: 文字列。メインステージの URL。

Meet 通話画面でユーザーがページを共有すると、Meet にプレゼンテーション バナーが表示されます。バナーのボタンをクリックすると、メインステージで指定されたクラウド プロジェクト番号のアドオンが開きます。mainStageUrl プロパティが読み込まれ、additionalData プロパティを使用してアドオンのアクティビティの開始状態が設定されます。通話に参加している他のユーザーには、アドオンのインストールまたは起動を求めるメッセージがすぐに表示されます。

例: サイドパネルに読み込む

次のコードサンプルでは、ユーザーがアドオンを含むページを画面共有しています。このアドオンは、メインステージではなくサイドパネルで起動することを希望しています。

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

次のように置き換えます。

• CLOUD_PROJECT_NUMBER: 文字列。Cloud プロジェクトのプロジェクト番号。
• SIDE_PANEL_URL: 文字列。サイドパネルの URL。

Meet 通話画面でユーザーがページを共有すると、Meet にプレゼンテーション バナーが表示されます。バナーのボタンをクリックすると、指定されたクラウド プロジェクト番号のアドオンがサイドパネルで開きます。sidePanelUrl プロパティが読み込まれ、additionalData プロパティを使用してアドオンのアクティビティの開始状態が設定されます。通話に参加している他のユーザーには、アドオンのインストールまたは起動を求めるメッセージがすぐに表示されます。

オリジン マッチング

mainStageUrl プロパティと sidePanelUrl プロパティで指定されたオリジンは、指定されたクラウド プロジェクト番号のアドオン マニフェストのオリジンと比較されます。すべてが一致する場合、ユーザーはアドオンを起動できます。

また、画面共有を開始するサイトのオリジンは、アドオン マニフェストの addOnOrigins フィールドに記載されている必要があります。

詳細については、アドオンのセキュリティをご覧ください。

注: この実装では CaptureHandle を使用します。これは Chrome ブラウザ バージョン 102 以降でのみサポートされています。

関連トピック

• Meet アドオンを使用して共同編集する
• アドオンのセキュリティ