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

Google Meet アドオン SDK を使用してウェブ用のアドオンを作成する

このチュートリアルでは、ウェブ用 Google Meet アドオンのソフトウェア開発キット（SDK）を使用してアドオンを作成する方法を説明します。これにより、Google Meet を離れることなく、ウェブアプリ内で共有と共同編集を行うことができます。

ウェブ用 Meet アドオン SDK のサイドパネル。
ユーザーがコラボレーションを行うウェブ版 Meet アドオン SDK のメインステージ。

目標

Google Cloud コンソールでウェブ用 Meet アドオン SDK を作成してデプロイします。
ウェブ用 Meet アドオン SDK のメインステージとサイドパネルを作成します。

環境を準備する

このセクションでは、ウェブ用 Meet アドオン SDK 用に Google Cloud プロジェクトを作成して構成する方法について説明します。

Google Cloud プロジェクトを作成する

Google Cloud コンソール

Google Cloud コンソールで、メニュー > [IAM と管理] > [プロジェクトを作成] に移動します。
[プロジェクトの作成] に移動
[プロジェクト名] フィールドに、プロジェクトのわかりやすい名前を入力します。
省略可: プロジェクト ID を編集するには、[編集] をクリックします。プロジェクトの作成後にプロジェクト ID を変更することはできません。プロジェクトの存続期間に応じて、ニーズに合った ID を選択してください。
[ロケーション] フィールドで [参照] をクリックして、プロジェクトの潜在的なロケーションを表示します。[選択] をクリックします。
注意: Google Workspace の組織が見つからない場合
Google Workspace アカウントにログインしていません。Google Workspace デベロッパー向けドキュメントで説明されている機能の一部は、組織に関連付けられたプロジェクトでのみ利用できます。
[作成] をクリックします。Google Cloud コンソールが [ダッシュボード] ページに移動し、数分以内にプロジェクトが作成されます。

gcloud CLI

次のいずれかの開発環境で、Google Cloud CLI（「gcloud」）にアクセスします。

Cloud Shell: gcloud CLI がすでに設定されているオンラインターミナルを使用するには、Cloud Shell をアクティブにします。
Cloud Shell をアクティブにする
ローカルシェル: ローカル開発環境を使用するには、gcloud CLI をインストールしてinitializeします。
Cloud プロジェクトを作成するには、gcloud projects create コマンドを使用します。
```
gcloud projects create PROJECT_ID
```
PROJECT_ID は、作成するプロジェクトの ID を設定して置き換えます。

API を有効にする

コンソール

Google Cloud コンソールで、Google Workspace Marketplace SDK と Google Workspace アドオン API を有効にします。

API を有効にする
正しい Cloud プロジェクトで API が有効になっていることを確認し、[次へ] をクリックします。
正しい API が有効になっていることを確認し、[有効にする] をクリックします。

gcloud CLI

必要に応じて、現在の Google Cloud プロジェクトを gcloud config set project コマンドで作成したプロジェクトに設定します。
```
gcloud config set project PROJECT_ID
```
PROJECT_ID は、作成した Cloud プロジェクトのプロジェクト ID に置き換えます。
gcloud services enable コマンドを使用して、Google Workspace Marketplace SDK と Google Workspace アドオン API を有効にします。
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

ウェブアプリを作成してデプロイする

次のセクションでは、ウェブ用の Meet アドオン SDK に必要なアプリケーションコードをすべて含むウェブアプリケーションプロジェクト（Firebase を使用してビルドされたもの）全体をコピーして更新します。まず、ウェブアプリケーションを構成してデプロイする必要があります。

サンプルコードを確認する

GitHub でベースウェブアプリケーションを表示してダウンロードできます。

GitHub で表示

ベースコードの概要は次のとおりです。

これは、React ベースのフレームワークである Next.js を使用して構築されています。
スタイル設定に Tailwind CSS を使用している。
src/components には、アプリケーションロジックの大部分が含まれます。ここでは更新や変更を行うことはありません。
src/firebase には Firebase 構成と初期化コードが含まれています。
src/app にはウェブアプリのエントリポイントが含まれます。
src/app/page.tsx は、メインページまたはプロジェクトリストです。
src/app/project/[id]/page.tsx は、個々のプロジェクトとタスクリストのページです。
.env には環境構成が含まれています。

Firebase プロジェクトと CLI を設定する

