Emscriptenを使う機会があったので、備忘録として。
対象読者
Emscriptenって何ぞや。WebAssemblyって何ぞや。とりあえず動かしたい方向け。
（中身が知りたければ下部参考リンクまで）
WebAssemblyとは
機械語に近いため、Webを高速実行できる。WebAssemblyを使えば色んな言語を、色んなブラウザで実行できる。（＝言語やブラウザに依存する必要がない。）
対応言語
- Java
- PHP
- C# .NET
- C++
- Ruby
- C
- Swift
- R
- Go
- Rust
対応ブラウザ
- Google Chrome・Chrome for Android
- Microsoft Edge
- Safari・iOS Safari
- Firefox・Firefox for Android
- Opera
- Android Browser
Emscriptenとは
平たく言えば上記対応言語をコンパイルしてwasm形式にできる便利ツール。
環境構築
開発環境：Windows10
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ # 最新版をインストール
$ ./emsdk install latest
$ # 最新版を使用
$ ./emsdk activate latest
$ # cmdを開いている間の環境パスを変更
$ ./emcmdprompt.bat
Python, Node, Java とPATHが競合するため、./emcmdprompt.batは忘れずに実行しましょう。
実行
hello.cを作成します。
#include <stdio.h>
int main() {
printf("Hello, World!\n");
}
Emscriptenでコンパイルしてみましょう。emccコマンドを使用します。
$ emcc <コンパイルするファイル> -o <コンパイル後のファイル名.拡張子>
今回の場合では
$ emcc hello.c -o hello.html
オプションで -s WASM=1 を指定すると.wasmファイルが生成されるようです。しかし上記のコマンドでも.wasm, .html, .js が生成された模様。
実行にはVS CodeのLive Serverが一番手っ取り早いです。
生成されたファイルを読み解いてみる
htmlファイル
コードは200行にも渡るが、その実Emscriptenのロゴや基本的なページのテンプレのみであった。
jsファイル
hello.wasmをインポートしているコードを発見。htmlファイルに具体的な出力内容を指定する役目を担っている。
wasmファイル
要はこのファイルさえあればWebページにC言語の内容を出力することは難しくなさそうだ。Emscriptenのテンプレに従う必要がないのなら、.wasmファイルを自サイトに埋め込む方が良いだろう。
参考リンク
https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2
https://qiita.com/RYOSKATE/items/918f2fda3c6f20c7f6ba