WebAssemblyの開発環境をmacOS上に構築し、作成したバイナリをブラウザ上で動かしてみました。基本的に公式サイトのドキュメント「Getting Started」の通りです。

まずcmakeをインストールします。

$ brew install cmake

次にEmscripten SDKでEmscriptenをソースコードからビルドします。

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate sdk-incoming-64bit binaryen-master-64bit

installはすごい時間がかかります。私の手元では2時間近くかかりました。コマンドだけ打ってランチにでも行きましょう。

最後に下記コマンドで環境変数やその他の設定を行います。今後も常用するのであれば.bashrcなどに追記しましょう。

$ source ./emsdk_env.sh

Hello world

では、次にHello worldしてみましょう。

$ mkdir /tmp/hello
$ cd /tmp/hello
$ vi hello.c
$ emcc hello.c -s WASM=1 -o hello.html

hello.cの内容は次の通りです。

hello.c

#include <stdio.h>

int main(int argc, char ** argv) {
    printf("Hello, world!");
}

コンパイルすると、hello.html、hello.js、hello.wasmの3ファイルが作られます。この3ファイルを同じディレクトリに配置すればCプログラムがブラウザ上で動くというわけです。

生成されたHTMLは現状ChromeかFirefoxで確認できます。同じものをGitHub Pagesにアップロードしておきました。

https://hnw.github.io/hello-wasm/hello.html

iconv(3)を使ってみる

もう少し難しいCプログラムも動かしてみましょう。Emscriptenはasm.jsおよびWebAssembly環境むけのlibcとしてmuslを採用しているようです。muslではiconv(3)を提供しているようなので、これを使って文字コード変換をしてみましょう。

stdinから入力を受け取り、UTF-8を1文字ずつUTF-32に変換してコードポイントを表示する、というプログラムを書いてみました。

https://hnw.github.io/hello-wasm/iconv.html

入力ダイアログが複数回出てくるので、1回目は適当に入力して2回目はキャンセルを押してみてください。「 🍺 」などを入力しても正しく動くのが意外でした。

感想など

現状だとasm.jsと大差ない気もしますが、全ブラウザで高速に動くというのは夢がありますよね。SafariとEdgeで動くのはいつになるんでしょうか。楽しみに待ちましょう。

WebAssembly環境構築 on macOS

Hello world

iconv(3)を使ってみる

感想など