Contents
Figmin XRで始める前に：ローカル環境構築の基本
Figmin XRを始めるには、まずローカル環境の整備が不可欠です。Node.jsとTypeScriptの導入手順に沿って進めることで、開発の基礎を固められます。本セクションでは、OS別インストール手順やパッケージ管理ツールの選択肢を解説します。
Node.jsとTypeScriptの導入手順
Figmin XRのプロジェクト構築にはNode.js（公式推奨バージョンv18）とTypeScriptが必要です。以下に主なOS向けの導入手順を紹介します。
| OS | 手順例 | 注意点 |
|---|---|---|
| Windows | Node.js公式サイトからインストーラーをダウンロード → npm install -g typescript でTypeScriptをインストール |
Windows Subsystem for Linux（WSL）環境も利用可能 |
| macOS | Homebrewを使用：brew install nodenpm install -g typescript |
事前にXcodeコマンドラインツールをインストール |
重要ポイント: Node.jsのバージョンは常に最新版ではなく、公式ドキュメントで推奨されるバージョン（例：Node.js v18）を使用することをおすすめします。最新版との互換性問題が発生する可能性があるため、公式リポジトリのREADME.mdに記載されている情報を定期的に確認してください。
開発環境の確認と設定
ローカル環境が整った後は、開発に必要なツールをインストールします。Figmin XR公式リポジトリからプロジェクトテンプレートを取得し、npm installで依存関係を導入してください。
- プロジェクト初期化:
npx create-figmin-xr-project my-project - 環境変数の設定:
.envファイルを作成し、APIキーなどを記述 - 起動コマンド:
npm run devでローカルサーバーを起動
注意: 開発中にエラーが出た場合、
npm lsやnpx figmin-xr-diagnoseコマンドで原因を特定できます。
Mixed Reality空間での基本操作とインターフェース
Figmin XRでは、VR空間内の移動やオブジェクト操作が直感的なインターフェースで実現されています。Quest 3ユーザー向けにUI操作やジェスチャーコマンドのポイントを解説します。
VR空間内での移動方法
Quest 3での移動は、以下の2つの方法で行えます。
- Teleport（テレポート）: コントローラーで地面をタップし、目的地点を指差すことで瞬間移動
- Walk（歩行）: 頭の向きに合わせて自然な歩き方で移動
補足: トレッキングモードでは視線方向に応じた自動移動も可能です。
オブジェクト操作のコントロール技法
空間内にあるオブジェクトを操作するには、以下の手順を意識してください。
- 選択: コントローラーでオブジェクトを指差すと選択状態になる
- 回転/移動: オブジェクトをドラッグして回転・位置調整
- 削除: メニューから「Delete（削除）」を選択
Tips: コントローラーのトリガーボタンでオブジェクトを選択するのも効率的です。
プロジェクト開発の第一歩：デバッグとアカウント管理
Figmin XRでのプロジェクト作成には、リアルタイムデバッグや公式アカウント登録が不可欠です。本セクションでは、マルチプレイ参加に必要な認証プロセスをステップバイステップで説明します。
Quest 3でのリアルタイムデバッグ手順
Quest 3で開発中のアプリケーションをデバッグするには以下の準備が必要です。
- USB接続: PCとQuest 3をUSBケーブルで接続
- ADB設定:
adb devicesコマンドでデバイスの認識を確認 - デバッグモード有効化: Quest 3側で「Developer Options」→「Enable ADB Debugging」にチェック
エラーログ確認方法: PCから adb logcat -d を実行し、エラーメッセージを解析します。
注意: Quest 3のADB設定では、USB接続時に「ファイル転送（MTP）」モードではなく、「パブリック（ファイル共有）」モードを有効にしておく必要があります。詳細はMeta公式ドキュメントを参照してください。
公式アカウントの登録フロー
Figmin XR公式サイトでアカウントを作成するには以下の手順を実施してください。
- 公式サイトにアクセスし、「Sign Up（新規登録）」を選択
- メールアドレスとパスワードを入力して登録
- 送信された確認メールをクリックし、認証完了
マルチプレイ参加の際には: 登録済みアカウントでログイン後、「Multiplayer（マルチプレイ）」セクションからルームへ招待されます。
初プロジェクト制作ガイド：アイデアから実装まで
Figmin XRでの初プロジェクト作成は、テンプレート使用からカスタマイズまでの段階を踏んで進めることがおすすめです。シーン作成やインタラクションの基本構造を解説します。
シーン作成の基本構造
新規プロジェクトでは、以下の3つのステップでシーンを作成できます。
- テンプレート選択: 「Empty Scene（空シーン）」か「Sample Scene（サンプルシーン）」を選択
- オブジェクト配置: パレットからモデルやテキストをドラッグ＆ドロップ
- シーン保存:
File → Save Sceneで作業内容を保存
例: サンプルシーンをベースに、「Hello World」のテキスト表示機能をカスタマイズします。
簡単なインタラクションの実装例
Figmin XRでは、以下のコードスニペットでボタンクリック時の動作を実装できます。
|
1 2 3 4 5 |
// サンプルコード: ボタンクリックイベント function onButtonClick() { console.log("Button clicked!"); } |
使用方法: onButtonClick関数をUIコンポーネントにアタッチすることで、ユーザーがボタンをクリックしたときに動作します。詳細はFigmin XRのAPIドキュメントを参照してください。
注意: コード変更後は
npm run devを再度実行し、変更内容を反映させましょう。
コミュニティとの連携：作品共有と学びの輪
Figmin XRには公式ギャラリーが用意されており、ユーザー間での作品共有やフィードバックを受け取ることができます。本セクションでは投稿手順や他ユーザー作品の参照方法を解説します。
公式ギャラリーへの投稿手順
自分の作ったプロジェクトをコミュニティに公開するには以下の手順を行います。
- プロジェクト保存:
File → Save Projectでローカルに保存 - GitHubリポジトリ作成: figmin-xr公式ガイドに沿ってリポジトリを作成
- 投稿: 公式ギャラリーへアクセスし、「Submit（投稿）」を選択
SNS連携機能: 投稿時にTwitterやLinkedInのアカウントと連携させることで、他ユーザーとの交流が可能です。
他ユーザー作品の参照方法
他のユーザーの作品を参照するには、公式ギャラリーから以下のように操作します。
- カテゴリ（例：教育・ゲーム）を選択
- お気に入りのプロジェクトをクリックし、「View in VR（VRで見る）」を選択
バージョン管理: プロジェクトに変更がある場合は、Gitを使用してバージョン履歴を管理できます。