WebAssemblyの環境を整えた。最低何を記述すれば動くのか。Cからwasm生成

カテゴリー：WebAssembly

記事作成日：2017-08-17

投稿日現在(2017年8月)、一番興味と期待を抱くものはWebAssemblyである。現時点でFireFox、Chromeで既に動作するので試さないわけにはいかない。実は1か月前(2017年7月)から情報を集めていたがなかなか難しく頓挫していた。

## そのうち開発環境が整う

おそらく、Androidアプリ開発でEclipseからAndroidStudioにシフトしたように、いとも簡単に開発環境が構築でき、あれこれ気にしなくてもコードの記述に集中できる時代は遠からず来るとは思う。それからでも遅くない・・いや、とにかく早く触ってみたい。

## 現時点(2017年8月)で開発環境を整える

<a href="https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm" target="_blank">https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm</a>

Windows10で開発環境を整える。<br>
こちらの通り、Git、CMake、Visual Studio Community 2015 with Update 3 を用意して、説明の通りセットアップ。

## チュートリアルの通り実行

まずはチュートリアルの通りやってみた。なにやら色々記述されたHTMLファイルとJSとWASMファイルが出力され、書かれている通りに実行は出来る。ただし、私がやりたいことはこんなことではない。
もっとコンパクトに最小限の実行ファイルを用意したい。そして生成されたコードに引数を与えて呼び出し、戻り値を得ることである。

## 最小限の状態までそぎ落とす

用意したCのコードは以下の通り。main()も用意してあるが使用していない。

ファイル名は fnc.c とした。

```c
#include <emscripten/emscripten.h>

int main(int argc, char ** argv) {
}

#ifdef __cplusplus
extern "C" {
#endif

int EMSCRIPTEN_KEEPALIVE fnc(int num) {
	return num * num;
}

#ifdef __cplusplus
}
#endif
```

コンパイルのコマンドラインは以下の通り。

```
emcc fnc.c -o fnc.js -O3 -s WASM=1
```

HTMLファイルも出力する際は以下の通りとなる。

```
emcc fnc.c -o fnc.html -O3 -s WASM=1 --shell-file shell_minimal.html
```
shell_minimal.htmlは説明サイトを見て探してほしい。

生成されたHTMLを最小限の状態にしてみた。結果、以下の通りとなった。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<button type="button" id="run">実行</button>
	<div id="result"></div>
	<script>
	document.getElementById('run').addEventListener('click',function(){
		var result = Module.ccall('fnc','number',['number'],[7]);
		document.getElementById('result').innerHTML = result;
	},false);
	</script>
	<script async src="fnc.js"></script>
</body>
</html>

```

実行と書かれたボタンをクリックするとCコンパイルで生成されたwasmが呼ばれ、結果を得られるというもの。
Cのファンクション fnc に引数 7 を数値で1個渡し、戻り値を数値で得て、それを表示するというものである。

fnc.js は自動生成され、通常それをそのまま使用する。

コードの通り、7を渡すと7の2乗が返り、49が表示されれば成功。

## 引数について

wasmへ渡す引数はJS側は下記サイトに書かれている。

<a href="https://kripken.github.io/emscripten-site/" target="_blank">https://kripken.github.io/emscripten-site/</a>

Module.ccall()の引数は4つで、順に以下の通り。
1. Cのファンクション名。
2. 戻り値の型
3. 引数の型(配列)
4. 引数の値(配列)

JSONを渡してJSONを受け取るなどの場合、つまり文字列を渡して文字列を受け取る場合、
Cのコードは、

```c
char* EMSCRIPTEN_KEEPALIVE fnc(char* json) {
	return "{}";
}
```

の様になり、JSは以下の様になる。

```javascript
var json = '{}';
var result = Module.ccall('fnc','string',['string'],[json]);
```

引数に数値と文字列を渡したい場合は以下の通り。

```javascript
var num = 100;
var json = '{}';
var result = Module.ccall('fnc','string',['number','string'],[num,json]);
```

この場合Cは以下の様に記述する。

```c
char* EMSCRIPTEN_KEEPALIVE fnc(int num, char* json) {
	return "{}";
}
```

これで最小限の構成は出来上がった。後は書きたいコードを書くだけである。

## ところで EMSCRIPTEN_KEEPALIVE ってなんだ？

Cのファンクション名の前についている EMSCRIPTEN_KEEPALIVE とは、Cのコンパイラが最適化で関数名を別名にしてしまう事を防ぐ為らしい。

## 注意

FireFoxはローカルのファイルを特にサーバーを立てずに実行できるが、Chromeの場合はXAMPPなどでサーバーを立てないと「Fetch API cannot load ***. URL scheme must be "http" or "https" for CORS request.」とコンソールにエラーがでる。

CONTENTS

Android

Androidアプリの合計ダウンロード数、iOSアプリの合計ダウンロード数

Flutter

Android Studio. Could not determine java version. Unable to find bundled Java version.

その他

XAMPPのMySQLを復旧

ブラウザ

各ブラウザでのキャッシュクリアまとめ

JavaScript

JavaScriptで動画読み込み

Unreal Engine