Introduction
# はじめに
A-Frameは何もインストールすることなくプレーンなHTMLファイル上に開発をすることができます。
A-Frameの概要を知るためのもっともよい方法は Glitchでサンプルをリミックスしてみることです (opens new window)
Glitchはオンラインコードエディターで簡単に自分の領域を作ることができ、ファイルを展開することができ、しかも無料です。
もしくは自由に.htmlファイルを作成し、<head>内にA-Frameを組み込みます。
<html>
<head>
<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
インストールページ Installation ではA-Frameを始めるための様々なオプションを提供しています。 A-Frameを学ぶために、 A-Frame School (opens new window)を覗いて、ステップバイステップで学習を完了させましょう。
# A-Frameとは何か?
:A:-Frame は様々なバーチャルリアリティコンテンツを作成するためのWebテクノロジーベースのフレームワークです。 A-FrameはHTMLの中に構築されるため、始めるのが容易です。しかしA-Frameはただ3Dの空間を書いたりするだけのマークアップ言語ではありません。 A-Frameの中核は、エンティティを組み合わせて用い、宣言的に扱え、拡張可能であり、three.js (opens new window)に組み込むことのできる構造を持ったパワフルなフレームワークであることです。
A-FrameはMozillaコミュニティの中で発案され、現在はA-Frameの共同制作者であるSupermedium (opens new window)の中の人によって更新されています。 A-FrameはVRコンテンツを簡単にかつ強力に制作するために開発されました。independent open source project (opens new window)のようにです。A-Frameは今や世界最大級のVRコミュニティ (opens new window)の一つになっています。
A-FrameはVive,Rift,Windows Mixed Reality,Daydream, GearVR, Cardboard, Oculus Goといった主要なVRヘッドセットのほとんどに対応しており、ARにすら対応しています。 A-frameは多方面に対応しながらも、360度のコンテンツの更に先のVR体験を作り出そうとしています。それは位置トラッキングやコントローラーを最大限に活用することによって実現される予定です。
# 特徴
👓 シンプルにVRを作ろう: HTMLの中に <script> タグを書き <a-scene>を配置してください。
A-Frameは3Dを動かすためのボイラープレート（基本セット一式）、VRの準備、デフォルトの操作方法、をセットアップします。
何もインストールする必要はありませんし、ビルドを行う必要もありません。
❤️ 宣言的なHTML: HTMLはとても読みやすいマークアップ言語です。A-Frameは誰もが利用できます。Webの開発者、VRのファン、アーティスト、デザイナー、教育関係者、制作者、そして子供でさえも。
🔌 エンティティ-コンポーネント構造: A-Frameはとてもパワフルなthree.js (opens new window)ベースのフレームワークです。 宣言的で、構築しやすく、再利用できるentity-component structureという仕組みを採用しています。 HTMLは、その大きな氷山の水面から突き出た部分となります。開発者はJavaScriptや、 DOM APIs、 three.js、 WebVR、 そして WebGLへ制約なしにアクセスすることが可能です。
🌐 クロスプラットフォーム VR: ViveやRift、 Windows Mixed Reality、 Daydream、 GearVR、 Cardboardなど代表的なコントローラーをサポートするVRアプリケーションを作りましょう。 ヘッドセットやコントローラーをお持ちではないですか？問題ありません！A-FrameはPCやスマートフォンでも動作します。
⚡️ パフォーマンス: A-Frame はWebVR用に一から最適化されています。 A-frameがDOMにアクセスしている時に、そのエレメントはブラウザのレイアウトエンジンにアクセスすることはありません。 3Dオブジェクトの描画更新はすべてメモリ上で行われ、余剰処理や無効データの産出ほとんどありません。最も インタラクティブで大規模なWebVRアプリケーションは、A-Frameで作られ、90fpsで滑らかに動作しています。
🔍 ビジュアルインスペクター: A-Frameは手軽に ビジュアルインスペクターを利用できます. A-Frameのシーンの上で <ctrl> + <alt> + iを押します。
さあフードの中を覗いてみましょう！
🏃 コンポーネンツ: 幾何学、マテリアル、照明、アニメーション、モデリング、レイキャスター、シャドー、位置に応じて変化する音声、テキスト、 主要なヘッドセットに対応したコントローラーといったA-Frameのコア・コンポーネントを使いこなしましょう。 そしてそれ以上の多様なコンポーネントを、例えばenvironment (opens new window)、 state (opens new window)、 particle systems (opens new window)、 physics (opens new window)、 multiuser (opens new window)、 oceans (opens new window)、 teleportation (opens new window)、 super hands (opens new window)、augmented reality (opens new window)といったコンポーネントをも利用することができます。
🌎 お墨付き そして拡張可能: A-Frame はGoogle、Disney、 Samsung、 Toyota、 Ford、 Chevrolet、 Amnesty International、 CERN、 NPR、 Al Jazeera、 The Washington Post、 NASAで使われた実績があり、Google、 Microsoft、 Oculus、Samsungについては A-Frame の開発に協力してくれさえいます。
# さあはじめましょう!
もしA-Frameが初めてなのであれば、ここから取り組むのが成功の秘訣です。
ニュースレターに登録 (opens new window) して、アップデートや様々なTipsについて学び、そしてコミュニティの特集プロジェクトに目を通しましょう。
概要を把握するためにドキュメントを最初から読み通しましょう。 Glitch (opens new window) はサンプルを試すのにオススメです。
Discord (opens new window) や Slack (opens new window) を追加し、質問をしてみてください。また StackOverflow (opens new window),で質問をしたり回答を探すのも一つの方法です。誰かの力を借りましょう。
もし何かを作ったのなら、オンラインに共有してください。私達がnewsletter (opens new window)やblog (opens new window)で取り上げることができます。
Java Scriptやthree.js (opens new window)を深く知っていることはA-Frameの役に立つはずです。それでは楽しんで！
インストール →