openFrameworks v0.9.0 をブラウザで動かしてみる
どうもこんにちは。
久々のブログ投稿です。今日はoFネタです。
先日(2015年 11月8日)、openFrameworks v0.9.0 が無事正式リリースになりました！
で、リリース文を読んでみたら、気になる１文が載ってるではありませんか。
Emscripten きたなー。ついにoFもブラウザで動く時代か、、、 https://t.co/Q17V47tYOO
— poipoi (@peeping_poipoi) 2015, 11月 9oF が正式に Emscripten 対応になったのです！なのでWEB上で動くのです！！
Emscripten とは？
Emscripten とは、LLVM -> JavaScript 変換ができるアツいヤローです。なので、C++ -> LLVM -> JavaScript みたいな感じで、C++ で書かれたコードを JS コードに変換できちゃいます。
C++ -> JS の変換が出来て何が嬉しいの？と思う方もいるかもしれませんが、これまでのゲーム系などのC/C++で書かれたコード資産をそのままWebに流用出来たり、asm.js に変換して高速な実行ができたりなんて利点があるらしいです。（詳しくは知らない。）
で、C++ -> JS 変換ということはですよ。 まさに oF をブラウザ上で動かすことができるようになるのですよ！
試してみた
と、いうことで、物は試しとばかりに早速やってみました。 詳しいやり方はこちらの Setup guide に載っているので、皆様ご自分の環境に合わせてトライしてみましょう！
http://openframeworks.cc/download/
ちなみに私は Mac 環境だったので、Mac に入れてみた流れをなんとなく書いていきたいと思います。
また、私がつまずいたポイントも備忘録的に記しておこうと思います。
まずは Emscripten を入れる！
なにはともあれ、まずは Emscripten を入れなければなりません。
Emscriptenの公式ページは以下になります。
http://kripken.github.io/emscripten-site/index.html
Emscripte を入れるための環境を作る。
まずは Emscripten を入れる前に、Emscripten を入れるための環境づくりが必要です。
こちらのページに Emscripten を入れるために必要なモノが書いてあるのでセコセコとインストールします。
もともとWeb系の方であれば、上記の環境もすでにいろいろとインストール済みかもしれません。 自分の環境にすでに上記が入っているかどうかは、以下のように確認ができるようです。
つまずきポイント１：cmake の Command LIne 版のインストールについて
cmake のインストールパッケージをそのまま入れると、GUI版のcmakeが入ります。 ただ、そのままだと Command Line 上から使えないため、Emscripten のインストールでエラーが出てしまいます。
Command Line 版の cmake を入れるには
- GUI版 cmake を起動する
- [Tool] → [How to Install For Command Line Use] を選択
- ポップアップで出てきた指示にしたがう。
という手順で行えます。私の場合は一番上の直接パスを通す方法を使いました。
つまずきポイント２：El Capitan での/usr/bin以下の書き換え
python2 に関しては以下のようにしろと Emscripten のページに書いてあります。
cd /usr/bin sudo ln python python2 sudo ln ../../System/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7 python22.7
ですが、El Capitan だと Rootless というセキュリティ機能が入っているらしく、そのままでは上記コマンドがエラーになってしまいます。
対処法としては以下を参考にしました
http://applech2.com/archives/46435268.html
Emscripten のインストール
必要な環境を構築できたら、Emscripten 自体をダウンロード＆インストール！
詳細はこちらに載っているので参照のこと。
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
まずはパッケージをダウンロード＆解凍し、適当なディレクトリに置きます。
そしてそのディレクトリ内で以下のコマンドを叩きます。
# Fetch the latest registry of available tools. ./emsdk update # Download and install the latest SDK tools. ./emsdk install latest # Make the "latest" SDK "active" ./emsdk activate latest
# Set the current Emscripten path on Linux/Mac OS X source ./emsdk_env.sh
これでアクティブにしたEmscriptenにパスが通るらしいです。
インストールは結構時間がかかったので気長に待つといいと思います。
つまずきポイント３：Emscripten のバージョン
実は上述の ./emsdk install latest だと私の場合下記のようなエラーが発生してしまいました。
Command '['make', '-j3']' returned non-zero exit status 2 Installation failed!
私が実行した時の最新バージョンが 1.35.7 だったのですが、どうもこれが不安定だったようです。
下記に示す様に 1.35.0 を入れるようにしたらうまくいきました。
./emsdk update sdk-tag-1.35.0-64bit ./emsdk install sdk-tag-1.35.0-64bit ./emsdk activate sdk-tag-1.35.0-64bit
パスを通す
最後に Emscripten のもろもろのバイナリがあるディレクトリにパスを通します。
ディレクトリは以下になりますので、忘れずに通してください。
(Emscriptenディレクトリ)/emscripten/(Emscripten のバージョン番号)/
oF を Emscripten でビルドする
さて、ようやく Emscripten インストール出来たので、次は oF のソースを Emscripten でビルドしてみたいと思います。
やり方は以下のとおり。
http://openframeworks.cc/setup/emscripten/
まずはビルドしたいプロジェクトのディレクトリに移動し、以下のコマンドを叩きます
emmake make
しばらくするとビルドが完了するので、そのまま動作チェックしたい場合は
emrun --browser chrome bin/(プロジェクト名).html
と実行すると Chrome が立ち上がってブラウザ上で動いているのが確認できます。
また、サーバーにアップしたい場合は、bin/ 以下のファイルをすべてアップロードすれば良い模様です。
取り急ぎ examples/3d/eDPrimitivesExample をビルドしてみた結果、以下のようになりました！
https://www.googledrive.com/host/0B0kSi87phV3Ia015ejhHNlEwRGM/3DPrimitivesExample.html
おまけ
ちなみに、作ったoFのページを公開するのには、Google Drive を使った以下の方法を参考にしました。 http://ninagreen.hatenablog.com/entry/2015/09/14/030704
簡単にWEBページを公開できてお手軽です！
それでは、またそのうち。
