Help us understand the problem. What is going on with this article?

emscripten 逆引きリファレンス & トラブルシューティング

逆引きリファレンス

ほとんどが emscripten 公式ページ の和訳にすぎません。一度どのような記事があるか目を通しておくことをお勧めします。

記事自体はまだ執筆途中です。適宜情報を更新します。追加して欲しい項目がありましたら、コメント欄にてその旨をお伝えください。

ファイルパッケージシステム

とにかく外部ファイルを使ってみる

Emscripten リンカの --preload-file オプションを追加することで、外部ファイルを仮想ファイルシステムにマウントすることができます。

--preload-file (実ファイル/フォルダへのパス)@(マウント先のパス)

例えば、C:/DxLibTest/files にあるフォルダを仮想ファイルシステム上の /files から利用できるようにする場合は、

--preload-file C:/DxLibTest/files@/files

と指定します。

参照

手動で仮想ファイルシステムにマウントするファイルパッケージを作成する

Emscripten リンカに毎回ファイルパッケージを作成してもらう代わりに、手動でファイルパッケージを作成し、それを読み込ませることもできます。

Windows
cd %EMSDK%\upstream\emscripten\tools
python file_packager.py (パッケージ名) --preload (実ファイル/フォルダへのパス)@(マウント先のパス) --js-output (パッケージロード用の JS ファイル)
macOS/Linux
cd ${EMSDK}/upstream/emscripten/tools
python file_packager.py (パッケージ名) --preload (実ファイル/フォルダへのパス)@(マウント先のパス) --js-output (パッケージロード用の JS ファイル)

パッケージロード用の JS ファイルも出力されるので、それを読み込ませる必要もあります。
また、通常のビルドの際に -s FORCE_FILESYSTEM=1 を指定することもお忘れなく。

参照

ファイルパッケージを LZ4 で圧縮する

Emscripten リンカの --preload-file オプションを渡す時に、-s LZ4=1 を指定すると、ファイルパッケージが LZ4 で圧縮されます。このパッケージを実行時に解凍するためのコードも自動で追加されます。

ビルド/リンク

使用する JavaScript ランタイムライブラリを指定する

通常の C++ スタティックライブラリは -lfoo (libfoo.a) オプションを追加することでリンクします。それと同様に、使用する JavaScript ランタイムライブラリを -lfoo.js (library_foo.js) と指定することで、その JavaScript ランタイムライブラリを emscripten によって出力される JavaScript 実行ファイルに追加することができます。

手動で emscripten-ports をビルドする

embuilder コマンドを使用することで、emscripten-ports に含まれるファイルを手動でビルドすることができます。

embuilder build [--force] (ビルドしたいライブラリ)

特に、emscripten-ports に付属する freetype をカラー絵文字に対応させるための変更を加えた上でサイドビルドしたい時など、emscripten-ports に付属するライブラリに調整を加えたい時に便利です。

コンパイル時に使用できるオプションとリンク時に使用できるオプション

現在執筆中

トラブルシューティング

環境構築編

emsdk activate latest --global に失敗する

エラーメッセージの例

エラー例
Importing Python win32 modules failed! This most likely occurs if you do not have PyWin32 installed! Get it from https://github.com/mhammond/pywin32/releases

考えられる原因

  • emsdk に付属する Python 3.x に pywin32 モジュールが不足している
  • Microsoft Store からダウンロードした Python 3.x を使っている

対処方法

ビルドエラー編

No such file or directory と表示される

エラーメッセージの例

エラー例
shared : error : C:¥Users¥(ユーザ名)¥.emscripten_cache¥wasm-pic¥ports-builds¥zlib¥compress.c: No such file or directory

考えられる原因

  • 依存ライブラリのソースファイル群のzipファイルの展開に失敗している

対処方法

  • %USERPROFILE%\.emscripten_ports フォルダの中にある zip ファイルをその場に (画像のようにフォルダが並ぶように) 展開する
  • %USERPROFILE%\.emscripten_ports フォルダ、%USERPROFILE%\.emscripten_cache フォルダを、セキュリティソフトウェアのスキャン除外フォルダに追加する

参照

UnicodeDecodeError と表示される

エラーメッセージの例

エラー例
UnicodeDecodeError: 'cp932' codec can't decode byte 0x86 in position 24221: illegal multibyte sequence

考えられる原因

  • 内部コマンドでの標準出力のエンコーディングが UTF8 にもかかわらず、それを Shift-JIS (CP932) と解釈しようとしてしまう (Windows Python 3.x 系の仕様)

対処方法

  • (非推奨) Python 2.x 系をインストールし、emscripten ツールチェインがそれを使うように構成する
  • 環境変数に PYTHONUTF8=1 を指定し、UTF8 エンコーディングを使うように強制する。(ただし、ソースコードも UTF8 に統一する必要があります)

参照

内部仕様

JavaScript ランタイムライブラリ

%EMSDK%/upstream/emscripten/src (${EMSDK}/upstream/emscripten/src) にJavaScript で書かれたランタイムライブラリが配置されています。(library_*.js)

次の JavaScript ランタイムライブラリは常に emscripten によって出力される JavaScript 実行ファイルに追加されます。

  • library.js
  • library_formatString.js
  • library_path.js
  • library_signals.js
  • library_syscall.js
  • library_html5.js
  • library_stack_trace.js
  • library_wasi.js
  • library_int53.js

また、-s AUTO_JS_LIBRARIES=0 を指定すると、次の JavaScript ランタイムライブラリが、emscripten によって出力される JavaScript 実行ファイルに自動では追加されなくなります。

  • library_webgl.js
  • library_openal.js
  • library_sdl.js
  • library_glut.js
  • library_xlib.js
  • library_egl.js
  • library_glfw.js
  • library_uuid.js
  • library_glew.js
  • library_idbstore.js
  • library_async.js

その他の JavaScript ランタイムライブラリはコンパイルオプションによって、emscripten によって出力される JavaScript 実行ファイルに追加されたりされなかったりします。

emcc の流れ

現在執筆中です。

ダイナミックリンク時の関数名命名とその展開方法

現在執筆中です。

nokotan
DxLib の Web 移植を試みたかめ / OpenSiv3D も Web 移植を試みているとか / WebAssembly, emscripten チョットデキル らしい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away