読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

RustによるWeb Assembly事始め

2018/02/14 追記
去年の11月25日にRustのnightly本体でwasm32-unknown-unknownサポートされたようです。なので、本記事はobsoleteです。

Rustが安定版1.14.0でWeb Assemblyを実験的にサポートしました。

blog.rust-lang.org

asm.js関連技術を使うにはC/C++に戻らないといけないのかとげんなりしていたので、これほどありがたいことはありません^^

EmscriptenによるWeb Assembly

早速、Web Assemblyから試してみました。macOSでのメモです。

1. Emscriptenをインストール

EmscriptenC/C++JavaScriptコンパイルするコンパイラです。RustもWeb Assemblyを出力する際にEmscriptenを利用します。

Emscripten SDKをダウンロードしてドキュメントのインストラクションに従うのが一番問題がないです。HomeBrewとか考え出すとLLVMのインストール時のコンパイルオプションとか色々ハマります。
Download and install — Emscripten 1.37.33 documentation

2. Firefox Developer Editionをインストールする

2017年1月5日現在、Web Assemblyをネイティブサポートしているのは、Developer Editionだけのようです。(製品版は有効化するフラグはあったのですが、ネイティブサポートされていませんでした)

www.mozilla.org

アドレスバーでabout:configを開き、javascript.options.wasmをtrueに設定します。
これでWeb Assemblyが有効になります。

3. hello.cをコンパイルする
#include <stdio.h>

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

という内容のhello.cを用意して、

emcc hello.c -o hello.html -s BINARYEN=1
chmod a+r hello.js

を実行します。
(初回は、Binaryenのインストールが実行されます(と思います))
生成されたhello.jsのパーミッションがユーザーオンリーになってるのでchmodしています。

4. 実行する

コンパイルして生成されたファイルをウェブサーバーがアクセスできるようにしてください。
それが終わったら、hello.htmlをFirefox Developer Editionでブラウズします。

以上です。
上記手順から外れると意外と苦労するかもしれませんよ(体験談)

RustによるWeb Assembly 実行編

続いてRustで同じことをします。

Rustはrustupを使って最新版(1.14.0以降)がインストールされているとします。

1. hello.rsをコンパイルする
fn main() { println!("Hello, World!"); }

という内容のhello.rsを用意して、

rustc --target=wasm32-unknown-emscripten hello.rs -o hello.html
chmod a+r hello.js

を実行します。

2. 実行する

Emscriptenの時と一緒です。hello.jsのパーミッションに注意。

RustによるWeb Assembly 関数呼び出し編

DOM関連の操作はJavaScriptでするのがよいかと思うので、RustのライブラリをJavaScriptから呼び出す方法が必要になるかと思います。やってみましょう。

1. hello.htmlを変更する
「RustによるWeb Assembly 実行編」で生成したhello.htmlに関数呼び出しを組み込みます。
具体的には

  script.src = "hello.js";
  document.body.appendChild(script);

の2行の間に

  script.onload = function() {
    var hello_world = Module.cwrap('hello_world', 'number', ['number']);
    console.log(hello_world(41));
  };

を追加します。これが、Rustで書かれた関数hello_worldをJavaScriptから呼び出す方法です。

2. hello.rsを変更する

#![feature(link_args)]
#[link_args = "-s EXPORTED_FUNCTIONS=['_hello_world']"]

extern {}

#[no_mangle]
pub extern fn hello_world(n: i32) -> i32 {
    n + 1
}

fn main() { } // ダミー。関数をエクスポートすると実行されない模様

link_argsでエクスポートする関数を指定します。
extern {}や#[no_mangle]はおまじないと思ってください。

3. rustをnightlyに変更
featureを使う場合、rustをnightlyバージョンにする必要があります。

rustup override set nightly

を実行してください。

4. コンパイルする

rustc --target=wasm32-unknown-emscripten hello.rs
chmod a+r hello.js

上記例と違い、オプション -o hello.htmlを省略することに注意してください。

5. 実行する
hello.htmlをFirefox Developer Editionでブラウズします。
ウェブコンソールを開くと、計算結果42が表示されていることを確認できるはずです。
(ウェブコンソールを開いたまま、ページを再読込するとページがクラッシュするようです。)