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

カテゴリー：WebAssembly

記事作成日：2017-08-17

こちらの記事で書きましたが、チュートリアルの通りCからwasmに変換して実行する事は出来た。

<a href="./24" target="_blank">最低何を記述すれば動くのか。Cからwasm生成</a>

ただし、色々安全機能がある為かファイルサイズが大きい。<br>
よって、今回は asm.js から wasm を生成する手順で最小ファイルサイズのバイナリで動作させてみることにした。

## 開発環境

「開発環境はCからwasm生成」で実施した手順で用意できていた。<br>
asm2wasm.exe と wasm-as.exe を見つけることが出来るだろう。

## asm.jsの記述

```javascript
function asm(stdlib, foreign, heap) {
	'use asm';
	const imul = stdlib.Math.imul;
	var aa = 0;
	function mul(a) {
		a = a | 0;
		aa = imul(a,a);
		return aa;
	}
	return { mul: mul };
}
```

mulという関数を作成。与えられた数値を2乗して返すものである。

## asm.js から wast 生成

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

```
asm2wasm.exe mul.js > mul.wast
```

生成されたwast(S式)は以下の通り。

```
(module
 (import "env" "memory" (memory $0 256 256))
 (import "env" "table" (table 0 0 anyfunc))
 (import "env" "memoryBase" (global $memoryBase i32))
 (import "env" "tableBase" (global $tableBase i32))
 (global $aa (mut i32) (i32.const 0))
 (export "mul" (func $mul))
 (func $mul (param $a i32) (result i32)
  (set_global $aa
   (i32.mul
    (get_local $a)
    (get_local $a)
   )
  )
  (return
   (get_global $aa)
  )
 )
)
```

import文が幾つかあり、このまま進むと<br>
TypeError: import object field 'env' is not an Object<br>
と、実行時エラーが出る。<br>
Emscriptenに関係する物か不明ですが、以下の通り削除して進めます。

```
(module
 (global $aa (mut i32) (i32.const 0))
 (export "mul" (func $mul))
 (func $mul (param $a i32) (result i32)
  (set_global $aa
   (i32.mul
    (get_local $a)
    (get_local $a)
   )
  )
  (return
   (get_global $aa)
  )
 )
)
```

## wast から wasm 生成

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

```
wasm-as.exe mul.wast -o mul.wasm
```

生成されるwasmはバイナリ。わずか80バイト。

```
00,61,73,6D,01,00,00,00,01,86,80,80,80,00,01,60,
01,7F,01,7F,03,82,80,80,80,00,01,00,06,86,80,80,
80,00,01,7F,01,41,00,0B,07,87,80,80,80,00,01,03,
6D,75,6C,00,00,0A,95,80,80,80,00,01,8F,80,80,80,
00,00,02,7F,20,00,20,00,6C,24,00,23,00,0F,0B,0B,
```

## 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>
const module = fetch('mul.wasm')
	.then(x => x.arrayBuffer())
	.then(x => WebAssembly.compile(x));

HTML読み込み、Scriptの実行でmul.wasmが読み込まれ準備が整う。<br>
[実行]ボタンをクリックするとwasmのmul関数へ数値の7が渡され、結果が返り、表示される。<br>
7×7の49が表示されれば成功である。

CONTENTS

Android

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

Flutter

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

その他

XAMPPのMySQLを復旧

ブラウザ

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

JavaScript

JavaScriptで動画読み込み