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

QtWebAssemblyの導入方法(2020年版)

おはようございます、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

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