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

画面共有によるアドオンの宣伝。

このページでは、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 を使用している場合は、 Meet アドオン SDK npm パッケージの手順に沿って操作します。

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

npm install @googleworkspace/meet-addons

次に、MeetAddonScreenshareExport インターフェースをインポートして Meet アドオン SDK を使用します。

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

TypeScript ユーザーの場合、TypeScript 定義はモジュールにパッケージ化されています。

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 インターフェースで利用できます。

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

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

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

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

次のコードサンプルでは、次のコードを含むウェブページを 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 プロパティで指定されたオリジンは、指定された Cloud プロジェクト番号のアドオン マニフェストのオリジンと比較されます。すべて一致する場合、ユーザーはアドオンを起動できます。

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

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