読者です 読者をやめる 読者になる 読者になる

roman-tech

テクノロジーはロマンだ。

超お手軽VR開発フレームワーク A-FRAME入門:番外編第2回 開発環境設定 ローカルサーバを立てよう

a-frame vr

これまで数回に渡ってA-FRAMEを使ったVR開発を行ってきました。しかし、リソース(画像ファイル、音楽ファイルなど)読み込む必要があるプログラムはローカル環境では動作させることができません。基本的にはなんらかのレンタルサーバを借りてそこにアップロードして動作を確認する必要があります。
しかし、レンタルサーバを借りるのもタダでは無いため、ローカル環境上でデバッグ/動作確認できるように簡単にローカルサーバを立てる方法を紹介します。
というかこの方法を最初に解説すべきだったような。。。

では以下に手順を記載します。

目的

  • 自分のPC上にローカルサーバを立て、ローカル環境上でA-FRAMEの動作確認を行う

本記事で学べること

  • ローカルサーバの立て方

ローカル環境の問題点

ここでは第一回目で使ったthetaの画像を読み込んでVR表示するプログラムを例に説明します。
ソースは以下です。

[index.html]
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sample2 theta</title>
    <script src="../lib/aframe.js"></script>
</head>
    <a-scene>
        <a-sky src="img.jpg" rotation="0 -90 0"></a-sky>
    </a-scene>
</body>
</html>

ソース中で使用しているimg.jpgは以下です。

f:id:roman-tech:20160626225356j:plain:w400

普通にindex.htmlをブラウザで表示してください。おそらく真っ白な画面が表示されると思います。これはローカル環境ではリソースを読み込め無いという制限により画像のロードに失敗しているためです。これの問題を解決します。僕はMac使いであるため、主にMacについて解説します。

Mac

【手順1】
Macには元々ローカルサーバを立てる機能が備わっています。まずはメニューからターミナルを立ち上げましょう。

f:id:roman-tech:20160713234829j:plain:w300

【手順2】
ここからはコマンドライン上での操作です。この時点でUNIX系のOSに慣れてい無い人は拒否反応が出てくるかもしれませんが、とっても簡単なのでこの機会にチャレンジしてみましょう!
index.htmlを格納しているフォルダまで「cd」コマンドで移動します。cdコマンドについては解説しませんが、ググればたくさん情報が出てくるため問題は無いでしょう。そして上記フォルダまで辿りついたら以下コマンドを実行します。

python -m SimpleHTTPServer 8888
f:id:roman-tech:20160713235612j:plain:w300

そして以下のようにブラウザのアドレスバーに入力しましょう。
sample2-theta_imageの箇所は移動したフォルダ名に置き換えてください。

http://localhost:8888/sample2-theta_image/index.html
f:id:roman-tech:20160714000036j:plain:w400

無事画像が表示されました!
超簡単ですね!!

Windows

僕はWindowsユーザでは無いため詳細は他のサイトを参考にしてみてください。
Windows ローカルサーバ」などでググるとたくさんやり方が出てきます。みた感じだと以下のサイトがお手軽で良さそうです。

zipダウンロードだけでローカルサーバーを作る方法 | 株式会社パーソンリンク

まとめ

本日はローカル環境上でA-FRAMEを使った動作確認環境の構築を行いました。これで今までサーバを持っていなかった人も開発ができますし、デバッグ効率も100倍です。ぜひお試しください!


では!

以下VR開発にオススメです!

© 2016 Tsukasa Horinouchi