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

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

このページでは、ユーザーにアドオンを昇格させる方法について説明します 画面共有しながら、Google Meet で 別のウェブページ上に表示されます

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

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

  • additionalData: アドオンが自身を初期化するために使用できる情報。缶 startActivityOnOpen プロパティが true であり、 gcloud コマンドを使用して ActivityStartingState。 詳細については、アクティビティを開始する 確認します

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

  • mainStageUrl: アドオンの起動後にメインステージが開く URL(https://www.example.com など)。URL は同じものに属している必要があります origin として 作成します。

  • sidePanelUrl: アドオンの起動時にサイドパネルが開く URL 開始(https://www.example.com など)。URL は同じものに属している必要があります origin として 作成します。

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

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 の定義はモジュールにパッケージ化されます。

グスタティック

Google Meet アドオン SDK は 静的コンテンツを提供するドメイン gstatic の JavaScript バンドル。

Meet アドオン SDK を使用するには、次のスクリプトタグを app:

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

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

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

次のコードサンプルでは、ユーザーの画面が リソース権限を調整する必要があります。 アクティビティを開始できます。この要件により、 サイドパネルで開始する必要があり、 開始しました。

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

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

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

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

アクティビティが開始されると、通話の他のユーザーに、 アドオンを起動またはインストールします。

「アニメーション」GitHub のサンプル アドオン 完全なアドオンの一部としてこの例が含まれています。日時 インデックス ページ そのアドオンに関連付けられているウェブアプリの 画面を共有しているユーザーに対しては、Android または iOS モバイル デバイスに できます。

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

次のコードサンプルでは、Google Chat でウェブページを画面共有する 次のコードを含む 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: 文字列。プロジェクトのプロジェクト番号 できます。
  • SIDE_PANEL_URL: 文字列。サイドパネルの URL。

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

送信元の一致

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

また、画面共有を開始したサイトの提供元も記載する必要があります。 アドオンの addOnOrigins フィールド 定義できます

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