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

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

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

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

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

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

npm（推奨）

プロジェクトで npm を使用している場合は、 Meet Add-ons 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 は、window.meet.addon の MeetAddon インターフェースから入手できます。

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

サイドパネルには、選択して使用できるインストール済みのアドオンが表示されます。アドオンを選択すると、アドオンマニフェストで指定したサイドパネル URL が 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 Add-ons 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 インターフェースを使用する必要があります。

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

基本的な 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 を実行して、Meet アドオン SDK とともに main.js ファイルをバンドルします。

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 アドオンをデプロイする

サンプルの実行

その他の機能の追加

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

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