開発が容易に？ARライブラリの「AR.js」を使用してCodePen上で動かしてみた
Learning Three.js（スリージェイエス）の創業者である@アレクサンドラ・エティエンヌは2017年3月に、米国VRメディアの「UPLoadVR（アップロードブイアール）」にて、「AR.js」の詳細を公表しました。
「AR.js」とは2017年2月にアレクサンドラ氏とJavascript（ジャバスクリプト）開発者の@ジェローム・エティエンヌ氏が、共同で開発したARアプリケーションを容易に製作するためのARライブラリです。
「AR.js」はGitHub（ギット・ハブ）上に公開されており、オープンソースでインストール不要、軽量かつ高速に動作して面倒な環境構築の手間が省けられることが特徴です。そのため誰でも気軽にAR体験ができたり、javascriptの基礎や応用を知っている人は、オリジナルアプリを開発することができます。
今回はjavascriptライブラリの「AR.js」を実際に使用してコード変更を実施。HTML、CSS、JSのコードを公開共有できるサイトのCodePen（コードペン）に誰でも閲覧できるという形で公開しました。本記事では「AR.js」の体験、使い方、実際のCodePenでの利用方法、ソースコードの変更手順を掲載いたします。
動作環境は、以下の通りです。
- PC：Windows10 home edition
- マーカー表示用端末：iPhone SE
- ARアプリ利用端末：PC及びUPQ phone
- ブラウザ：Google Chrome
- Webカメラ：VAIO 13.3型ノートPC内臓カメラ
ARライブラリの「AR.js」を使ってみよう！
以下の2通りの3つのプロセスで、ARライブラリの「AR.js」の体験ができます。
- "Hiro"と記された画像ファイルをスマホブラウザで開く
- 「AR.js」が組み込まれているWebページを、カメラ付きのパソコンで開き、カメラへのアクセスを許可する
- 特定の画像を、2で表示されたカメラで映す
または、
- "Hiro"と記された画像ファイルをパソコンブラウザで開く
- 「AR.js」が組み込まれているWebページを、カメラ付きのスマホで開く
- 指定の画像を、2で表示されたカメラで映す
オブジェクトを表示させるには、スマホやパソコンのどちらでも可能です。
iPhone SEのスマホブラウザに表示された画像上に、3D表示されているヒモのような物体と、それを立方体が囲んでいるオブジェクトが紫色と緑色で透過しているように表示されました。
プログラムを通しての画像撮影となるため、解像度がやや粗いです。上記の写真は"Hiro"と描かれた画像がARで表示するための場所になっていますね。マーカー画像をプログラムで検知し、オブジェクトをパソコンの画面を通じて、スマホの"Hiro"と記された上に表示させています。
AndoroidとWindows端末は動作確認が完了、iOSは未対応
2017年3月現在のARライブラリの「AR.js」はAndroid（アンドロイド）端末とWindows Mobile（ウィンドウズモバイル）は動作の確認がとれていますが、iOS（アイオーエス）には対応していません。アップル社も、AR技術への対応を進めているようなので、いずれ使えるようになるかと思います。
2015年12月に発売されたアンドロイド端末のUPQ phoneで動作を確認したところ、端末上にオブジェクトがきちんと表示されました。
複数のマーカーは認識せず
紙に印刷した画像にスマホをかざしても、正確に動作します。複数のマーカーを印刷した用紙をテーブルに置き、スマホのカメラを介してAR表示されるのか実験を行いましたが、1度に1枚のマークにしか認識せず、2枚目や3枚目のマーカーでは光がちらついたAR画像が出現しました。
ARライブラリである「AR.js」は、同時に複数のマーカーに対応してARを表示することはできません。
CodePenでARライブラリの「AR.js」を動かす4つの手順
CodePenの環境でARライブラリの「AR.js」が動作するまでの4つの過程をご紹介します。実装できればCodePenで公開したページのような状態に。
注意点として、説明する手順を実践するためには、「cloud9」のようなクラウドサーバーかまたは、レンタルサーバーを利用する必要があります。
今回は2017年に創業20周年を迎えた国内最大級のサーバーサービス、さくらのレンタルサーバーを借りて、http://tiratiraeng.sakura.ne.jpのサブドメインを取得しました。本サービスは、2週間無料でサーバーが借りられるキャンペーンを実施しているのでオススメです。
進め方は、以下4つの手順です。
- CodePenにて「AR.js」を動かすための外部ライブラリを読み込む
- HTTPSでの読み込みに対応させる
- .datと.hiroの読み込みとソースコードの修正を行う
- サーバーに必要なデータをアップロードする
１．CodePenにて「AR.js」を動かすための外部ライブラリを読み込む
CodePenのファイルを開いてみましょう。
「JS」と書いてあるところのすぐ左の歯車のマークをクリックすると、設定画面を開きます。外部ファイルとして読み込まれるようにURLを指定しました。
以下の画面が、表示されていればOKです。
注：stats.min.jsのバージョンについて
stats.jsはブラウザの画面にFPS（Frames Per Second/フレーム毎秒。動画の絵が一秒間に何回書き換えされているかを示す数字）を表示するためのライブラリです。
JSソースコード内の138行目は、
document.body.appendChild( stats.domElement );
上記のようなプログラムを書いて更新しないと、エラーになってしまいます。
２．HTTPSでの読み込みに対応させる
セキュリティの関係から、「AR.js」のスクリプトはHTTPではなく、HTTPSでなければ動作しません。CodePenにアクセスすると、
http://codepen.io/tira/pen/gmxLWMといったように冒頭の文字列がhttpになっていますが、最初のプロトコルをhttpからhttpsにして、https://codepen.io/tira/pen/gmxLWMという形にしなければなりません。
CodePenはHTTPSに対応しているようなので、単にsを加えるだけでも動いてくれます。
３．.datと.hiroの読み込みとソースコードの修正を行う
「AR.js」は、スクリプトファイル以外にも外部ファイルを使います。CodePenのJS欄のサンプルだと76行目と105行目で、以下の記述がされていました。
76行目（修正前）：
cameraParametersUrl: '../../data/data/camera_para.dat',
105行目（修正前）：
patternUrl : '../../data/data/patt.hiro'
修正後のソースコードは、
76行目（修正後）：
cameraParametersUrl: 'https://tiratiraeng.sakura.ne.jp/arjs_files/file.php?f=cp',
105行目（修正後）：
patternUrl : 'https://tiratiraeng.sakura.ne.jp/arjs_files/file.php?f=pt'
となります。
上記のソースコードは外部ファイルで、スクリプトを処理する中で、指定されたファイルを読み込んで使用。ただし、.jsファイルと違って、「AR.js」のサンプルのファイルを拝借することはできません。というのは、「AR.js」のファイル読み込みにAjaxという技術を使っているからです。
修正したソースコードをこのまま使おうとしてもセキュリティ制限で、外部ドメインのファイルを使うことができません。
（codepen.io上で外部ドメインに該当する、GitHubのファイルを使おうとしているので）
.jsファイルはCodePenの安全保障制限の対象外なので、GitHubにあるファイルを拝借できますが、AR.js camera_para.datとpatt.hiroについては対象外となるため、対策が必要です。自分のサーバーにデータを持ってきて、そこから読み込ませる必要があります。
４．サーバーに必要なデータをアップロードする
元となるファイルのAR.js camera para.datとpatt.hiroダウンロードして自分のパソコン上におきましょう。次に、上記のファイルを自分のサーバーへアップロードする際に必要な条件が2つあります。
- HTTPSが使えるサーバーであること
CodePenのURLと同じで、camera_para.datとpatt.hiroファイルにアクセスするときもHTTPSでなければなりません。さくらのレンタルサーバーで【共有SSL】の設定をします。 - CORS対応ができること
外部ドメインへのアクセスは原則できませんが、サーバー側で特別な処理をしてくれると、接続が可能。具体的には、camera_para.datとpatt.hiroのファイルをリクエストした際、サーバー側でHTTPレスポンスヘッダに「Access-Control-Allow-Origin: *」を加えます。
CORS対策をすると、外部ドメインのファイルであってもAjaxで使えるようになります。もしも、サーバー側で.htaccessが使えるなら、.htaccessで出力するのが早いです。
HTTPSを使えるサーバーを利用しCORS対応の設定を行い、サーバーにファイルを置いたらサーバーに配置したファイルのURLを、CodePen上のサンプル76行目と105行目に指定する、という流れです。
【補足】
さくらのレンタルサーバーにて、設定する場合の作業を記載しておきます。
--------------------
【実践した5つの作業】
- コントロールパネルから共有SSLをONに変更（HTTPSを使えるようにするため）
- 専用フォルダの作成 => /www/arjs_files
- ファイルのアップロード（camera_para.dat・patt.hiro）
- PHPの作成・アップロード
- スクリプトの書き換え（76行目と105行目を新しいURLに変更）
4. のPHPの中身：
<?php
// CORSを実行
header("Access-Control-Allow-Origin: *");
//1つのPHPでまとめて処理するため、ファイル一覧を作成
$files = array(
"cp" => "camera_para.dat",
"pt" => "patt.hiro"
);
//GETのパラメータに応じてファイルを読み込み、ブラウザに送信
$f = file_get_contents($files[$_GET["f"]]);
print $f;
--------------------
上記の実施した5つの作業を参考にして実装をすれば、CodePen上でARアプリを動かすことができます。
ARライブラリの「AR.js」で遊んでみた！
最後に、CodePen上でARライブラリの「AR.js」を利用したソースコードを変更してみました。描画されるオブジェクトは、
//add an object in the scene
のところで定義されているので、ここを書き換える形になります。
コードの前半は、3Dで生成された物体のキューブ、後半で立方体の中のオブジェクトを定義しているので、中の物体の定義を地球に書き換えて、完成したソースコードをCodepenに掲載。
スマホの画面に表示されている"Hiro"マーカーをWEBカメラにかざすと、端末の画面上に地球のオブジェクトが表示されました。実機で動かすと、適切に地球がデバイス上で回っているのがわかりますね。
地球の画像と作り方は、「Learning Three.js」を参考に作成してみました。
まとめ
今回はARアプリを簡単に作ることができるARライブラリである「AR.js」を使って、CodePen上でjavascriptライブラリを利用し、簡単なソースコードの変更を実施。javascriptとphpの知識があるだけで、容易にAR体験ができることがわかりました。
ARライブラリの利用自体は簡単ですが、CodePenでのセキュリティ対策を解消することが少し厄介でしたね。
CodePen上で「AR.js」の動作を公開するためにレンタルサーバーを借りる必要がありましたが、自分のパソコン上のimgフォルダやスマホなどに"Hiro"画像を保存しておいて、それを読み込む形式にすればサーバーをレンタルする必要はないです。複数の用紙での読み込みはできませんが、1枚ならしっかりとオブジェクトが表示されます。もちろん、ウェブサイトを公開するためには、サーバーを設定するのは必須です。
従来ではパソコン上でオリジナルアプリを作成するには、開発環境の構築からはじまり、ツールのインストールなど多岐にわたって設定する必要がありました。ですが、オープンソースではインストール不要、軽量かつ高速に動作する「AR.js」を活用した場合は、環境構築のセッティングの手間が省け、気軽に開発が始められますね。
自分のオリジナルARアプリを、作ってみてはいかがでしょうか。
追記
アレクサンドラ氏は2017年4月6日に、動画共有サイトのYoutubeで「Augmented Reality in 10 lines of HTML（10行のHTMLで拡張された現実）」を公開しました。シンプルな形のソースコードがCodePenにて提供されているので、javascript初心者はこちらも参考にしてみてください。
なお、今回の記事のようにレンタルサーバーの環境に画像をおく方が保守性という点では良いですが、ビギナーの人や手始めに「AR.js」を使って遊んでみるのであれば、以下の動画の方法がわかりやすくてオススメです。