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

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

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

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

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

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

npm（推奨）

プロジェクトで npm を使用している場合は、 Meet アドオン SDK npm パッケージのご紹介の手順に沿って操作してください。

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

npm install @googleworkspace/meet-addons

Meet アドオン SDK は、MeetAddonExport インターフェースをインポートすることで利用できます。

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

TypeScript ユーザーの場合、TypeScript の定義はモジュールにパッケージ化されています。TypeScript ユーザーは、プロジェクトの tsconfig.json 内で moduleResolution を "bundler" に設定する必要があります。これにより、package.json の「exports」仕様で、画面共有パッケージのエクスポートをインポートできるようになります。

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 アドオン 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 インターフェースを使用する必要があります。

次のコードサンプルは、「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();
}

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

<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 の Basic JS サンプルを GitHub Pages の SidePanel.html と MainStage.html にデプロイするのと同じです。

Next.js

Run Next:

next dev

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

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

アドオンのデプロイは 2 段階のプロセスです。

まず、このクイックスタートのコードを、任意のデプロイソリューションを使用して、所有しているウェブサイトにデプロイする必要があります。GitHub の公式の Google Meet アドオンのサンプルは、GitHub ワークフローを使用して GitHub Pages にデプロイされますが、Firebase Hosting などのツールを使用することもできます。
アプリケーションをデプロイしたら、Meet アドオンをデプロイするの手順に沿ってアドオンのデプロイを設定する必要があります。このデプロイガイドに沿って操作すると、ステップ 1 でデプロイしたアプリケーションの Meet 内の iframe である最終的な Meet アドオンが作成されます。

サンプルの実行

Meet にアクセスします。
会議ツールボタンをクリックします。
[アドオン] セクションにアドオンが表示されます。選択すると、アドオンが実行されます。

その他の機能の追加

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

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

Meet アドオンのクイックスタート コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

npm（推奨）

gstatic

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

基本的な JS + Webpack

Next.js

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

基本的な JS + Webpack

Next.js

サンプルの実行

基本的な JS + Webpack

Next.js

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

サンプルの実行

その他の機能の追加

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

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

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