Firebase は、デベロッパーによるアプリ構築を支援するモバイルおよびウェブアプリケーション開発プラットフォームです。Firestore は、モバイルアプリやウェブアプリのデータの保存、同期、クエリを行える NoSQL ドキュメントデータベースです。Firestore には To-Do リストの情報が保存されますこのアプリは Firebase の機能を使用するため、Firebase プロジェクトと Firebase CLI を設定する必要があります。手順は次のとおりです。

Firebase プロジェクトを作成します。
Cloud Firestore データベースを作成します。
Firebase CLI をインストールするか、最新バージョンに更新します。
ベースアプリのルートディレクトリに移動します。
プロジェクトを初期化します。

ローカルプロジェクトファイルを Firebase プロジェクトに接続します。
```
firebase init firestore
```
プロジェクトの初期化中に、Firebase CLI のプロンプトで次の操作を行います。
1. 次のいずれかを選択します。
  
  Use an existing project を選択し、作成した Firebase プロジェクトを選択します。
  
  選択した Firebase プロジェクトが、ローカルプロジェクトディレクトリの「デフォルト」の Firebase プロジェクトになります。
2. Firestore のルールにはどのファイルを使用する必要がありますか？
  
  「(firestore.rules)」と表示されている場合は、Enter キーを押します。それ以外の場合は、「firestore.rules」と入力して Enter キーを押します。
3. firestore.rules ファイルはすでに存在します。Firebase コンソールの Firestore ルールで上書きしますか？（はい / いいえ）
  
  「N」と入力して Enter キーを押します。
4. Firestore インデックスにはどのファイルを使用する必要がありますか？
  
  「(firestore.indexes.json)」と表示されている場合は、Enter キーを押します。それ以外の場合は、「firestore.indexes.json」と入力して Enter キーを押します。

これで Firestore データベースが設定され、アプリで使用する準備が整いました。

Google で Firebase を認証する

次に、Google プロバイダによる認証を有効にします。手順は次のとおりです。

Firebase コンソールで [Authentication] ページに移動します。

Firebase Authentication に移動
初めてプロバイダを設定する場合は、[ログイン方法を設定] をクリックします。それ以外の場合は、[新しいプロバイダを追加] をクリックします。
[Google] を選択し、ステータスが [有効にする] に設定されていることを確認します。

Firebase でウェブアプリを作成する

最後に、Firebase プロジェクト内にウェブアプリを作成し、構成を取得します。手順は次のとおりです。

Firebase コンソールで、ウェブアプリを Firebase プロジェクトに登録します。
[プロジェクトの設定] に移動します。
[アプリ] で、登録済みのウェブアプリを見つけてクリックします。
firebaseConfig の値をメモします。これらは、次のセクションで環境変数を更新するときに使用します。

Google Cloud プロジェクト番号を確認する

Google Cloud コンソールを開きます。

Google Cloud コンソールに移動
Google Cloud コンソールの横にある下矢印をクリックし、プロジェクトを選択します。
メニュー > [Cloud の概要] をクリックします。
[プロジェクト情報] セクションで、[プロジェクト番号] の値をメモします。次のセクションでこれを使用して、環境変数を更新します。

環境変数を更新する

ベースコードの .env ファイルで、前の手順で収集した詳細情報を次のように入力します。

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

前の手順で収集した firebaseConfig 値とプロジェクト番号を使用して、次のように置き換えます。

GOOGLE_PROJECT_NUMBER: Google Cloud プロジェクトのプロジェクト番号
PROJECT_ID: Firebase ウェブアプリの projectId
API_KEY: Firebase ウェブアプリの apiKey
AUTH_DOMAIN: Firebase ウェブアプリの authDomain
STORAGE_BUCKET: Firebase ウェブアプリの storageBucket
MSG_SENDER_ID: Firebase ウェブアプリの messagingSenderId
APP_ID: Firebase ウェブアプリの appId

アプリの認証情報を設定する

Google アプリケーションの認証情報を設定する手順は次のとおりです。

Firebase コンソールで [プロジェクトの設定] ページに移動します。

[プロジェクト設定] に移動
[サービスアカウント] タブで、[Firebase Admin SDK] タブを選択します。
[新しい秘密鍵を生成] をクリックし、ダウンロードした JSON ファイルのパスをメモします。
ターミナルで、次のコマンドを実行します。
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
JSON_PATH は、ダウンロードした JSON ファイルがあるパスに置き換えます。

開発用サーバーにデプロイする

これでコードと環境が用意できたので、ウェブアプリをローカル開発用サーバーにデプロイできます。そのためには、ウェブアプリディレクトリに移動し、次の操作を行います。

