ウェブサイトにZoomミーティングを埋め込む方法

Zoomミーティングをウェブサイトに埋め込むことは可能ですが、生のZoomリンクをiFrameに直接貼り付けるだけでは機能しません。正しい方法はZoom Meeting SDKを使用することです。これは、Zoomミーティング体験を自身のウェブページ内に埋め込むために特別に構築されています。

開発者でない場合は、WordPressプラグインがSDKの設定を代行してくれます。すぐに参加できるオプションが必要なだけであれば、ブランド化されたボタンが最も簡単な方法です。

この記事でわかること：

• 生のZoomリンクが埋め込めない理由と、その代替手段
• WordPressプラグインを使ってZoomミーティングを埋め込む方法（コード不要）
• カスタムウェブサイト構築におけるZoom Meeting SDKの利用方法
• ウェブサイトにZoomウェビナーを埋め込む方法
• 埋め込まれたZoomミーティングから議事録とメモをキャプチャする方法

ウェブサイトにZoomミーティングを埋め込むには？

「 Zoom Meeting SDK」を使用します。これにより、Zoomの全機能（ビデオ、オーディオ、チャット、ブレイクアウトルーム）をウェブページ内に直接埋め込むことができます。開発者でない場合はWordPressプラグインが設定を処理し、最もシンプルなユースケースでは参加ボタンで十分です。

💡 ヒント： ミーティングが開始されたら、通話中にメモを取ることなく、発言された内容をすべて記録できます。 無料のTactiq Chrome拡張機能をインストールしてください、そうすれば、埋め込まれたZoomミーティングをリアルタイムで文字起こししてくれます。

ウェブサイトにZoomミーティングを埋め込む3つの方法

ウェブサイトにZoomミーティングを埋め込む方法は3つあります。適切な方法は、技術的な設定、エクスペリエンスをどの程度カスタマイズしたいか、そしてどれだけ早く公開したいかによって異なります。

方法1：WordPressプラグイン（コード不要）

WordPressプラグインは、サイトにZoomミーティングを埋め込む最も速い方法です。これにより、Zoom Meeting SDKの統合が自動的に行われるため、コードは不要です。

eLearning EvolveのZoomy は最も実績のあるオプションです。会議、ウェビナー、録画に対応しています。Gutenbergブロック、従来のWordPressエディター、Elementorに対応しており、ブレイクアウトルーム、投票、ライブチャット、画面共有、クローズドキャプション、待機室コントロールなど、Zoomの全機能をあなたのページで直接実行できます。

設定方法はこちらです。

1. WordPressの管理画面で、 プラグイン → 新規追加を検索してインストールするか、プラグインのZIPファイルを直接アップロードしてください。
2. プラグインを有効化します。Zoomyダッシュボードの 設定 に移動し、API認証情報（Zoom App Marketplaceから取得したクライアントIDとクライアントシークレット）を使用してZoomアカウントを接続します。
3. WordPressのサイドバーメニューから Zoomミーティング を選択し、新しいミーティングを作成します。ミーティングIDを入力し、デフォルト設定を構成してください。
4. 埋め込むには、Zoomy Gutenbergブロックを任意のページまたは投稿に追加するか、ショートコードをテキストエディターに貼り付けます。
5. ページを公開します。参加者は、ダウンロード不要であなたのウェブサイトから直接Zoomミーティングに参加できます。

Zoomyの設定エリアで自動参加モードを有効にすると、名前入力画面をスキップできます。ログイン済みのWordPressユーザーは、直接ビデオ会議に参加できます。

こんな方におすすめ： ノーコードでZoomアプリの全機能を利用したい教育関係者、イベント主催者、中小企業。

より軽量なオプションをご希望ですか？ ZD Embed for Zoom Meeting SDKは、WordPressプラグインエリアで利用可能な無料のオープンソース代替プラグインです。ショートコードを使用して、1ページにつき1つのミーティングを埋め込みます。アクティブインストール数がはるかに少ないため、非技術的なユーザーよりも、基本的なWordPressの設定に慣れている開発者向けです。

方法2：Zoom Meeting SDK（開発者向け）

The Zoom Meeting SDK は、Zoomをあらゆるウェブサイトやウェブアプリに直接埋め込むための公式な方法です。これにより、開発者はプラグインに頼ることなく、レイアウト、ユーザーエクスペリエンス、およびデフォルト設定を完全に制御できます。

コードを記述する前に、Zoomアプリを作成し、SDK認証情報を取得する必要があります。

1. Zoom App Marketplace にログインし、 開発 → アプリを構築をクリックします。

2. 一般アプリ を選択し、作成をクリックします。

3. 機能 → 埋め込み に移動し、Meeting SDKを有効にします。

4. クライアントID と クライアントシークレット アプリケーション認証情報エリアから取得します。これらはAPIキーとシークレットキーです。安全に保管してください。

