このページは Cloud Translation API によって翻訳されました。

Meet アドオンのクイックスタート

このガイドでは、メインステージとサイドパネルを作成して、サンプルの Google Meet アドオンを設定して実行する方法について説明します。このページの「Hello World」の例は、基本的な JavaScript または Next.js TypeScript で作成された完全な Meet アドオンとして GitHub でも入手できます。

Meet アドオン SDK のメインステージとサイドパネル。 — </ph> ウェブ版 Meet のメインステージとサイドパネルアドオン。

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

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

npm（推奨）

プロジェクトで npm を使用している場合は、 Meet アドオン SDK npm パッケージ

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

npm install @googleworkspace/meet-addons

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

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

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

gstatic

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

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

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

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

サイドパネルページを作成する

サイドパネルには、選択して使用できるインストール済みのアドオンが表示されます。アドオンを選択すると iframe では、アドオンマニフェストをご覧ください。これはアプリのエントリポイントにする必要があります。少なくとも、以下の点に留意してください。

アドオンの読み込みが完了したことを示す。アドオンの読み込み中は、Meet に読み込み画面が表示されます。createAddonSession() メソッドを呼び出してアドオンセッションが確立されると、Meet はこれを、読み込みが完了し、ユーザーがサードパーティコンテンツを操作できることを示すアドオンからのシグナルとして扱います。アドオンコンテンツが終了するまで createAddonSession() メソッドを呼び出さないでください。読み込み中。
サイドパネルクライアントを作成します。Meet アドオン SDK にアクセスするには、 MeetSidePanelClient をインスタンス化する必要があります。行うことができます。メインの Meet アドオン SDK を制御できる体験できます
アクティビティを開始します。これにより、他のユーザーがアドオンに参加できるようになります。また、必要に応じて、メインステージでアドオンを開くことができます。

次のコードサンプルは、セッションがサイドパネルクライアントを作成する方法と、サイドパネルクライアントがメインステージでアクティビティを開始する方法を示しています。

基本的な JS + Webpack

main.js という名前の新しいファイルで、アドオンセッション（サイドパネルクライアント）を作成し、ID 'start-activity' のボタンがクリックされたときにアクティビティを開始する関数を定義します。

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

const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';

/**
 * Prepares the Add-on Side Panel Client, and adds an event to launch the
 * activity in the main stage when the main button is clicked.
 */
export async function setUpAddon() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    const sidePanelClient = await session.createSidePanelClient();
    document
        .getElementById('start-activity')
        .addEventListener('click', async () => {
            await sidePanelClient.startActivity({
                mainStageUrl: MAIN_STAGE_URL
            });
        });
}

SidePanel.html という名前の新しいファイルで、アクティビティを起動するボタンを定義し、ドキュメントの読み込み時に main.js から関数を呼び出します。

<html>
<head>
    <title>Meet Add-on Side Panel</title>
    <script src="./main.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div>This is the Add-on Side Panel. Only you can see this.</div>
    <button id="start-activity">Launch Activity in Main Stage.</button>

    <script>
        document.body.onload = () => {
            // Library name (`helloWorld`) is defined in the webpack config.
            // The function (`setUpAddon`) is defined in main.js.
            helloWorld.setUpAddon();
        };
    </script>
</body>
</html>

また、Meet アドオン SDK を main.js に変換してライブラリで公開します。webpack をインストールし、webpack.config.js ファイルで library オプションを使用することをおすすめします。

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

新しい Page を追加してサイドパネルを表示します。このページでは読み込み時のアドオンセッションとサイドパネルクライアントボタンがクリックされたときにアクティビティを開始します。

'use client';