コマンド npm install を実行し、ノードモジュールがダウンロードされてインストールされるまで待ちます。
コマンド npm run dev を実行します。
http://localhost:3000/ に移動して、ウェブアプリが稼働していることを確認します。

ウェブ用 Meet アドオン SDK を使用する

次のステップでは、必要なコードを更新してコードを統合し、Google Meet アドオンにします。手順は次のとおりです。

ファイル src/meet/meet.d.ts を作成します。
1. https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts から最新のタイプを取得して、ファイルをローカルに保存できます。

ファイル src/meet/utils.ts を作成します。

createAddonSession 関数を追加します。ここで、Google Meet 内で通信するためのセッションが確立されます。

export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

ディレクトリ src/app/meet を作成します。これは、Meet 固有のすべてのルートの専用ディレクトリとして機能します。

ファイル src/app/meet/layout.tsx を作成します。

Meet 関連のすべてのページに共通のレイアウトです。このファイルに Meet SDK スクリプトを挿入し、コンテンツをレンダリングする前に SDK が読み込まれていることを確認します。

"use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

ファイル src/app/meet/sidepanel/page.tsx を作成します。

Meet アドオンのサイドパネルのコンテンツ。このページでは、コンテンツの選択と、コンテンツ選択時の共同編集の開始状態の設定に関する処理を行います。

"use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

ファイル src/app/meet/project/\[id\]/page.tsx を作成します。

Meet アドオンのメインステージコンテンツ。サイドパネルから選択したプロジェクトのコンテンツが表示されます。

"use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

Deployment を作成する

アドオンのデプロイを設定します。

Google Cloud コンソールで、[Google Workspace Add-ons API] に移動します。

Google Workspace Add-ons API に移動
[代替ランタイム] タブをクリックします。
[Create new deployment] をクリックし、アドオンのデプロイ ID を入力します。デプロイ ID は、アドオンデベロッパーがアドオンマニフェストを含むデプロイを識別する際に役立つ任意の文字列です。デプロイ ID は必須で、100 文字以内で指定してください。
[次へ] をクリックします。

サイドパネルが開き、アドオンマニフェストの仕様を JSON 形式で送信できます。このパネルを使用して、マニフェストファイルとして以下を入力します。

{
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

[Submit] をクリックします。アドオンが正常にデプロイされると、「Deployment "ID" created」というメッセージが表示されます。
このページの [デプロイ] セクションで、デプロイを確認します。

ウェブ向け Meet アドオン SDK をテストする

ウェブ用の Meet アドオン SDK 全体をテストするには、Google Meet を実行して、アプリが想定どおりに動作することを確認します。手順は次のとおりです。

Meet に移動して、新しい会議を開始します。
[アクティビティ] をクリックします。
[アドオン] セクションに [My First Meet Web add-on] が表示されます。これを選択してアドオンを実行します。
アドオンが実行されると、サイドパネルが開きます。
Google アカウントを使用してアプリにログインします。ログインしたら、[新しいプロジェクト] をクリックします。
作成された [無題のプロジェクト] を選択します。
サイドパネルで [Start Activity] をクリックします。
開始すると、サイドパネルが閉じてメインステージが開きます。

これでアドオンは想定どおりに実行されますが、対象はアプリからログインしたユーザーのみです（ステップ 5）。Meet からアクティビティに参加する他の参加者は、最初のユーザーと同じセッションを共有できないため、アプリ内でコラボレーションすることはできません。コンテンツを他のユーザーと共有するには、さらなる実装（トークン共有メカニズムなど）が必要です。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、Cloud プロジェクトを削除することをおすすめします。

注意: プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。このチュートリアルで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。appspot.com の URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。

複数のチュートリアルとクイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。

Google Cloud コンソールで、[リソースの管理] ページに移動します。メニュー > [IAM と管理] > [リソースの管理] をクリックします。
Resource Manager に移動
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

Google Meet アドオン SDK を使用してウェブ用のアドオンを作成する

目標

環境を準備する

Google Cloud プロジェクトを作成する

Google Cloud コンソール

gcloud CLI

API を有効にする

コンソール

gcloud CLI

ウェブアプリを作成してデプロイする

サンプルコードを確認する

Firebase プロジェクトと CLI を設定する

Google で Firebase を認証する

Firebase でウェブアプリを作成する

Google Cloud プロジェクト番号を確認する

環境変数を更新する

アプリの認証情報を設定する

開発用サーバーにデプロイする

ウェブ用 Meet アドオン SDK を使用する

Deployment を作成する

ウェブ向け Meet アドオン SDK をテストする

クリーンアップ

関連トピック