LoginSignup
7
4

More than 5 years have passed since last update.

QtでWebAssembly

Last updated at Posted at 2018-08-16

とりあえずWebAssembly(C言語)でブラウザで動くものを作りたいので調べたら、
こよなく愛するQtでできるらしいので調べた。
環境はUbuntu 16.04です。

https://wiki.qt.io/Qt_for_WebAssembly
https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm
基本的な情報は上の2個
だがやるとできないでハマった。以下は私が見つけた回答

1.
まずQtをQtのサイトから一式ダウンロードする。
https://www.qt.io/download
ここからOpenSource版をダウンロードしてさらにメンテナンスツールから5.11.0
を選びダウンロードする(しばらくかかる)
知っている人は知っていると思うがダウンロードした5.11.0のフォルダ(/Qt/5.11.0/Src)
のなかにqtのソース一式があり、これでqmake以下一式ビルドできる。
だからあとWebAseemblyのコンパイラがあればいい。

2.
WebAssemblyのコンパイラはemscriptenがいいらしい。
ネットで調べるとそれが一番情報あるから。
それをダウンロードするわけだが、なぜが私のところubuntu16.04 では最新(1.38.11)
ではうまく動作しなかった。そこで古いやつ(1.38.8)を選ぶと動いたのでそれを紹介。
なお上の
https://wiki.qt.io/Qt_for_WebAssembly
で推薦された.1.38.1も動作しなかった(少なくとも私のマシンでは)
以下のコマンドでインストールしてください
git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install --build=Release sdk-tag-1.38.8-64bit binaryen-master-64bit
./emsdk activate --build=Release sdk-tag-1.38.8-64bit binaryen-master-64bit
source ./emsdk_env.sh
一応入れたら
https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm
に3個例があります。ためしにやって動作確認してください。
C言語がWebで動きます。
※./emsdk install で律速されます、多分数時間。注意
※端末立ち上げるたびsource ./emsdk_env.sh する必要があります。

3.次にもちろんQtの環境を作る。
端末を起動
source ./emsdk_env.sh 
実行
cd で /Qt/5.11.0/Src に移動
まず
qtbase、qtdeclarative、qtwebsocketsのフォルダを削除したのち
git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git
git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git
git clone -b wip/webassembly https://code.qt.io/qt/qtwebsockets.git
さらに
qtlocation ,qt3dも削除
これは代替がない(今の所)よってこれを使うものはできない。
適当な場所にbuildディレクトリを作成(シャドウビルド)、
そこにcdしてからconfigure
/Qt/5.11.0/Src/configure -xplatform wasm-emscripten -developer-build -release -static -no-thread -nomake tests -nomake examples -no-dbus -no-headersclean -system-libpng -no-ssl -no-warnings-are-errors -skip qtlocation -skip qt3d -skip qtwebengine (他、使わないと思われるモジュールはskipしておくとコンパイル時間が短くなる)
最後にmake
make -j10 (-jは並列コンパイルオプション 数字はCPUのコア数と同程度の数字とする)
これでerrorが出ないのを確認して下さい。
終わったらqmakeのパスを確認してください。
/your-build-path/qtbase/bin/qmake
/your-build-path/qtbase/qmake/qmake
これをこれ以降使います。(2個あるけどどっちでもいいらしい)
※qmake自体はconfigureした時すでにできているのに注意
※makeはskipする数とCPU性能により数十分~数時間

4.サンプルを動かしてみる
サンプルは
https://github.com/msorvig/qt-webassembly-examples
私が見た所ほとんど動作する(全部ではない)
やりかたとしては
makefileのやつは
make
*.proのやつは
/your path/qmake *.pro
make
でOK。htmlともろもろ出力されるのでhtmlをそのままブラウザで開くと動作する。
サーバーに乗っける必要はない。
file:://?????.html のURLを読むのでOK。
※いくつかのサンプルは
project error: unknown module(s) in qt: mqtt
のエラーを出す
これについては
https://stackoverflow.com/questions/48701475/qt-creator-adding-mqtt-library
にある。
git clone https://code.qt.io/qt/qtmqtt.git
cd qmqtt
mkdir build
cd build
/your path/qmake qmake -r ..
make
make install
でクリア出来ている(私のPCでは)

以上

残件
QtCreatorにKitとしてセットするのは今の所うまくできていない。
Screenshot from 2018-08-16 19-16-24.png

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4