認証情報を取得したら、Web SDKには2つの表示モードがあります。

• クライアントビュー：ウェブページ内にZoomクライアントの全インターフェースを、標準のZoomアプリと同様に表示します。モバイルブラウザのサポートに最適です。
• コンポーネントビュー：ミーティングをモジュール化されたコンポーネントに分割し、ページ上のどこにでも配置できます。デザインの柔軟性が向上しますが、デスクトップブラウザでの使用のみを想定しています。

SDKはReact、Angular、Vue.js、およびバニラJavaScriptをサポートしています。npm（Node Package Manager）またはCDN（Content Delivery Network）を介してインストールし、クライアントIDで初期化し、各セッションを認証するためにサーバー側でJWT（JSON Web Token）署名を生成します。

Meeting SDKは、 iFrame ウェブページ上のiFrame、またはネイティブのAndroidおよびiOSアプリのWebViewに、ZoomのiFrame実装に関する公式のベストプラクティスに従って埋め込むこともできます。

最適な用途： カスタムUI、パラメータの完全な制御、およびウェブアプリとの深い統合を求める開発者。

方法3：参加リンクまたはボタンを埋め込む

最も簡単な方法は、 Zoom参加リンク またはブランド化された参加ボタンをページに追加することです。これによりビデオ会議が直接埋め込まれるわけではありません。クリックすると参加者がZoomにリダイレクトされます。

方法は次のとおりです。

1. Zoomでミーティングをスケジュールし、Zoomアカウントダッシュボードから参加リンクをコピーします。
2. ウェブサイトまたはページビルダーのテキストエディタを使用して、ウェブページ上のボタンまたはテキストリンクにリンクを貼り付けてください。
3. 必要に応じて、会議のパスワードと固有の会議IDをURLパラメータに追加すると、参加者は個別のプロンプトなしで自動的に参加できます。

知っておくべき制限事項：

• 参加者は会議に参加するためにウェブサイトを離れることになり、埋め込みビデオ体験は提供されません
• モバイルでは、リンクをクリックするとZoomアプリが起動します（インストールされていない場合はインストールを促されます）
• Zoomクライアントの表示やデフォルトの会議設定を制御することはできません
• 参加者がサイト内に留まる必要がある場合には適していません

最適な用途： より多くの人が簡単に会議を見つけて参加できるようにしたいだけのシンプルなユースケース（ランディングページ、予約確認ページ、コミュニティイベントカレンダーなど）に最適です。

ウェブサイトにZoomウェビナーを埋め込む方法

Zoomウェビナーの埋め込みは、会議の埋め込みと同じ方法で行います。Zoom Meeting SDKまたはZoomyのようなWordPressプラグインを使用します。ただし、設定を行う前に、ウェビナーが通常の会議とどのように異なるかを理解しておくことが重要です。その違いが、設定と参加者の体験に影響を与えるためです。

Zoomウェビナーの仕組みについて詳しく知るには、以下を参照してください。 Zoomウェビナーとは何か、その使い方。

会議とウェビナーの主な違い

• 役割：会議にはホストと参加者がいます。Zoomウェビナーにはホスト、 共同ホスト、パネリスト、および出席者がいます。発言、ビデオ共有、画面共有ができるのはホストとパネリストのみです。
• 参加者の体験: ウェビナーの参加者は、既定で視聴専用モードで参加します。ホストがこれらの機能を有効にしている場合、Q&A、チャット、投票、リアクションを通じて交流できます。
• 定員: 通常のZoomミーティングは、BasicおよびProプランで最大100名まで参加できます。Zoomウェビナーは、購入した定員に応じて最大100,000名の視聴専用参加者に対応します。
• 登録: ウェビナーには、カスタムフィールドとブランディングを備えた組み込みの登録機能が含まれています。ミーティングでは、Proプラン以上でオプションの基本的な登録機能のみが提供されます。
• Zoomウェビナーは有料アドオンです: 通常のZoomミーティングプランには含まれていません。ウェビナー機能を利用するには、Zoomウェビナーライセンスを別途購入する必要があります。
• 参加者リスト: ミーティングでは、誰もが参加者を確認できます。ウェビナーでは、ホストとパネリストのみが参加者リストを表示できます。

ウェビナーとミーティングのどちらを埋め込むべきか

ウェビナーは、製品発表、全社的な告知、オンライン授業、タウンホールミーティングなど、参加者との交流を限定し、構成されたプレゼンテーションを行いたい一般公開イベントに適しています。ミーティングは、全員が平等に参加する必要がある共同作業セッションに適しています。

ウェビナーのSDK要件

Zoom Meeting SDKは、ミーティングとZoomウェビナーの両方をサポートしています。同じクライアントビューとコンポーネントビューのオプションが適用されます。ユーザーがSDKを介してウェビナーに参加するたびに、セッションを認証するためにサーバー側でSDK JWTを生成します。ウェビナーに登録が必要な場合は、 Zoom Meeting SDKドキュメント で特定のトークン要件を確認してください。標準の未登録参加とはフローが異なります。

