A-FRAMEを使ってみた(2)タグ編

A-FRAMEのドキュメントを見ていて、サンプルなどに出てくるタグが見当たらないことがあったのでまとめてみました。ドキュメントは機能や要素毎にまとめられているので、タグから引けないので。

A-FRAME タグ一覧(version 0.2.0 版)

タグ名 ドキュメント 備考
<a-scene> Scene A-FRAMEの global root object。canvasもここに含まれる。
<a-entity> Entity オブジェクトの位置、回転、およびスケールのなどを定義するタグ。
<a-animation> Animations アニメーションを定義するためのタグ
<a-assets> Asset Management System プリロード要素を定義するためのタグ
<a-mixin> Mixins <a-assets>内に定義する、再利用可能なコンポーネント属性を定義するタグ
<a-asset-item> Asset Management System <a-assets>内に定義する3D用のファイル(.dae,.mtl,obj)。
<audio> Asset Management System <a-assets>内に定義する音声ファイル。
<img> Asset Management System <a-assets>内に定義する画像ファイル。
<video> Asset Management System <a-assets>内に定義するビデオファイル。
<a-box> <a-box> 箱状オブジェクト。ver 0.1.0までは、<a-cube>
<a-camera> <a-camera> カメラオブジェクト
<a-collada-model> <a-collada-model> 3D COLLADA オブジェクト(.dae)
<a-cone> <a-cone> 円錐オブジェクト
<a-cursor> <a-cursor> カーソルポインタ
<a-curvedimage> <a-curvedimage> 湾曲した板状オブジェクト
<a-cylinder> <a-cylinder> 円柱オブジェクト
<a-image> <a-image> <a-plane>に画像を適用したオブジェクト
<a-light> <a-light> 照明オブジェクト
<a-obj-model> <a-obj-model> 3Dオブジェクト。.obj、.mtlを指定可能。
<a-plane> <a-plane> 板状オブジェクト
<a-ring> <a-ring> 板状のリングオブジェクト。radius-inner=”0″ (内径=”0″)で円盤状になる。
<a-sky> <a-sky> シーンの背景
<a-sphere> <a-sphere> 球体オブジェクト
<a-torus> <a-torus> 円管形状オブジェクト(arc=360 でドーナツ状)
<a-video> <a-video> <a-plane>にビデオを適用したオブジェクト
<a-videosphere> <a-videosphere> シーンの背景に動画を適用したオブジェクト

上記の説明は、執筆時点でのA-FRAME version 0.2.0 を前提としています。

不備、誤りなどありましたらご指摘下さい。

A-FRAMEを使ってみた(1)360°画像編

Playstation VRの予約が始まったり、諸々盛り上がりを見せつつあるようにみえるVR界隈。興味はあるけど、Oculus Riftもその開発にPC用意するとか考えると結構なお値段だし、基本静観してたのですが、HTMLベースのVR用のフレームワークである「A-FRAME」の記事をみつけたので、試してみました。

「A-Frame」でVR開発入門!HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験 – paiza開発日誌

まずは上の記事を参考に、360°パノラマ画像のVRを作ってみました。

1.特別な機材なしで360°パノラマ画像を作る。

通常、360°パノラマ画像を作るにはRICOH THETAなどの対応カメラが必要ですが、iOS/Android用のGoogle ストリートビューアプリで作成が可能です。使い方は、上の参考リンクに詳しいのでをそちらを参照のこと。

複数の画像をつないで全天球型の画像を作成するので、撮影回数が多くなるのが難点ですが、特別な投資なしで作れるのでテストとしては十分だと思います。ちなみにこんな感じの画像が生成されます。

ストリートビューアプリで作成した360°画像。なるべく被写体(人や物)が近くにない方が繋ぎがうまくいく(ズレが目立たない)ようです。
ストリートビューアプリで作成した360°画像。なるべく被写体(人や物)が近くにない方が繋ぎがうまくいく(ズレが目立たない)ようです。

2.HTMLを書く

VRコンテンツとして表示するために、HTMLを書きます。A-FRAMEは基本的にはタグベースなので、A-FRAMEのjsライブラリを読み込んで、必要なタグを書くだけです。以下、サンプルのHTML全文です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>神保町の路地 | A-Frame</title>
    <meta name="description" content="神保町の路地 | A-Frame">
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-sky src="img/IMG_2277.jpg"></a-sky>
        <a-camera wasd-controls-enabled="true"></a-camera>
    </a-scene>
  </body>
