例題: 小文字を大文字にする
できたもの: https://mi.tsujigoya.net/notes/9qvvwatqle
Emscriptenを APTでインストールするのはあんまりお勧めじゃないらしいです (やっつけ)
- Ubuntu 22.04.4 LTS (WSL2)
- Emscripten 3.1.5
- Clang 13.0.1-2ubuntu2.2
- Cのコードを書く
// upper.c
#include <stdio.h>
#include <string.h>
#define LEN_BUFFER 255
void upper(char str[LEN_BUFFER])
{
for (int i=0; i<strlen(str); i++) {
if ((97 <= str[i]) && (str[i] <= 122)) { // is lowercase?
str[i] = str[i] - 32; // convert uppercase
}
}
}
int main(int argc, char **argv)
{
char buf[LEN_BUFFER];
strncpy(buf, argv[1], LEN_BUFFER-1);
buf[LEN_BUFFER-1] = '\0'; // NULL文字の位置うろ覚えかも
upper(buf);
printf("%s\n", buf);
return 0;
}## 今回はコマンドライン引数から入力を渡すようにしてみました
$ clang upper.c -o upper
$ ./upper abcd
## -> ABCD- Emscriptenでコンパイルさせる
## main()関数から呼ぶので念のため "EXPORT_ALL" しときました
$ emcc upper.c -s MODULARIZE=1 -s EXPORT_ALL=1 -o upper.js- WebAssemblyを呼ぶHTMLを書く
clickイベントの度にWASMを最初から起動しなおすゴリ押し実装です
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>lowercase to UPPERCASE</title>
</head>
<body>
<h2>lowercase to UPPERCASE</h2>
<p> 入力:
<input id='input'></input>
<button id='launch'> 変換！</button>
</p>
<p> ↓ わざわざCで書かれたコードで変換が行われます </p>
<p> 結果:
<code id='output'></code>
</p>
<script src="upper.js"></script>
<script>
document.getElementById('launch').addEventListener('click', () => {
fetch('upper.wasm')
.then(response => response.arrayBuffer())
.then(buffer => new Uint8Array(buffer))
.then(binary => {
var moduleArgs = {
wasmBinary: binary,
arguments: [ document.getElementById('input').value ],
print: function(text) {
document.getElementById('output').textContent = text;
}
};
var module = Module(moduleArgs);
});
});
</script>
</body>
</html>- Webサーバを立てて、ブラウザから先ほどのHTMLを開く
$ python3 -m http.server 8000とか？localhost:8000みたいにアクセスするとカレントディレクトリのファイルが一覧になっているはず