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

インストール

ここでは、A-Frameを使い始めるためのいくつかの方法を紹介します。 とはいえ、A-FrameはHTMLとJavaScriptで構成されているため、ほとんどの方法は特別なインストールは不要です。

# ブラウザ上のコードエディタ

一番早い体験方法はブラウザで遊んでみることです。

# GlitchでRemixしてみる

Glitch

Glitch (opens new window) はオンライン・コード・エディタであり簡単かつ即座にWebサイトを展開できます。 このエディタは、フロントエンドとバックエンドの両方のコードに対応しており、また、複数のファイルやディレクトリを扱うこともできます。 Glitchは、既存のプロジェクトを利用して即座にホストし、デプロイし、そして誰もが見ることができます。

A-Frameプロジェクトの Remix を押して (opens new window), index.htmlを編集してみてください。 変更内容が即座に反映されます Glitch上での A-frameの基本形が aframe.glitch.me にあります。 後ほどあなた独自のURLをつけることができます。 他にもA-frameのサンプルがあります。

# その他のコードエディタ

他のコードエディアでもA-Frameのスターターキットを公開しています。 どちらもリミックスやフォークをサポートしています。

# ローカルでの開発

以下のオプションで、ローカルサーバーにプロジェクトを展開することができます。 ローカルサーバーのオプションは以下の通りです。

  • HTMLと同じディレクトリにターミナルを用いて npm i -g five-server@latest && five-server --port=8000 を実行してください。
  • HTMLと同じディレクトリにターミナルを用いて python -m SimpleHTTPServer (or python -m http.server for Python 3)を実行してください

これで、プロジェクトはサーバー上に展開されています。(例, http://localhost:8000).

ドメインを含まないローカルディレクトリをそのまま開く(例, file:// )ことは試さないでください。 絶対URLおよび相対URLが機能しません。

# Git Hubからボイラープレートをダウンロードする

ボイラープレートはA-Frameを始めるための一式であり

  • 最新のA-Frameへのリンクを含んだHTML
  • 開発サーバーへのオプション
  • GitHub ページ (opens new window) を通じてプロジェクトを公開するためのワークフロー が含まれています。 ボイラープレートは次の2つの方法で入手することが可能です。

GitHubからフォークする
(注　この方法は現在継続していません。このボイラープレートに含まれるA-Frameのバージョンは0.5です)

ZipファイルのDownload

# ビルドにJavaScriptを組み込む

HTMLファイル上にA-Frameを組み込むには、以下のCDNビルドを<script> で読み込みます。

<head>
  <script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

自身のサーバー上に置きたいのであれば Production Version 1.2.0 最小化済みJSファイル Development Version 1.2.0 ソースマップ付きの圧縮化前ファイル

# npmでインストールする方法

npmを使ってインストールすることも可能です。

$ npm install aframe

この後、A-Frameをバンドルすることができます。例えばBrowserify や Webpack を使ってです。

require('aframe');

もしnpmを使っているのであればangle (opens new window)を使うことができます。これはA-Frame向けのコマンドラインインターフェースです。 angleを用いれば一行のコマンドでシーンを初期化できます。

npm install -g angle && angle initscene

# Cordova での展開

A-Frame は Cordova appsにも互換性があります。 現時点では、CDNからA-Frameと依存ファイルを読み込むために、ネットワークに繋がっていることが必要です。

Cordovaでの A-Frame デモ (opens new window)

# Cordovaでのインストール

cordova-plugin-xhr-local-file (opens new window) をインストールします。 Cordovaはfile:// から起動し、XHR はJSON フォント, 3D モデルなどのローカルアセットを読み込むため、このプラグインがないと失敗します。

cordova plugin add cordova-plugin-xhr-local-file

index.htmlの中身を以下のように調整してください。

<head>
  <meta
        http-equiv="Content-Security-Policy"
        content="
          default-src 
            'self' 
            data: 
            gap: 
            https://ssl.gstatic.com 
            'unsafe-eval' 
            https://cdn.aframe.io         <-- required
            https://dpdb.webvr.rocks      <-- required
            https://fonts.googleapis.com  <-- required
            https://cdn.jsdelivr.net      <-- your choice, see below
            ; 
          style-src 
            'self' 
            'unsafe-inline'
            ; 
          media-src *; 
          img-src 
            'self' 
            data:                         <-- required
            content:                      <-- required
            blob:                         <-- required
            ;
        "
      />
  ...
  <script2 src="https://cdn.jsdelivr.net/npm/aframe@1.2.0/dist/aframe-master.min.js"></script>
  <script2 id='my-scene' type="text/html">
    ...your scene goes here...
  </script>
  <script>
    document.addEventListener('deviceready', function() {
      // After the 'deviceready' event, Cordova is ready for you to render your A-Frame scene.
      document.getElementById('scene-root').innerHTML = document.getElementById('my-scene').innerHTML
    })
  </script>
</head>
<body>
  <div id='scene-root'></div>
  ...
</body>

# ディスカッション

# デバイスへの対応

ブラウザ環境とCordova環境の違いで重要なことは、Cordovaではシーンの描画イベントが開始する前に deviceready イベントが完了する必要があります。

以下のサンプルでは、DOM+JSでのアプローチを示しています。 もしくはReactのようなフレームワークを用いることも可能です。

document.addEventListener('deviceready', () => {
  ReactDOM.render(<Root />, document.getElementById('root'))
})

# レイアウト

ターゲットデバイスによっては、A-FrameのデフォルトCSSがいくつかのUIコンポーネントを画面外やスクリーンの際に配置してしまいます。 別でcssを作成し、上書きをしてください。

← VR ヘッドセット & WebVR ブラウザ →

TABLE OF CONTENTS
公式ドキュメント