おはようございます、Qt Advent Calendar 2020の 23日目の記事です。

去年技術書展で購入した本でQtWebAssemblyに興味を持ったのですが、まだまだ開発中の機能でQtのバージョンによって導入方法が違ったりしていたので、今回は現在最新のQtバージョンでQtWebAssemblyを導入してみようと思います。
この手順はWindows10での導入方法です。

emsdkのインストール

WebAssemblyのコンパイラであるemsdkをインストールします。
これには以下のソフトウェアが必要なので、入っていない場合は先にインストールしてください。

• Python2.7.12以上
• Gitクライアント

コマンドプロンプトを立ち上げて下記を入力し、emsdkをインストールします。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
emsdk.bat install 1.39.8
emsdk.bat activate --embedded 1.39.8

インストール後emsdkフォルダに.emscriptenファイルが出来るので、emsdk_path の部分をインストールした場所のパスに書き換えます。
下記はC:\emsdkにインストールした時の例です。

import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = 'C:/emsdk/node/12.18.1_64bit/bin/node.exe'
PYTHON = 'C:/emsdk/python/3.7.4-pywin32_64bit/python.exe'
JAVA = 'C:/emsdk/java/8.152_64bit/bin/java.exe'
LLVM_ROOT = 'C:/emsdk/upstream/bin'
BINARYEN_ROOT = 'C:/emsdk/upstream'
EMSCRIPTEN_ROOT = 'C:/emsdk/upstream/emscripten'
TEMP_DIR = 'C:/emsdk/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

ホームディレクトリ(C:\Users\ユーザー名)に.emscriptenをコピーします。

※このファイルの書き換えとコピーという手順はQtのドキュメントにはありません。
Qtでコンパイラに自動でEmsctipten Compilerを追加するために手順を追加しましたが、もっとスマートな解決方法がありそうです…もしご存じの方がいればコメントして頂きたいです…！

sedのインストール

以下のサイトからsed-4.2.1-setup.exeをダウンロードし、全てデフォルトでインストールします。
https://sourceforge.net/projects/gnuwin32/files/sed/4.2.1/?sort=filename&sortdir=asc

Qtのインストール

オンラインインストーラーで以下のコンポーネントをインストールします。
Qt
└Qt5.15.0
　└WebAssembly

Developer and Designer Tools
└MinGW 8.1.0 64-bit

QtCreator WebAssemblyプラグイン有効化

[ヘルプ]の[プラグインについて]をクリックしてインストール済みプラグインウィンドウを開きます。
[Device Support]->[WebAssembly]を有効化し、QtCreatorを再起動します。

QtCreator Kit設定

[ツール]の[オプション]をクリックします。
コンパイラに自動でEmsctipten Compilerが追加されています。

Qtバージョンに自動でQt5.15.0WebAssemblyが追加されています。

Kitsに自動でQt5.15.0WebAssemblyが追加されています。

これでQtWebAssemblyのビルドができるようになります。

参考

https://doc.qt.io/qtcreator/creator-setup-webassembly.html
https://wiki.qt.io/Qt_for_WebAssembly
https://doc.qt.io/qt-5/wasm.html