A-FRAME 公式ドキュメントの非公式日本語訳
1.3.0 › introduction

ビジュアルインスペクター & 開発者用ツール

このセクションでは、VRの開発体験を向上させる多くの便利なツールについて説明します。

  • A-Frame Inspector (opens new window) - シーンの異なるビューを取得し、エンティティを微調整した際の視覚効果を確認するためのインスペクタツールです。ブラウザのDOMインスペクタに相当するVRツールです。どのA-Frameシーンでも<ctrl> + <alt> + iで開くことができます。

  • キーボードショートカット

  • Motion Capture (opens new window) - ヘッドセットとコントローラのポーズとイベントを記録し、再生するツールです。録画ボタンを押して、VRヘッドセット内を動き回り、コントローラーでオブジェクトとインタラクトします。その後、その記録を任意のコンピュータで再生し、迅速な開発とテストを行います。ヘッドセットへの出入りを減らすことができます。

A-Frameの上に構築され、コードなしで使用できるGUIツールについて説明します。また、複数のマシンにまたがって開発を容易にするその他のツールについても触れます。

# A-Frame インスペクター

A-Frameインスペクター (opens new window)は、シーンの検査や微調整を行うためのビジュアルツールです。インスペクタを使うと、以下のことができます。

  • ハンドルとヘルパーを使ったエンティティのドラッグ、回転、拡大縮小
  • ウィジェットを使ったエンティティのコンポーネントとそのプロパティの調整
  • コードとブラウザを行き来することなく、値を変更した結果を即座に確認可能

インスペクターは、ブラウザのDOMインスペクターに似ていますが、3DとA-Frame用に調整されています。インスペクタを切り替えると、どんなA-Frameのシーンでも開くことができます

Inspector Preview

# インスペクターを開く

キーボードの<ctrl> + <alt> + iのショートカットを押すのが最も簡単な方法です。これにより、CDN経由でインスペクタのコードが取得され、インスペクタにシーンが表示されます。同じショートカットキーで、インスペクターを閉じることもできます。

ローカルのシーンをインスペクタで開くだけでなく、（作者が明示的に無効にしていない限り）インスペクタを使用して他のA-Frameシーンを開くことができます。

インスペクタのローカル、開発、カスタムビルドの提供に関する詳細は、インスペクタの README (opens new window) を参照してください。

# インスペクターを使う

# シーングラフ

インスペクタのシーングラフは、シーンをツリーベースで表現したものです。シーングラフを使って、エンティティの選択、検索、削除、クローン、追加、またはHTMLの書き出しができます。

Inspector Scene Graph

シーングラフは、three.jsの内部オブジェクトではなく、A-Frameのエンティティをリストアップします。 HTML はシーングラフの表現でもあるため、インスペクタのシーングラフは、基礎となる HTML を忠実に反映しています。 エンティティは、HTML IDまたはHTMLタグ名で表示されます。

# ビューポート

ビューポートは、インスペクタから見たシーンを表示します。ビューポートを回転、パン、ズームして、シーンの表示を変更することができます。

  • 回転：マウスの左ボタンを押しながら（トラックパッドでは指を1本下に）ドラッグします。
  • パン：マウスの右ボタン（トラックパッドでは2本指）を押したままドラッグする
  • ズーム：上下にスクロール（トラックパッドでは2本指スクロール）

また、ビューポートからエンティティを選択し、変形させることができます。

  • 選択：エンティティを左クリックし、ダブルクリックでカメラに焦点を合わせる
  • 変形：ビューポート右上のヘルパーツールを選択し、エンティティを囲む赤・青・緑のヘルパーをドラッグして変形させる

Inspector Viewport

# コンポーネントパネル

コンポーネントパネルには、選択したエンティティのコンポーネントとプロパティが表示されます。 共通コンポーネントの値の修正（位置、回転、スケールなど）、付与されたコンポーネントの値の修正、mixinの追加と削除、コンポーネントの追加と削除を行うことができます。

