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

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

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 の定義はモジュールにパッケージ化されています。 TypeScript ユーザーは、プロジェクトの tsconfig.json 内で moduleResolution を "bundler" に設定する必要があります。これにより、package.json "exports" specで screen sharing package export をインポートできます。

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 使用できます。

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

サイドパネルには、選択して使用できるインストール済みのアドオンが表示されます。アドオンを選択すると、アドオン マニフェストで指定したサイドパネルの 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 をインストール し、library オプション をwebpack.config.js ファイルで利用することをおすすめします。

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

npx webpack

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

Next.js

Next を実行します。

next dev

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

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

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

  1. まず、このクイックスタートのコードを、任意のデプロイ ソリューションを使用して、所有しているウェブサイトにデプロイする必要があります。GitHub の公式 サンプル Google Meet アドオンは、GitHub ワークフロー を使用して GitHub Pages にデプロイされますが、 Firebase Hostingなどのツールを使用することもできます。

  2. アプリケーションをデプロイしたら、 Meet アドオンをデプロイする の手順に沿ってアドオンのデプロイを設定する必要があります。このデプロイ ガイドに沿って操作すると、手順 1 でデプロイしたアプリケーションの Meet 内の iframe である最終的な Meet アドオンが作成されます。

サンプルの実行

  1. Meet に移動します。

  2. 会議ツールボタン 会議ツール アイコン。をクリックします。

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

その他の機能の追加

基本的なサイドパネルとメイン画面が用意できたので、アドオンに他の機能を追加できます。

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