import { useEffect, useState } from 'react';
import {
    meet,
    MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();

    // Launches the main stage when the main button is clicked.
    async function startActivity(e: unknown) {
        if (!sidePanelClient) {
            throw new Error('Side Panel is not yet initialized!');
        }
        await sidePanelClient.startActivity({
            mainStageUrl: 'MAIN_STAGE_URL'
        });
    }

    /**
     * Prepares the Add-on Side Panel Client.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            setSidePanelClient(await session.createSidePanelClient());
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Side Panel. Only you can see this.
            </div>
            <button onClick={startActivity}>
                Launch Activity in Main Stage.
            </button>
        </>
    );
}

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

CLOUD_PROJECT_NUMBER: Google Cloud プロジェクトのプロジェクト番号。
MAIN_STAGE_URL: 次のステップで作成するメインステージの URL。

メインステージページを作成する

メインステージはメインフォーカスエリアで、ここに追加の作業スペースが必要な場合は、アドオンの使用もおすすめします。アクティビティが開始されると、メインステージが開きます。メインステージで Meet Add-ons SDK の機能にアクセスするには、MeetMainStageClient インターフェースを使用する必要があります。

次のコードサンプルは、メインステージページの例を示しています。「Hello, world!」と言うカスタム div:

基本的な JS + Webpack

メインステージが読み込みが完了したことを通知できるように、作成した main.js ファイルに次の関数を追加します。

/**
 * Prepares the Add-on Main Stage Client, which signals that the add-on has
 * successfully launched in the main stage.
 */
export async function initializeMainStage() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    await session.createMainStageClient();
}

次に、新しい MainStage.html ファイルを追加します。このファイルは、新しい initializeMainStage 関数を呼び出して、カスタムの「hello, world」コンテンツを表示します。

<html>
<body style="width: 100%; height: 100%; margin: 0">
    <div>
        This is the Add-on Main Stage. Everyone in the call can see this.
    </div>
    <div>Hello, world!</div>

    <script>
        document.body.onload = () => {
            helloWorld.initializeMainStage();
        };
    </script>
</body>
</html>

Next.js

Page を追加してメインステージを表示します。このページは、読み込み時にアドオンセッションとサイドパネルクライアントを作成し、カスタムの「Hello World」コンテンツを表示します。

'use client';

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

export default function Page() {
    /**
     * Prepares the Add-on Main Stage Client, which signals that the add-on
     * has successfully launched in the main stage.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            await session.createMainStageClient();
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Main Stage.
                Everyone in the call can see this.
            </div>
            <div>Hello, world!</div>
        </>
    );
}

CLOUD_PROJECT_NUMBER は、プロジェクトのプロジェクト番号に置き換えます。 Google Cloud プロジェクトです

サンプルの実行

ローカルで実行するには、次の操作を行います。

基本的な JS + Webpack

webpack を実行して、main.js ファイルを Meet アドオン SDK:

npx webpack

任意のブラウザで SidePanel.html ファイルと MainStage.html ファイルを開きます。これは、GitHub Pages の SidePanel.html と MainStage.html に GitHub の基本的な JS サンプルをデプロイする場合と同じになります。

Next.js

次を実行:

next dev

http://localhost:3000/sidepanel または http://localhost:3000/mainstage に移動します。これは、GitHub Pages の SidePanel.html と MainStage.html に GitHub の Next.js サンプルをデプロイした場合と同じになります。

Meet アドオンをデプロイする

Meet アドオンをデプロイする手順に沿って、アドオンのデプロイを設定します。

サンプルの実行

Meet に移動します。
[アクティビティ] をクリックします。
[アドオン] セクションにアドオンが表示されます。これを選択してできます。

その他の機能の追加

基本的なサイドパネルとメインステージが用意できたので、他の追加すると、

GitHub にある Meet アドオンのサンプルを使用することをおすすめします。これらの機能を構築する際のリファレンスとしてご覧ください

Meet アドオンのクイックスタート

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

npm（推奨）

gstatic

サイドパネル ページを作成する

基本的な JS + Webpack

Next.js

メインステージ ページを作成する

基本的な JS + Webpack

Next.js

サンプルの実行

基本的な JS + Webpack

Next.js

Meet アドオンをデプロイする

サンプルの実行

その他の機能の追加

サイドパネルページを作成する

メインステージページを作成する