各プロパティのウィジェットの種類は、プロパティの種類に依存します。 例えば、ブーリアンにはチェックボックス、数値には値スライド、色にはカラーピッカーが使用されます。

個々のコンポーネントのHTML出力をコピーすることができます。これは、視覚的に微調整してコンポーネントの望ましい値を見つけ、それをソースコードに同期させるのに便利です。

Inspector Components

# ショートカット

h キーを押してショートカット一覧を見ることができます。

# マウスとキーボードのショートカット

debugcursor (opens new window) <a-entity cursor="rayOrigin: mouse"></a-entity> を使用すると、 マウスを使ってエンティティをホバーしたりクリックしたりすることができます。 これらは mouseenter、mouseleave、click イベントを提供し、 コントローラ (<a-laser-controls> 経由など) でカーソルを使用する場合と互換性があります。 またカーソルイベントを記録するためのデバッグカーソルコンポーネントがある。

document.addEventListener('keydown', function (evt) { // ...}); を用いて、アプリケーション内の動作をテストするためのキーボードショートカットバインディングを開発するのは便利です。

また、6DoFのコントローラをキーボードで操作するコンポーネント (opens new window)もあります。

# モーションキャプチャ

ルームスケールのVRは、開発が面倒です。コードを変更するたびに

  • ウェブページを開く（多くの場合、別のコンピューターで実行される）。
  • VRに入る ヘッドセットを装着する コントローラを手に取る（しばしば電源を入れ直す必要がある） ヘッドセットとコントローラーを使用してのテストラン ヘッドセットとコントローラーを外し、ブラウザの開発ツールを起動します。 現在は実験的でバグが多いため、必要に応じてブラウザを再起動してください。 繰り返し

ルームスケールのVR開発は遅延しがちです。しかし、私たちは、A-Frameモーションキャプチャ・コンポーネント (opens new window)を使って、VR開発の自動化、高速化、そして外出先での開発を可能にするワークフローを考え出しました。

モーションキャプチャ・コンポーネントを使えば、VRの動作（ヘッドセットやコントローラーの動き、コントローラーのボタン操作など）を記録し、ヘッドセットがなくても、どんなデバイスでも、そのVRの動作を繰り返し再生することができるのです。

# 使用例

Rapid Development

VR開発における人間工学を大きく向上させるモーションキャプチャーの実際の使用例をいくつかご紹介します。

  1. テストトライアルの高速化 ヘッドセットの着脱したり、VRの世界への進入、コントローラーの操作、特定の動作、ブラウザの再起動は必要ありません。 一度録画するだけで、何時間も開発することができます。

  2. 出先でも開発: テストするたびにヘッドセットをかぶってVRの世界に入り直す必要はありません。録画データをMacbookなどに転送し、コーヒーショップに出かけて、安定したブラウザで録画データを使ってVRアプリケーションの開発を継続できます。console.logを追加したり、アプリケーションをリファクタリングしたり、A-Frameのインスペクタ（<ctrl> + <alt> + i）を使って再生画面を止め、いろいろ調べたりすることができます。

  3. 自動化された統合テスト: 回帰テストケースやQAとして、さまざまな記録を大量に取ることができます。録画を蓄積し、開発を行い、時々録音をクリックして、すべてがまだ機能していることを確認します。複数の録音をプロジェクトに保存して、後でテストすることもできます。

  4. 複数の開発者が1つのヘッドセットを共有します: 一人の開発者がViveで録画を行い、その録画をもとに別の場所に行って開発することができます。

  5. 録画のリクエスト: ViveやRiftが手元になくても、同僚や友人が持っている場合があります。ngrok (opens new window)経由で私たちのWebアプリケーションへのリンクを渡し（Webってすごいですよね）、録画してもらって、それを私たちに送ってください。これで、開発から解放されます。

  6. バグのデモをする: あるいは、VRウェブアプリケーションでバグを発見し、それを誰かに見せたいとします。録音を撮って、それを送ってデバッグしてもらいましょう。バグの再現手順を説明する必要はなく、すべて録画に含まれています。

  7. ユニットテストの自動化: KarmaやMochaのようなユニットテストフレームワークで録画を使い、録画を再生してアサーションを行うことができます。例えば、ボックスをタッチして色が変わるかどうかをチェックします。例として、William MurphyによるA-Frame Machinima Testing (opens new window)を参照してください。

# 録画の方法

詳しくは、モーションキャプチャーのドキュメント (opens new window)をお読みください。ここでは、録画の設定方法を説明します。

  1. モーション キャプチャ コンポーネントのスクリプト タグを HTML ファイルに書き込みます (例: <script2 src="https://unpkg.com/aframe-motion-capture-components/dist/aframe-motion-capture-components.min.js">)
  2. アバター・レコーダー・コンポーネントをシーンに追加します（例：<a-scene avatar-recorder>）。
  3. VRに入ります
  4. <space>を押して録画を開始します
  5. 動作を録画します
  6. <space>を押して録画を停止します
  7. 録画のJSPNファイルをセーブするかuを押してアップロードし、シェア用のURLを入手してください。

では、録画したものを再生してみましょう。デスクトップでWASDとマウスのドラッグ操作でカメラの録画を試してみましょう。録画されたサンプル (opens new window)に向かい、ブラウザのConsoleを開いてフィードバックを取得し、を押して録画の開始と停止を行います!

Record (opens new window)

# 再生方法

デフォルトでは、録画データはローカルストレージに保存され再生されます。 外出先で録画したものを使いたい場合に、録画したものを再生する方法を説明します（上記のスクリプトタグはすでに用意されていると仮定します）。

  1. 録画ファイルを、ウェブページからアクセス可能な場所に置きます（プロジェクトディレクトリやオンラインなど）。
  2. シーンにアバター再生コンポーネントを追加する（例：<a-scene avatar-replayer>）。
  3. URLに ?avatar-recording=path/to/recording.json を追加するか、<a-scene avatar-replayer="src: path/to/recording.json"> と設定します。

そして、ヘッドセットなしでどこからでも、どんなデバイスでも、心ゆくまで録音を再生することができます。ヘッドセットを装着して、クリックをいくつか記録し、ラップトップから、記録で発したコントローライベントの上にイベントハンドラを構築できます。

# スペクテーターモード

A-Frameモーションキャプチャーコンポーネントには、アバター・プレイヤーコンポーネントから有効にできるスペクテーターモードがあります。

<a-scene avatar-replayer="spectatorMode: true">

これにより、三人称視点での録画を見ることができます。 一人称視点だと何が起こっているのかがわかりにくいので、とても有益です。 一人称視点は当然手ぶれしますし、手がカメラの邪魔をしたり、画面の外で動作していたり、カメラが常に遠ざかっていると一箇所にとどまっていることが難しくなります。スペクテーターモードでは、シーンを自由に動き回り、好きな角度で見たり、好きな場所に焦点を当てたりすることができます。

Spectator Mode

# A-FrameをベースにしたGUIツール

A-Frameの上に、インターフェイスやアプリケーションを介してコードを抽象化し、コンテンツ制作をより簡単にするツールを構築した人たちがいます。これらは、開発者用ツールというよりも、より完全なエディターとして機能しています。

# Supercraft (opens new window)

あなたの手でVRサイトを構築し、Webの世界にパブリッシュしましょう。

# Ottifox (opens new window)

Ottifoxはパワフルなデザイン/プロトタイピングツールです。これによってブラウザの中で動くインタラクティブなVRシーンを簡単に作成することができます。

Ottifox

# Hologram (opens new window)

WebVRの創作をこれ一つでできます。

Holgoram

# Fader (opens new window)

今すぐ、あなただけのVRストーリーを作りましょう。Faderでは、VRストーリーを作成し、公開することができます。 360の球体に複数のレイヤーの情報を追加し、シーンをデザインし、あなたのストーリーを伝えましょう。簡単で高速でウェブで動作します"

Fader

# 復数のマシンを使った開発

VR開発では、複数のマシンにまたがって開発することが一般的です。例えば、ノートパソコンで開発し、VRデスクトップでテストするといった具合です。その際に役立つのが、以下のツールです。

# Synergy

Synergy

Synergy (opens new window) は、1つのマウスとキーボードを複数のコンピュータで共有することができます。 例えば、ノートパソコンからデスクトップを操作することができます。ノートパソコンからコードを書くこともできます。 そして、ノートパソコンからデスクトップを操作して、ブラウザの更新、VRの入力、異なるURLへのアクセス、モーションキャプチャーの記録、ブラウザの開発者ツールの検査などを行うことができるのです。作業台の上ににキーボードとマウスを2セット置く必要はありません。

Synergy Basicのライセンスは19ドルですが、複数のコンピュータで開発するのであれば、その価値は十分にあります。

# ngrok

ngrok

ngrokを使うと、ファイアウォールやNATネットワークを通してでも、他のコンピュータがアクセスできるように、ローカルの開発サーバを簡単に公開することができます。手順は以下の通りです。

  1. ngrok をダウンロードする
  2. コマンドラインを開き、ngrokがダウンロードされたディレクトリに移動する
  3. ローカルに開発用サーバーを起動しておく (例: python -m SimpleHTTPServer 8080)
  4. ./ngrok http <PORT> を実行（例： ./ngrok http 8080)
  5. ngrokインスタンスが立ち上がりして、相手のコンピューターがブラウザ経由でアクセスするためのURLを提供します（例：https://abcdef123456.ngrok.io）。

ngrokは、プレミアムアカウントを取得して独自のドメインを活用し覚えやすいURLを発行できるようにすれば、最も人間工学的に優れています。 そうでなければ、URLは毎回ランダムになり、非常に入力しにくいです。ベーシックライセンスは3つの予約ドメインを$5/月で提供し、プロライセンスは2つの同時インスタンスを$8.25/月で提供します。ngrokの価格詳細 (opens new window).をご覧ください。

予約ドメインでは、https://abc.ngrok.io のような URL を予約することができます。abcはあくまで例であり、現在他者が使っているドメインであることに注意してください。そして、ngrokを起動するたびに、このドメインを渡します。

./ngrok http --subdomain=abc 8080

ngrokを起動するたびに、同じURLを使用することができます。さらに簡単にするために、Bashのエイリアスを追加することもできます。

alias ngrok="~/path/to/ngrok http --subdomain=abc"

そしてどこからでもコマンドラインで使うこともできます

ngrok 8080

あるいは、両方のコンピュータを同じローカルネットワークに接続し、ipconfigやifconfigを使って、片方のコンピュータをローカルIPアドレス（例：http://192.168.1.135:8000）を使ってもう片方のコンピュータに指し示すことも可能です。 しかし、ローカルIPアドレスを取得するためにはコマンドを実行しなければならず、そしてローカルIPアドレスはしばしば変更され またIPアドレスは覚えにくいため、ワークフローを混乱させる可能性があります。

Alternatively, we could have both computers connected on the same local network, and use ipconfig or ifconfig to point one computer to the other using the local IP address (e.g., http://192.168.1.135:8000). But that can disrupt workflow because we have to run commands to get the local IP address, the local IP address often changes, and it's hard to remember and type the IP.

# モーション・キャプチャー

モーションキャプチャについては前述しましたが、改めて説明すると、モーションキャプチャはマシンをまたいで開発する際に非常に役に立ちます。VR録画したものを共有し、他のPCで再生することができます。<space>でモーションキャプチャーを撮影した後、キーボードのuを押すと、撮影データがアップロードされ、簡単に転送できるURLを取得できます（自分たちでメールするよりも）。また、file.io (opens new window)を使用して録画データを転送することもできます。

← ホスティングと & 出力 →

TABLE OF CONTENTS
公式ドキュメント