C/C++からWebAssemblyにコンパイルする

まず、必要な開発環境をセットアップしましょう。

Emscripten SDKを取得します。以下の指示にしたがってください。https://emscripten.org/docs/getting_started/downloads.html

環境を設定した後は、C のサンプルコードを Emscripten にコンパイルする方法を見てみましょう。 Emscripten でコンパイルするときにはいくつかのオプションがありますが、この記事でカバーする主な2つのシナリオは次のとおりです:

• wasm にコンパイルし、コードを実行するための HTML とウェブ環境上で wasm を実行するための全ての JavaScript グルーコードを生成する。
• wasm にコンパイルと JavaScript の生成だけ行う。

2つについて見てみましょう。

最も簡単なケースを見てみましょう。コードを WebAssembly としてブラウザで実行するための全てを Emscripten で生成するようにします。

1. まずはコンパイルするためのサンプルコードを用意します。以下のCのサンプルコードをコピーして hello.c としてローカルドライブの新しいディレクトリに保存してください:

   #include <stdio.h>
   
   int main(int argc, char ** argv) {
     printf("Hello World\n");
   }

2. Emscripten コンパイラ環境を導入したターミナルウィンドウを使用して、hello.c ファイルと同じディレクトリに移動して、次のコマンドを実行します:

   emcc hello.c -s WASM=1 -o hello.html

このコマンドで渡されたオプションは次のとおりです:

• -s WASM=1 — 出力を wasm に指定します。指定しない場合、Emscripten はデフォルトでは asm.js として出力します。
• -o hello.html — コードを実行するための HTML ページを指定します。wasm モジュールとそれをウェブ環境で使用できるようにコンパイル、インスタンス化するための JavaScript グルーコードも出力に含まれます。

この時点でソースディレクトリに以下のファイルが出力されているはずです:

• バイナリの wasm モジュールコード (hello.wasm)
• ネイティブの C の関数と JavaScript/wasm の間で変換を行う JavaScript ファイル (hello.js)
• wasm コードをロード、コンパイル、インスタンス化し、ブラウザに出力するための HTML ファイル (hello.html)

WebAssembly をサポートしているブラウザで hello.html をロードするだけです。WebAssembly は Firefox 52+ と Chrome 57+/最新の Opera でデフォルトで有効になっています (Firefox 47+では about:config で javascript.options.wasm flag を有効にすることで、Chrome (51+) と Opera (38+) では chrome://flags に飛んで Experimental WebAssembly フラグを有効にすることで wasm コードを実行することができます) 。

全てが計画通りに機能していれば、ウェブページ上の Emscripten コンソールに "Hello world" の出力が表示されるはずです。おめでとうございます、ようやくCを WebAssembly にコンパイルしてブラウザで実行することができました!

場合によっては、カスタム HTML テンプレートを使用することもできます。 どうやってできるかを見てみましょう。

1. まず、次の C のコードを hello2.c として新しいディレクトリに保存します:

   #include <stdio.h>
   
   int main(int argc, char ** argv) {
       printf("Hello World\n");
   
   }

2. shell_minimal.html をあなたの emsdk レポジトリから探します。先程作成した新しいディレクトリに html_template というサブディレクトリを作って、そこにコピーします。

3. 新しいディレクトリに移動して (Emscripten コンパイラ環境があるターミナルウィンドウで) 、次のコマンドを実行します:

   emcc -o hello2.html hello2.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html

   今回渡したオプションは少しだけ異なります:

   • -o hello2.html と指定したことで、今回コンパイラは JavaScript グルーコードと .html を出力します。
   • さらに --shell-file html_template/shell_minimal.html と指定しました — これは例を実行する HTML を生成するための、HTML テンプレートパスです。

4. この例を実行してみましょう。上記のコマンドで hello2.html が生成されます。これは生成された wasm コードに対してロード、実行などを行うグルーコードを含むテンプレートと同じ内容を持ちます。ブラウザを開いて最後の例と同じ出力であることを確認してください。

C で定義された関数があって、それを JavaScript から呼び出したい場合、Emscripten の ccall() 関数と EMSCRIPTEN_KEEPALIVE 宣言 (対象の関数をエクスポートする関数リストに加えるものです (Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process? を参照してください)) を使用します。これがどのように働くか見てみましょう。

1. はじめに、次のコードを hello3.c として新しいディレクトリに保存します:

   #include <stdio.h>
   #include <emscripten/emscripten.h>
   
   int main(int argc, char ** argv) {
       printf("Hello World\n");
   }
   
   #ifdef __cplusplus
   extern "C" {
   #endif
   
   void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
     printf("MyFunction Called\n");
   }
   
   #ifdef __cplusplus
   }
   #endif

   デフォルトでは、Emscripten が生成したコードは常に main() を呼び出し、他のデッドコードは削除されます。関数名の前に EMSCRIPTEN_KEEPALIVE を置くことによって、これが起こらなくなります。また、EMSCRIPTEN_KEEPALIVE を使用するために emscripten.h をインポートする必要があります。

   注: #ifdef ブロックを加えたことによって、C++ のコードからこの例をインクルードしようとしても動作するでしょう。 C と C++ の間でのマングリング規則によって、他の場合では壊れることもありますが、ここでは C++ を使用している場合に、外部の C の関数として扱うように設定しています。

2. 便宜上、この新しいディレクトリに html_template/shell_minimal.html (もちろん、このファイルはあなたの実際の開発環境に置きます)を加えます。

3. さて、再びコンパイル手順を実行しましょう。あなたの最新のディレクトリの中 (そして、Emscripten コンパイラ環境の入っているターミナルウィンドウ) で、このように C のコードをコンパイルします (NO_EXIT_RUNTIMEオプションを付与してコンパイルする必要があることに注意してください。そうしない場合、 main() 関数が終了したときにランタイムもシャットダウンされてしまい、コンパイルされたコードが正しく呼ばれなくなる可能性があります - 例えば、atexitの呼び出しなどの適切なCのエミュレーションに必要です):

   emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"

4. 例をブラウザでロードしたら、前と同じものが見られるでしょう。

5. JavaScript から新しい myFunction() 関数を呼び出す必要があります。まずは、 以下のような<button> を最初の <script type='text/javascript'> タグの上に加えましょう。

   <button class="mybutton">Run myFunction</button>

6. そして、<script> 要素内の最後に次のコードを追加します ( </script> タグの直前):

   document.querySelector('.mybutton').addEventListener('click', function(){
     alert('check console');
     var result = Module.ccall('myFunction', // name of C function
                                null, // return type
                                null, // argument types
                                null); // arguments
   });

これはエクスポートされた関数をどのようにして ccall() を使用して呼び出すかを示しています。

• emscripten.org — Emscriptenとそれの多種多様なオプションについての詳細を確認してください。
• Calling compiled C functions from JavaScript using ccall/cwrap
• Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process?