Contents
Figmin XR開発環境構築の準備
Figmin XRを始めるには、ローカル環境の整備が不可欠です。Node.jsとTypeScriptの導入手順に沿って進めることで、開発の基礎を固められます。以下では必要な要件と具体的なインストール手順を紹介します。
ローカル開発環境の要件確認
Figmin XRの開発には以下のような基本的なソフトウェアが必須です。公式ドキュメントを参照しながら、環境を整えてください。
| 項目 | 要件 | 補足 |
|---|---|---|
| OS | Windows 10以降 / macOS | Linuxもサポート |
| Node.js | v20.0.0以上 | npmが含まれるバージョン |
| TypeScript | 5.3.3以降 | Figmin XR CLIに必要 |
| Git | 2.35.1以上 | プロジェクト初期化用 |
| Quest3 | 基本モデル | 実機デバッグに使用（2026年モデルの記載は現行機種との整合性リスクあり。事実確認が必要） |
注意: Node.jsとTypeScriptのバージョンは公式ドキュメントを常に確認してください。
Node.jsとTypeScriptの導入手順
以下にNode.jsとTypeScriptのインストール手順をステップバイステップで示します。
- Node.jsのダウンロード
- Node.js公式サイトからLTS版（v20以降）をダウンロードし、インストールします。
-
インストール後、コマンドプロンプトで以下を実行してバージョン確認を行います。
bash
node -v
npm -v -
TypeScriptのインストール
-
以下のコマンドでTypeScriptをグローバルにインストールします。
bash
npm install -g typescript -
インストール後、以下を実行してバージョン確認を行います。
bash
tsc -v -
開発環境の確認
- テキストエディタ（VS Codeなど）にTypeScript拡張をインストールし、プロジェクトを作成します。
- サンプルコードを実行して、環境が正常に動作することを確認してください。
Figmin XRプロジェクトの初期設定
Figmin CLIを使って新規プロジェクトを作成し、プロジェクト構造を理解しましょう。公式CLIツールを使用することで、開発効率を大幅に向上させられます。
Figmin CLIでの新規プロジェクト作成
Figmin CLIを使うことで、すぐに開発可能なプロジェクトテンプレートが生成されます。以下は手順です。
- CLIのインストール
-
以下のコマンドでFigmin CLIをグローバルにインストールします。
bash
npm install -g @figmin/xr-cli -
プロジェクト作成
-
ターミナルで以下のコマンドを実行します。
bash
figmin create my-xr-project -
プロジェクト名を入力し、テンプレートタイプ（TypeScriptなど）を選択します。
-
プロジェクト起動
-
生成されたディレクトリに移動して、以下のように起動します。
bash
cd my-xr-project
npm start
プロジェクト構造の概要
Figmin XRのプロジェクト構造は以下のようになります。
|
1 2 3 4 5 6 7 8 |
my-xr-project/ ├── src/ # スクリプトファイルとシーン定義 │ ├── main.ts # エントリポイント │ └── scenes/ # シーンごとのスクリプト ├── assets/ # 3Dモデルやテクスチャなどのアセット ├── config/ # 構成ファイル（環境設定など） └── package.json # パッケージ管理ファイル |
注意: 外部リンク先（例：
app-tatsujin.com,note.com）はFigmin XR公式リソースではない可能性があります。プロジェクト構造の詳細はFigmin XR公式ドキュメントで確認してください。
基本スクリプト作成とイベントハンドリング
Figmin XRではTypeScriptを使用してスクリプトを記述します。Hello Worldスクリプトを作成し、シーン起動時の処理を学んでください。
Hello Worldスクリプトのテンプレート
まずは、簡単なHello Worldスクリプトを作成します。以下のコードをsrc/scenes/hello-world.tsに記述してください。
|
1 2 3 4 5 6 7 8 |
import { Script } from '@figmin/xr-engine'; export class HelloWorldScript extends Script { onAwake() { console.log('Figmin XR Hello World!'); } } |
このスクリプトは、シーンが起動時に「Figmin XR Hello World!」とコンソールに表示します。
シーン起動時の初期化処理
Figmin XRではイベントライフサイクル（onAwake, onStart, onUpdateなど）を活用できます。以下はそれぞれの役割です。
- onAwake(): シーンが読み込まれた直後に実行されます。
- onStart(): オブジェクトがアクティブ化した際に呼び出されます。
- onUpdate(): フレームごとに呼ばれる処理（ゲームロジックの主な場所）。
例として、
onStart()でオブジェクトを画面に表示する処理を追加すると、以下のように記述できます。
|
1 2 3 4 |
onStart() { this.gameObject.getComponent('Text').text = 'Hello, MR World!'; } |
Quest3デバッグ手順とトラブルシューティング
実機での動作確認は開発プロセスにおいて不可欠です。PCとQuest3を接続し、デバッグ画面で問題点を把握してください。
USB接続設定
Quest3をPCに接続する際には、以下の手順が必要です。
- USBケーブル接続
- Quest3をPCのUSBポートに接続します。
-
「Developer Options」を開き、「Enable Developer Mode」をONにしてください。
-
Figmin CLIでのデバッグ準備
-
プロジェクトディレクトリで以下のように実行します。
bash
figmin build
figmin deploy -
これにより、アプリケーションがQuest3にデプロイされます。
-
デバッグモードの有効化
- Quest3上では「Figmin XR」アプリを開き、「Debug Mode」をONにしてください。
- コンソール出力はPC側で確認できます。
実機デバッグ画面の確認方法
Quest3で実行中のアプリのデバッグ情報を確認するには、以下のようにします。
- PC側のコンソールログ
-
npm startを実行したターミナルに、リアルタイムでログが表示されます。 -
Quest3画面内のデバッグメニュー
- メニューから「Debug」を選択すると、フレームレートやメモリ使用状況が確認できます。
トラブルシューティング: 接続エラーの場合は、USBケーブルを再接続し、「Developer Mode」が有効になっているか確認してください。Figmin XR公式ドキュメントで詳細な手順が紹介されています。
コントローラー入力の検知実装
Figmin XRでは、コントローラーのボタンやジェスチャーを簡単に検知できます。以下に基本的な入力処理の方法を示します。
基本的なボタンイベント処理
Quest3のコントローラーを介しての入力を取得するには、InputManagerクラスを使用します。
|
1 2 3 4 5 6 7 8 9 10 |
import { Script, Input } from '@figmin/xr-engine'; export class ButtonHandler extends Script { onAwake() { Input.onButtonDown('A', () => { console.log('Aボタンが押されました！'); }); } } |
このコードでは、Aボタンを押すとコンソールにメッセージが出力されます。
ジェスチャ認識の初期設定
ジェスチャ（例：親指でタップ）は以下の手順で検知できます。
- ジェスチャイベントリスナーの登録
-
Input.onGesture()を使って、ジェスチャを検出する処理を作成します。typescript
onAwake() {
Input.onGesture('tap', (position) => {
console.log(タップ位置: ${position.x}, ${position.y});
});
} -
ジェスチャ認識の有効化
- プロジェクト設定ファイル（
config/input.json）で、ジェスチャ認識を有効にしてください。
注意: TypeScript 5.3.3以降の記載が最新版と一致しているか確認が必要です。また、Node.js/LTS版(v20以降)と公式ドキュメントのバージョン指定に不一致がある可能性があります。