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

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

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

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

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

プロジェクトで 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 は、window.meet.addon の MeetAddon インターフェースで利用できます。

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

サイドパネルには、選択して使用できるインストール済みのアドオンが表示されます。アドオンを選択すると、アドオン マニフェストで指定したサイドパネル URL が iframe によって読み込まれます。これはアプリのエントリ ポイントであり、少なくとも次の処理を行う必要があります。

  1. アドオンの読み込みが完了したことを示す。アドオンの読み込み中は、Meet に読み込み画面が表示されます。createAddonSession() メソッドを呼び出してアドオン セッションが確立されると、Meet はこれを、読み込みが完了し、ユーザーがサードパーティ コンテンツを操作できることを示すアドオンからのシグナルとして扱います。コンテンツの読み込みが完了するまで、アドオンは createAddonSession() メソッドを呼び出してはなりません。

  2. サイドパネル クライアントを作成します。サイドパネルで Meet アドオン SDK にアクセスするには、MeetSidePanelClient インターフェースをインスタンス化する必要があります。これにより、Meet アドオン SDK のメイン エクスペリエンスを制御できます。

  3. アクティビティを開始します。これにより、他のユーザーがアドオンに参加できるようになります。また、必要に応じて、メインステージでアドオンを開くことができます。

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

基本的な 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 アドオン 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 ページの SidePanel.html と MainStage.html に GitHub の Next.js サンプルをデプロイした場合と同じになります。

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

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

サンプルの実行

  1. Meet に移動します。

  2. [アクティビティ] アクティビティのアイコン。 をクリックします。

  3. [アドオン] セクションにアドオンが表示されます。選択してアドオンを実行します。

その他の機能の追加

基本的なサイドパネルとメインステージが作成できたので、アドオンに他の機能を追加できます。

これらの機能を構築する際は、GitHub の Meet サンプル アドオンを参照することをおすすめします。