</html>

<a-scene>は、canvasタグに相当します。その中に要素を定義していきます。
<a-sky>は、VR空間の背景です。VR空間が大きな球体として定義されていて、その内側にカメラがあるイメージです。その球体の内側に色や360°パノラマ画像を指定することで背景として表示されます。
<a-camera>は、カメラです。スマホだと端末の傾き、PCならマウスのドラッグ方向で、このカメラの向きが変わります。

※<a-camera>が省略された場合は、デフォルトのカメラが設置されるので、このタグがなくても表示されます。

iPhoneで見た様子。右下のメガネアイコンをタップするとWebVRモードで表示されます。
iPhoneで見た様子。右下のメガネアイコンをタップするとWebVRモードで表示されます。
WebVRモードで表示した様子。PCブラウザなどWebVRがサポートされていない場合は切り替えできない。
WebVRモードで表示した様子。PCブラウザなどWebVRがサポートされていない場合は切り替えできない。

実際のサンプルは、下のリンクからどうぞ。

神保町の路地 | A-Frame

さくらのレンタルサーバでモリサワフォントを使ってみた

さくらのレンタルサーバでモリサワのWebフォントが使えるようになるというプレスリリースを見て、ググってみたらもう使えるようなので試してみました。

モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現

インストール手順は、さくらのサポートページにありました。
Webフォントプラグイン機能|さくらインターネット公式サポートサイト

私の場合は、WordPressを導入済みなので、「設定手順(追加インストール)」で行いました。以下、気づいた点をメモしておきます。

1.選べるドメインは1つだけ。独自ドメインとそのサブドメインの両方には使えない。

選べるドメインは1つだけとい制限自体はサポートサイトに書いてあるのですが、サブドメインも別ドメインとなるため、例えば下の例だと「c-geru.com」「app.c-geru.com」の両方で使うことは出来ないということです。

独自ドメインとそのサブドメインは別ドメイン扱いとなるため、両方同時にはWebフォントを適用できない。
独自ドメインとそのサブドメインは別ドメイン扱いとなるため、両方同時にはWebフォントを適用できない。
2.プラグインのバージョン

サポートサイトのキャプチャのバージョンは 0.9.0でしたが、インストールされたバージョンは 1.0.1 になっていました。

ブログ執筆時点のプラグインのバージョンは、1.0.1。
ブログ執筆時点のプラグインのバージョンは、1.0.1。
3.フォントの指定は4つのカテゴリ単位

フォントの指定は、見出し、リード、本文、強調(太字)の4つにタグをカテゴライズして行うようになっていて、同時に使用可能なWebフォントは4つまでになります。

TypeSquare Webfonts画面にあるフォント設定クラスの指定。
TypeSquare Webfonts画面にあるフォント設定クラスの指定。

またこの設定は、TypeSquare Webfontsのプラグイン画面にあるため、フォントテーマ毎に変更することができません。見出し、リード、本文、強調(太字)の4つにカテゴライズされるタグは、デフォルトを含む全てのテーマで同じになります。

フォントテーマ設定画面で指定できるのは、各カテゴリに対する適用フォントのみ。
フォントテーマ設定画面で指定できるのは、各カテゴリに対する適用フォントのみ。

※フォントテーマの適用、使用の有無は投稿単位で行えます。

今回は取りあえずのテストだったので、この投稿では用意されているテーマからポップ ( 見出し:新丸ゴ 太ライン / リード:はるひ学園 / 本文:じゅん 201 / 太字:じゅん 501 )を選んでみました。

プラグインのインストールと設定はカンタンなので、さくらのレンタルサーバを使っている方は試してみてください。

8つのテーマがデフォルトで用意されています。
8つのテーマがデフォルトで用意されています。

【追記 2016.7.1】
投稿ページを見ると、フォントテーマがサイドバーにも適用されてしまっています。TOPページではサイドバーには影響しません。これ、ページ毎に設定を持っているんだとしたら、ちょっと微妙ですね。。。

左:TOPページ。右:投稿ページ。
左:TOPページ。右:投稿ページ。