ウェブサイトにZoomを埋め込む際のよくある問題

ウェブサイトにZoomを埋め込むにはいくつかの設定が必要で、どの方法を使用してもいくつかの問題が発生します。公開する前に注意すべき点を以下に示します。

生のiframe埋め込みは機能しません

標準のZoom参加リンクをページ上のiframeに直接埋め込むことはできません。ブラウザとプラットフォームの制限により、確実に読み込むことができません。Zoom Meeting SDKが正しいアプローチです。これはウェブ埋め込み専用に設計されており、認証とレンダリングレイヤーを適切に処理します。

iOSおよびモバイルブラウザの制限事項

コンポーネントビューはデスクトップブラウザ専用です。モバイルでは、代わりにクライアントビューを使用してください。特にiOSでは、完全なミーティング体験のためにZoomアプリが必要です。Web SDKはiOSモバイルブラウザでのサポートが限られています。視聴者が主にモバイルを使用している場合は、公開前にこの点を考慮して設定してください。

API認証情報の誤りおよび無効な署名

これは開発者が遭遇する最も一般的な技術的問題です。SDKは、クライアントIDとクライアントシークレットからサーバー側で生成されたJWT署名を使用して、すべてのセッションを認証します。署名が失敗すると、ミーティングはロードされません。一般的な原因は次のとおりです。

• JWTペイロードで数値のミーティングIDの代わりにミーティングUUIDを使用している
• サーバーの時計が数秒ずれているだけでも、署名が無効になる可能性があります。
• サーバーとZoom App Marketplaceのアプリ認証情報エリアの間でクライアントIDまたはクライアントシークレットが一致しない
• ロールの不一致：署名内のロール値（参加者は0、ホストは1）が、参加時に渡す値と一致している必要があります。
• トークンの有効期限切れ：SDK JWT署名は、iat値から最大48時間有効です。

ページにミーティングが表示されない

ミーティングウィンドウが表示されない場合は、まずこれらを確認してください：

• ページがHTTPSで提供されていること：SDKは安全な接続を必要とします。
• iframeにカメラとマイクに必要なブラウザ権限が付与されていること。ブラウザはデフォルトでiframe内でこれらをブロックします。
• 埋め込みページのページキャッシュが無効になっていること：SDK JWT署名には有効期限があるため、古いキャッシュされたトークンは「無効または期限切れのトークン」エラーを引き起こします。
• お使いのSDKアプリで、ミーティングSDK機能が有効になっていること（場所： 機能 → 埋め込み ）Zoom App Marketplace内

ウェブサイトに埋め込まれたZoomミーティングからメモをキャプチャする方法

ウェブサイトにZoomを埋め込むことで、アクセスに関する問題は解決します。しかし、ミーティングが終了すると、ほとんどの埋め込み設定では、話された内容の記録が残りません。

埋め込みZoomミーティングはブラウザで実行されるため、 Tactiq すぐに使えます。 無料のChrome拡張機能をインストールし、Chromeで埋め込み会議に参加すると、Tactiqがすべてをリアルタイムで文字起こしします。ボットは不要で、録音も音声の保存も行いません。

以下の情報を含む完全な文字起こしが得られます。

• 話者ラベル
• 決定事項とアクションアイテムを含むAI要約
• Google Docs、Notion、HubSpotなどへのワンクリックエクスポート

カスタムAIプロンプトを実行して、文字起こしから直接、フォローアップメールやプロジェクトの更新情報を生成することもできます。

これは、専用ページでホストされる定期的な埋め込み会議（クライアントとの通話、オンライン授業、チームの朝会など）に特に役立ちます。すべてのセッションが自動的に検索可能な記録となります。

Zoomの文字起こしについてさらに詳しく知るには、以下をご覧ください。 Zoom会議の文字起こしを無料で入手する方法 および Zoomの文字起こしを見つける方法。

{{rt_cta_ai-convenience}}

ウェブサイトにZoomを埋め込み、会議のインサイトを見逃さない

これまで見てきたように、ウェブサイトにZoomを埋め込む方法は3つあります。WordPressプラグインが最も手軽な方法です。Zoom Meeting SDKは、開発者にレイアウトとUIの完全な制御を提供します。そして、参加ボタンは基本的なユースケースにとって最もシンプルな選択肢です。

会議の埋め込みが第一段階です。第二段階は、発言内容を記録することです。Tactiqは、埋め込まれたすべてのZoomセッションをリアルタイムで文字起こしし、AI要約とアクションアイテムを生成し、自動的に検索可能な記録を作成します。

Tactiqを無料でインストールして、埋め込まれたすべてのZoom会議の文字起こしを入手しましょう。

‍

‍