Chromeでクロスオリジン問題を仮想環境で解決する

f:id:peroon:20130813231755j:plain

最近、three.jsでポリゴンにテクスチャを貼ったり
timbre.jsで音を鳴らしたりしている。

しかし、Chromeではクロスオリジンの関係でファイルが読めない。
Chromeの起動オプションで回避できるが、一時しのぎに思える。
Firefoxで確認すればよいが、Firefoxではmp3が鳴らなかったり、webglが遅かったりする。
(mp3をwavにすれば鳴らせるが、ファイルサイズが10倍だったりする・・)
やっぱりChromeで動作確認したい!

そこで仮想環境です!
virturlbox, vagrantで作りましょう。
方法は以下の通りです。
virtualbox, vagrantをインストールする

//virtualboxで起動するOSのbox URLを
//http://www.vagrantbox.es/ から取得
//CentOS 6.4 x86_64 Minimal (VirtualBox Guest Additions 4.2.12, Chef 11.4.4, Puppet 3.1.1)
//terminalから、URLを指定してboxを追加する
$vagrant box add centos64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box
//10分くらい待つ

//入ったことを確認
$vagrant box list

//vagrantを起動するためのディレクトリ作成
$mkdir centos64
$cd centos64
$vagrant init centos64
$vagrant up
//1分くらい待つと仮想環境の起動が完了する

//ログインする
$vagrant ssh

//仮想内にて
//apacheのインストールと設定
$sudo yum -y install httpd
$sudo service httpd start
$sudo chkconfig httpd on
$sudo service iptables stop
$sudo chkconfig iptables off

//HTMLページ作成
$cd /var/www/html
$sudo vi index.html

//ブラウザからIP address指定で見れるようにする
//仮想からMacに戻る
$exit

//Macにて
$vi Vagrantfile
config.vm.network :private_network, ip: "192.168.33.10" のコメントを解除する
$vagrant reload
//1分くらい待つ
//ブラウザで192.168.33.10にアクセスするとindexファイルが表示される

//ドキュメントルートの変更
//(vagrant upしたところをルートにする)
$vagrant ssh
$sudo rm -rf /var/www/html
$sudo ln -fs /vagrant /var/www/html

//mac側のVagrantfileと同じ位置にindex.htmlを作る
$exit (仮想から出る)
$vi index.html (Mac側でファイルを作る)
//ブラウザで192.168.33.10にアクセスするとindexファイルが表示される