はじめに
Metatellプラグインは、Module Federationを使用してmetatellのルームに2D UIコンポーネントを動的に挿入する仕組みです。TypeScript + Reactベースで開発し、所定の位置にカスタムUIを配置できます。
📦 GitHubテンプレートリポジトリ: https://github.com/urth-inc/metatell-plugin-template
前提条件
- Node.js 20以上（推奨: Volta使用）
- npm または yarn
- Git
- TypeScriptとReactの基礎知識
- Metatell管理画面へのアクセス権限
テンプレート概要
| テンプレート名 | 用途 | 導入難易度 | 主な実装内容 |
|---|---|---|---|
AdditionalToolbarButton | ツールバーにカスタムボタンを追加 | ★☆☆ | アイコン、クリックアクション |
CustomOverlay | 画面上の任意位置にUI要素を配置 | ★★☆ | 位置、サイズ、コンテンツ |
CustomEntryPanel | ルーム入室時のカスタムパネル | ★★☆ | 入室フロー、初期設定UI |
CustomProfileModal | プロフィール表示のカスタマイズ | ★★☆ | ユーザー情報表示、編集UI |
CustomLeaveButton | 退出ボタンのカスタマイズ | ★☆☆ | 退出確認、アクション |
CustomChatButton | チャット機能のカスタマイズ | ★★★ | メッセージUI、送受信処理 |
CustomMegaphoneButton | 拡声器機能のカスタマイズ | ★★☆ | 音声配信UI、範囲設定 |
CustomNearestUserProfile | 最寄りユーザー情報の表示 | ★★★ | 距離計算、リアルタイム更新 |
CustomTutorial | チュートリアルのカスタマイズ | ★★★ | ステップ管理、進捗追跡 |
各テンプレートの詳細な実装例については、テンプレート一覧をご覧ください。
セキュリティに関する注意
⚠️ 重要: プラグインのJavaScriptコードはMetatellのルーム内のユーザー環境でサンドボックス無しで直接実行されます。開発時は以下の点にご注意ください：
- 依存ライブラリの精査: npmパッケージを追加する際は、脆弱性や悪意のあるコードが含まれていないか確認してください
- XSSの回避: ReactはデフォルトでXSS対策されていますが、
dangerouslySetInnerHTMLを使ってユーザ入力を表示しないでください。 - 外部通信の最小化: 不要な外部APIへの通信を避け、必要な場合はHTTPS通信を使用してください
- 機密情報の取り扱い: APIキーやトークンなどの機密情報は環境変数やサーバーサイドで管理し、クライアントコードには含めないで ください
- 実行コードの制御: 外部のコード（CDN配信のJavaScriptやGoogle Tag Manager）を実行するようなコードは極力埋め込まないでください