C++のコードをブラウザ実行可能なJavaScriptに変換するEmscripten導入メモ

f:id:nukesaq88:20130402230414j:plain

C/C++などllvm/clangでコンパイル可能なコードをブラウザで実行可能なJavaScriptに変換してくれるコンパイラツールであるEmscriptenの導入を行った際のメモです。

環境はOS X 10.8 Mountain LionのMacBook Air (11-inch and 13-inch, Mid 2011)です。

Emscripten本体以外の依存パッケージはすべてHomebrewからインストールしました。
Homebrewの導入がまだの人は下のサイトなどを参考にしてHomebrewとgitをインストールしましょう。
Mac/OS X/Homebrew - PukiWiki
MacPortsより使いやすい！？パッケージ管理システムHomebrewの使い方 | Macとかの雑記帳

Emscripten本体とその他依存パッケージのインストール

まずはEmscripten本体のインストール

EmscriptenはGitHubにホスティングされているためgitコマンドで簡単にインストールできます。
とりあえずインストールしたいディレクトリに移動し以下のコマンドでダウンロードしましょう。

git clone git://github.com/kripken/emscripten.git

またEmscriptenはすべてスクリプトで構成されているようなので、特になにもビルドする必要はありません。
なので直接ここから手動でダウンロードしてきても問題ありません。

依存パッケージのインストール

llvm/clang

AppleのXcodeとCommand Line Toolsでインストールしたllvmにはllvm-linkとllvm-disが含まれていないため、homebrewの下記コマンドでインストールしましょう。

brew install llvm --with-clang

node

nodeについても同じようにインストールします。

brew install node

これでインストール自体は完了しました。
次はEmscriptenの初期設定を行います。

Emscriptenの初期設定

とりあえずダウンロードしてきたemscriptenディレクトリのなかのem++実行してみます。
すると自分の環境では

env: python2: No such file or directory

というエラーが出ました。
em++のshebangを覗いてみると

#!/usr/bin/env python2

となっており/usr/binに実行可能なpython2がなかったことが原因らしいので

sudo ln -s /usr/bin/python2.7 /usr/bin/python2

でpyshon2.7のシンボリックリンクを作成しました。

では気をとり直してem++をもう一度実行します。
すると

==============================================================================
Welcome to Emscripten!

This is the first time any of the Emscripten tools has been run.

A settings file has been copied to ~/.emscripten, at absolute path: /Users/nukesaq88/.emscripten

It contains our best guesses for the important paths, which are:

  LLVM_ROOT       = /usr/bin
  PYTHON          = /usr/bin/python
  NODE_JS         = /usr/local/bin/node
  EMSCRIPTEN_ROOT = /Users/nukesaq88/work/opt/emscripten

Please edit the file if any of those are incorrect.

This command will now exit. When you are done editing those paths, re-run it.
==============================================================================

というメッセージが出てhomeディレクトリに設定ファイルの.emscriptenを作成したので設定の確認をしろと促されます。これは初回実行時のみの表示です。
なので~/.emscriptenを開いて設定を編集します。

自分の場合デフォルトのままだと Homebrewでインストールしたllvmが使用されるように、LLVM_ROOTのパスの部分を'/usr/bin'から'/usr/local/bin'に変更しただけです。

これで初期設定は終わりです。
次は実際にC++のコードをJavaScriptに変換してみます。

C++からJavaScriptへの変換テスト

とりあえずテスト用のC++コードを作成します。
例: hello_world.cpp

#include <cstdio>

int main()
{
  std::printf("Hello World!\n");
  return 0;
}

このコードをem++を以下のように実行して変換したJavaScriptを含んだhtmlファイルを作成します。

./emscripten/em++ -o hello_world.html ./hello_world.cpp

このコマンドで作成されたhello_world.htmlをブラウザで開くと
f:id:nukesaq88:20130402230330p:plain

こんな感じで問題なく変換されていることが確認できました。

今回はこれで終了です。
これからいろいろと触っていきたいと思います。

参考にさせていただいたサイト
Tutorial · kripken/emscripten Wiki · GitHub
How to get Emscripten running on OS X.
Emscripten入門（導入編） - ushiroad
emscriptenでC++からJavaScriptへ変換しよう
Safx: Emscriptenを用いてC++ソースをJavaScriptに変換する

Emscripten本体とその他 依存パッケージのインストール