WindowsにEmscriptenをインストール(incoming対応 WebAssembly環境の整備)

※ WebAssemblyの出力には、incoming版である必要がないことが分かりましたので、一部修正しました(2017/05/18)。

Emscriptenは、C/C++のコードからJavaScriptを出力することのできる開発環境です。
C/C++で書いたコードをそのままブラウザ上で動かすことができるので、とても便利です。また、asm.jsや、WebAssemblyの出力にも対応しています。また、GLFWやOpenGL ESにも対応しているため、グラフィックアプリケーションもコンパイルすることができます。

この記事では、Windows環境上にEmscriptenのincoming版をインストールするための手順を紹介します。RustからWebAssemblyを出力するためにも必須の環境です。ちなみに、インストール完了までに2時間ほどかかる場合があります。

以前は、Emscriptenを使ったWebAssemblyの出力には、別途Binaryenというツールのインストールも必要でしたが、現在(2017/05/06時点)では、Emscriptenのインストールのみで出力が可能になっています。(確認したところ、incoming版のインストールも必要がないようです。)

まずは、インストーラを使ってインストール

Emscriptenの公式サイトから、Windows用のインストーラをダウンロードし、実行します。Offline版のほうが確実ですので、そちらを選ぶと良いでしょう。デフォルトの設定で問題ありません。

インストールが完了したら、コマンドプロンプトから「emsdk」と打って、何か出ればおそらくOKです。

incoming版を入れる

この記事の執筆時点(2017/05/06)では、WebAssemblyを出力するためにはincoming版が必要です。incomingをインストールするためには、さきほどインストールしたemsdkを使用します。なお、単にWebAssemblyを出力できるようにしたい場合には、incoming版は必要なく、以下の手順のうち、「事前準備」のgitのインストールのみを行い、SDKのアップデートのところで、「sdk-incoming-64bit」の代わりに「latest」として実行してください。(gitがない場合、うまく最新のものをインストールしてくれないようです。)

事前準備

以下のツールを事前にインストールしておく必要があります。

  • git (入っていない場合はこちら
  • cmake(入っていない場合はこちら

両ツールとも、git、cmakeと打つと実行できるようにパスを通しておきます。(ちなみに、筆者はVisual Studio 2015の入っていない環境を持っていないため分からないのですが、もしかすると入っていない環境では異なるかもしれません…)

Emscripten SDKのアップデート

事前準備が整ったら、管理者権限でコマンドプロンプトを立ち上げ、以下のコマンドを実行していきます。

2行目を実行するとダウンロードとコンパイルが行われるため、完了までに1~2時間ほどかかります。3行目の実行には、管理者権限が必要です。ちなみに、3行目の「–global」をつけない場合、コマンドプロンプトを立ち上げるたびにincoming版ではなく通常版のEmscriptenを使うように戻ってしまうため、注意してください。

以上が完了したら、たとえば、コマンドプロンプトに「where emcc」と打ち、「C:\Program Files\Emscripten\emscripten\incoming\emcc」といった具合に、incoming版が参照されていればOKです。

Makeを入れる

Emscriptenで本格的に開発を進めていく場合、makeコマンドはほぼ必須です。もしインストールされていない場合は、以下のものを使うと良いと思います。

上記のMake for Windowsには、LibIntlとLibIconvも必要なようです。

これらのサイトから、Binariesをダウンロードし、各binディレクトリ内のファイルを、パスの通っているディレクトリに入れて下さい。コマンドプロンプトから「make」と打って実行されればOKです。

コンパイルしてみる

WebAssemblyへコンパイルしてみます。適当なディレクトリに「hello.c」というファイルを作り、以下のコードを書きます。

保存したディレクトリに移動し、以下のコマンドでコンパイルします。(初回のみ、すごく時間がかかりますが大丈夫です。)

「-s WASM=1」というオプションがWebAssemblyへのコンパイルオプションです。もし、対応していない場合はエラーが出ると思います。

さて、コンパイルが完了したら、「hello.html」「hello.js」「hello.wasm」という3つのファイルが出来ています。hello.htmlをFirefox(52以上) で開くと、Hello Worldと表示されるはずです。