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

サイドパネルとメインステージのページを作成する

このページでは、サイトのサイドパネルとメインステージページの作成方法について説明します。 Meet ウェブアドオン。

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

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

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

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

Meet アドオン SDK の機能は window.meet.addon で使用できます。リファレンスドキュメントについては、こちらのリソース概要をご覧ください。

アドオンの読み込みが完了したことを示す

Meet に読み込み画面が表示され、アドオンを読み込んでいます。Google 追加のセッションは確立済み Meet では、これを参加者からのシグナルとして読み込みが終了し、ユーザーがユーザーとやり取りできます。

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

サイドパネルに、インストール済みのアドオンが選択、使用できます。アドオンを選択すると、iframe にサイドが読み込まれますパネルの URL を追加します。これは、アプリのエントリポイントになります。Meet アドオン SDK の機能にアクセスするにはで、sidePanelClient をインスタンス化する必要があります。

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
  const sidePanelClient = await session.getSidePanelClient();

コラボレーションを開始する方法を示すコードスニペットを以下に示します。

<html style="width: 100%; height: 100%">

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Side Panel Add-on</h1>
        <div>
            <div>
                <button id="start-collaboration">
                    startCollaboration
                </button>
            </div>
            <div>
                Collaboration Side Panel URL:
                <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/newSidePanelPage.html" />
            </div>
            <div>
                Main Stage URL:
                <input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/mainStagePage.html" />
            </div>
            <div>
                Collaboration start state data:
                <input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
                    value="abc123" />
            </div>
        </div>
    </div>

    <script>
        let sidePanelClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            sidePanelClient = await session.createSidePanelClient();
            console.log("Successfully constructed side panel client.");

            document
                .getElementById('start-collaboration')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startCollaboration({
                            // Side panel is replaced with a new page.
                            sidePanelUrl: sidePanelIframeUrlInputElement.value,
                            // Main stage loads a large work area.
                            mainStageUrl: mainStageIframeUrlInputElement.value,
                            additionalData: JSON.stringify({
                                additionalProperty: additionalPropertyInputElement.value
                            }),
                        });
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

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

メインステージは、アドオンを表示できるメインのフォーカスエリアです。より広い作業スペースが必要な場合に適しています。コラボレーションが始まってからメインステージに入ります開始されます。Meet アドオン SDK の機能にクライアントオブジェクトを使用して MeetMainStageClient :

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
const mainStageClient = await session.createMainStageClient();

次のコードスニペットは、main.tf のステージページ（前のスニペットの mainStagePage.html）で、呼び出しを含むボタンのクリックに応じて getCollaborationStartingState に送信される:

<html style="width: 100%; height: 100%">

<head>
    <title>Main Stage Add On</title>
    <script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0; background: white;">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Main Stage Add-on</h1>
        <div>
            <div>
                <button id="get-collaboration-starting-state">
                    Get Collaboration Starting State's Additional Property
                </button>
            </div>
            <div id="receivedCollaborationStartingStateProperty"
                style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
        </div>
    </div>

    <script>
        let mainStageClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            const mainStageClient = await session.createMainStageClient();
            console.log("Successfully constructed main stage client.");
            document
                .getElementById('get-collaboration-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getCollaborationStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedCollaborationStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>