Rust1.14でWebAssemblyを出力する(Windows10)

つい先日、Rust 1.14がリリースされた。
1.14の大きな変更点としてWebAssemblyのコンパイルが出来るようになった。
「experimental support for WebAssembly」とのことなのでまだまだ実験段階みたいな感じらしいがとりあえず試してみた。

blog.rust-lang.org

Rust 1.14にアップデートする

rustup経由でのインストールが推奨されている。
細かな手順については、以前書いた以下の記事を参照(rustupでのインストールを追記した)。

hkou.hatenablog.com

1.14にVersionUpされていることを確認する。

>rustc --version
rustc 1.14.0 (e8a012324 2016-12-16)

Visual Studio 2013のインストール

Emscriptenコンパイルをするために必要。
注意点:VS2013(2015とか2017ではない)
自分の環境ではVS2015が既に入ってたので、それで代用しようとしたけど上手くいかなかった。

Microsoft Visual Studio Express 2013 for Windows Desktop Update 5

Download Microsoft Visual Studio Express 2013 for Windows Desktop Update 5 from Official Microsoft Download Center

Visual C++ ツールセットを有効にする

以下のコマンドを実行する。

"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcvarsall.bat" x86_amd64

cmakeのインストール

以下のリンクから、「cmake-3.7.1-win64-x64.msi」をダウンロードしてインストールした。

Download | CMake

インストールされたことを確認

>cmake -version
cmake version 3.7.1

CMake suite maintained and supported by Kitware (kitware.com/cmake).

Emscriptenのインストール

RustからWebAssemblyを実行するにはversion1.37が必要だが、インストーラとして提供されているのは現時点で1.35なのでインストールしたあとにversion upしてやる必要がある。
とりあえず以下のページからインストーラー「emsdk-1.35.0-web-64bit.exe」をダウンロードしてインストールする。

Download and install — Emscripten 1.36.14 documentation

1.37にupdate

以下のコマンドを実行。コンパイルがはじまるので終わるまで気長に待つ(40分ぐらいかかった)

emsdk update
emsdk install sdk-incoming-64bit

コンパイルが終わったら以下のコマンドを実行して有効にする。

emsdk activate sdk-incoming-64bit

1.37になったことを確認する。

>emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.1

Rustコードコンパイル

WebAssemblyのtargetを追加

以下のコマンドを実行してtargetを追加

rustup target add wasm32-unknown-emscripten

Rustコード

とりあえずRust BlogのSampleどおりにHelloWorldのコードを書いて保存。(hello.rs)

fn main() {
    println!("hello world");
}

WebAssemblyにコンパイルする

RustBlogのコマンドそのままだと上手く動かなかった。Windowsの場合、linkerを明示的に指定してやる必要がある。(-C linker=emcc.bat の部分)

rustc --target=wasm32-unknown-emscripten -C linker=emcc.bat hello.rs -o hello.html

コンパイルが成功すると以下のファイルが生成される。

f:id:hkou:20170107101002p:plain

WebAssemblyの実行

Chrome Canaryのインストール

現行のChromeだとWebAssemblyに対応していないようなのでChrome Canaryをインストールする。
以下のリンクからインストーラをダウンロードしてインストールする。

www.google.co.jp

WebAssemblyの有効化

Chrome Canaryのアドレスバーに「chrome://flags/#enable-webassembly」を入力してエンター
プルダウンメニューを有効にしてChrome Canaryを再起動する。

f:id:hkou:20170107101432p:plain

Server立てる

htmlとかwasmが生成されたディレクトリで以下のコマンドを実行する。

python -m SimpleHTTPServer

hello.htmlへアクセス

Chrome Canaryで「http://localhost:8000/hello.html」にアクセスする。
hello worldが表示された。

f:id:hkou:20170107101924p:plain

参考にしたページ

Announcing Rust 1.14 - The Rust Programming Language Blog

rustc fails to compile to asmjs on Windows · Issue #38489 · rust-lang/rust · GitHub

RustからWebAssemblyにコンパイルしてみる - fine, later feeling