画面共有を通じてアドオンをユーザーに宣伝

このページでは、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 にする必要があります。

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

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

npm install @googleworkspace/meet-addons

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

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

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

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

<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 にプレゼンテーション バナーが表示されます。バナーのボタンをクリックすると、サイドパネルに特定の Cloud プロジェクト番号のアドオンが開きます。startActivityOnOpen プロパティが false に設定されているため、ActivityStartingState が設定されるまでアクティビティの開始ボタンは無効になります。詳細については、アクティビティの開始状態を使用するをご覧ください。

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

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

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

次のコードサンプルでは、次のコードを含むウェブページを 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 にプレゼンテーション バナーが表示されます。バナーのボタンをクリックすると、メインステージで特定の Cloud プロジェクト番号のアドオンが開きます。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 プロパティで指定されたオリジンは、指定された Cloud プロジェクト番号のアドオン マニフェストのオリジンと比較されます。すべて一致する場合、ユーザーはアドオンを起動できます。

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

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

関連トピック

• Meet アドオンを使用してコラボレーションする
• アドオンのセキュリティ