メインコンテンツまでスキップ

はじめに

metatellプラグインは、Module Federationを使用してmetatellのルームに2D UIコンポーネントを動的に挿入する仕組みです。TypeScript + Reactベースで開発し、所定の位置にカスタムUIを配置できます。

📦 GitHubテンプレートリポジトリ: https://github.com/urth-inc/metatell-plugin-template

前提条件​

  • Node.js 24（推奨: Volta使用）
  • npm または yarn
  • Git
  • TypeScriptとReactの基礎知識
  • metatell管理画面へのアクセス権限

テンプレート概要​

テンプレート名用途導入難易度主な実装内容
AdditionalToolbarButtonツールバーにカスタムボタンを追加低アイコン、クリックアクション
CustomOverlay画面上の任意位置にUI要素を配置中位置、サイズ、コンテンツ
CustomEntryPanelルーム入室時のカスタムパネル中入室フロー、初期設定UI
CustomProfileModalプロフィール表示のカスタマイズ中プロフィール情報表示、編集UI
CustomLeaveButton退出ボタンのカスタマイズ低退出確認、アクション
CustomChatButtonチャット機能のカスタマイズ高メッセージUI、送受信処理
CustomMegaphoneButton拡声器機能のカスタマイズ中音声配信UI、範囲設定
CustomWebCameraButtonWebカメラボタンのカスタマイズ中カメラ共有UI、共有先制御
CustomTutorialチュートリアルのカスタマイズ高ステップ管理、進捗追跡
CustomNearestUserProfile最寄り利用者情報の表示高距離計算、リアルタイム更新
CustomExitScreen退室/エラー画面のカスタマイズ中理由別メッセージ、遷移導線

各テンプレートの詳細な実装例については、テンプレート一覧をご覧ください。

セキュリティに関する注意​

⚠️ 重要: プラグインのJavaScriptコードは、metatellルーム内の利用者環境でサンドボックスなしに直接実行されます。開発時は以下の点にご注意ください。

  • 依存ライブラリの精査: npmパッケージを追加する際は、脆弱性や悪意のあるコードが含まれていないか確認してください
  • XSSの回避: ReactはデフォルトでXSS対策されていますが、 dangerouslySetInnerHTML を使って利用者入力を表示しないでください。
  • 外部通信の最小化: 不要な外部APIへの通信を避け、必要な場合はHTTPS通信を使用してください
  • 機密情報の取り扱い: APIキーやトークンなどの機密情報は環境変数やバックエンド側で管理し、クライアントコードには含めないでください
  • 実行コードの制御: 外部のコード（CDN配信のJavaScriptやGoogle Tag Manager）を実行するようなコードは極力埋め込まないでください
に最終更新