Emscripten インストールから WebAssembly 生成サンプル実行までのはまりメモ

2020/10/14

Windows で Emscripten のサンプルを動かすまで、しょうもないはまりで時間かかりました。2020/10/14 現在の Emscripten のインストールからサンプル動作までのメモを残しておきます。インストールについては、基本は以下のページの手順に従うだけなので、何もなければあっという間に終わります。

https://emscripten.org/docs/getting_started/downloads.html

1. emsdk を github からダウンロード

以下の github ページから emsdk の .zip ファイルをダウンロードして、適当なフォルダーに解凍します。

https://github.com/emscripten-core/emsdk

emsdkのzipダウンロード

2. python のインストール

Windows 版でインストールするには python のインストールと、python.exe へのパスが通っている(PATH 環境変数に登録されていて、python コマンドが実行できる)ことが必要です。

私はもともと python 3.6 がインストールされていたので、そのままインストールできるかと思いきや、インストールコマンドを実行しても、エラーも何も起こらず、即終了してしまいました。その他のコマンドも何もログも出ずに即終了してしまう状態になってしまいました。エラーも出ないので成功したのか失敗したのかもよくわからなかったんですが、emcc -v コマンドが認識されなかったので、インストールできていない事が分かりました。

で、python コマンドが正しく動くのかを確認するために、コマンドプロンプトで python と入力して実行してみると、突然 Microsoft Store の python インストールページが立ち上がりました。そういえば、python って自前で公式サイト python.org のインストーラーからインストールして、PATH に自前で python.exe へのパスを追加とかしてしまうと、この Microsoft Store を起動するためのショートカットの PATH の方が優先度が高くなってしまって python.exe が叩けない問題があるんでした(以前仕事でこれに遭遇して相当イライラしました)。Windows 開発者ドキュメントのよく寄せられる質問にも書いてありました。

https://docs.microsoft.com/ja-jp/windows/python/faqs#why-does-running-pythonexe-open-the-microsoft-store

どうやらpython インストール時にオプションの「PATH に追加」オプションを指定すればショートカットよりも優先されるような仕組みになっていたようです。知らんがな。。「他のインストーラーは、組み込みのショートカットよりも_低い_優先度で python を追加する場合があることに注意してください。」と書いてありますし、世界中でこれにはまった人、相当いるんではないでしょうか。

3. emsdk のインストール

コマンドプロンプトで python コマンドが動作することが確認できたら、後は解凍した emsdk のフォルダーで以下を実行するだけで OK です。

.\emsdk install latest
.\emsdk active latest
.\emsdk_env.bat

実行すると、最初とは違って、ちゃんとインストールの進捗が分かるログが出て安心しました。しばらく待つとインストールが完了して emcc コマンドが使えるようになります。

emcc -v

と入力してバージョン情報がログ出力されたら正しくインストールされていることが確認できます。

4. サンプルの実行

以下のページにある C 言語のソースから WebAssembly に変換する簡単なサンプルを実行します。

https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm

以下のソースコードを hello.c として適当なディレクトリに保存します。

#include 

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

hello.c を保存したディレクトリで以下のコマンドを実行します。

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

少し待つと、同じディレクトリに hello.js、hello.wasm、hello.html が生成されます。あとは、hello.html をブラウザで開いてページ上のコンソールに Hello world と表示されることを確認するだけなんですが、私の場合は Google Chrome で開いても preparing... と表示されてコンソールには一生何も表示されませんでした。

上記ページの「サンプルコードを実行する」のところを見てみると、「Chrome (51+) と Opera (38+) では chrome://flags に飛んで Experimental WebAssembly フラグを有効にすることで wasm コードを実行することができます」と書いてありました。私の Chrome は 86 だったのでデフォルトで有効になっているかと思いきや、古いバージョンからアップデートを繰り返してきた場合はこのフラグが有効になっていなかったみたいで、Experimental WebAssembly を手動で有効にする必要がありました。

Experimental WebAssembly有効化の画像

今度こそ行けるか?と思いきや、うまく表示されない...

もしかして、と思って Visual Studio Code から Live Server で開いたら遂にページ上のコンソールに Hello world の文字が!

ということで、無事に Emscripten のインストールからサンプル動作まで確認することができました。すぐに終わると思いきや、しょうもないことにはまって、ここまで動かすのに無駄に時間がかかってしまいました。この記事が同じような事にはまってしまった方の参考にでもなれば幸いです。


  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事