Qt 5.12 で WebAssembly を使ってみました

# はじめに
大分遅くなりましたが、あけましておめでとうございます。
既に締め切りが過ぎているのですが、Advent Calendar 2018 12/24 分の投稿です。
最近 hermit4 さんが体調を崩されていて、更にお仕事が大変な状況となっている為、代役として投稿させていただきます。
以前から体調は色々と悪いのですが、今回は本当に厳しいそうです。

# 今回のテーマについて
今回のテーマは Qt for WebAssembly についてです。
実は、hermit4 さんから教えていただいた技術テーマでもあります。
簡単にいうと、C/C++ 言語で記述した Qt アプリをブラウザ上で実行する技術で、これを Qt の最新環境(5.12)で実行してみた、という内容になります。

# WebAssembly
WebAssembly は ブラウザからアセンブリ（機械語）を実行できるようにする技術で、Qt 環境に限った技術ではありません。
目的としては、既存の JavaScript に対する高速化や JavaScript にできないことを実現するために開発されたものとのことです。

詳細説明や、実際にどのくらい速くなるのか、については以下の記事が参考になります。
https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2

# History
Qt で最初に公開されたのは、Qt 5.11 Beta1 Released(2018/3/20) 辺りからのようです。
以下の記事を参考にしました。
https://blog.qt.io/jp/2018/03/20/qt-5-11-beta-released/

なので、比較的新しい技術のようです。
ベースとなる WebAssembly の活動については、2015年頃から始まったようです。
以下、Wiki の抜粋です。

>WebAssemblyの最初のアナウンスは2015年6月17日に行われ、2016年3月15日には主要ブラウザ (Firefox, Chromium, Google Chrome, Microsoft Edge) 上でUnityによるAngry Botsというデモが行われた。
2017年3月7日には、WebAssemblyに標準対応した初のブラウザとなるFirefox 52.0がリリースされた。2017年11月、MozillaはSafariとEdgeがWebAssemblyに対応したと発表し、すでに対応しているChromeとFirefoxを含め、主要なブラウザすべてでサポートされることになった。

# 実行方法
簡単にまとめると、以下の流れになります。

1. Qt 最新版の install(5.12)  
   https://www.qt.io/download
2. Emscripten SDK (emsdk) の install(sdk-1.38.21-64bit)  
   http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html  
   注) 最初 portable 版を install したのですが、後で asm ファイルの生成に失敗し、うまく行きませんでした。
3. Emscripten を使用するための環境変数設定  
   `$ source emsdk_env.sh`
4. Qt のビルド  
   下記のページを参考にしました。  
   https://wiki.qt.io/Qt_for_WebAssembly  
   補足すると、以下の流れになります。  
   `$ mkdir <Qt build dir>`  
   `$ cd <Qt build dir>`  
   `$ <Qt Src dir>/configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase`  
   `$ make module-qtbase module-qtdeclarative [other modules]`  
   build の基本的なやり方については、以下の @task_jp さんの記事が参考になります。  
   https://qiita.com/task_jp/items/f0753c52c86a26928465  
5. 目的のQtアプリケーションについて、4.でビルドした qbase 下の qmake を実行する
6. 目的のQtアプリケーションについて、make を実行する
7. Web サーバ起動する
8. 目的のQtアプリケーションを Web 公開設定にする
9. ブラウザから、Web サーバのアプリケーション(URL)にアクセスする

うまくいくと、ブラウザ上にQtのロゴが表示され、数秒くらい Compiling中になり、アプリが起動します。

# Qt application ビルド後の生成ファイル例
参考までに、実際にビルド後に生成されたファイルの置き場を以下に示します。

gui_OpenGL: Qt WebAssembly の example をそのままビルドした結果です。
https://github.com/ynuma/gui_opengl.git

audioPlayer: 
[Qt Multimedia でやれる事＆実際に使ってみよう！！][1]で使用した音楽再生用アプリケーションです。
[1]:https://qiita.com/ynuma/items/9cf76e1a4a2a38d1fa48
https://github.com/ynuma/QtAudioPlayer-WebAssembly.git
ただし、アプリは起動するものの肝心の音楽は鳴りませんでした。
原因は調べ切れていません。

# 終わりに
Qt WebAssembly を実際に使ってみた感想としては、環境構築に手間がかかるという印象を持ちました。
情報もバージョンによって異なっていたりして、何が正しいのかを判断するのが難しいです。
また、音楽再生ができなかったことなど、ネイティブアプリと全く同じく動かすためには、時間と知識を要すると思いました。
それから、ブラウザ特有のセキュリティについても考慮すると、なんでもかんでもできるわけではなさそうです。
アプリが起動するまでのコンパイル時間が結構長いので、アプリの規模によっては本当にJavaScriptよりも早くなっているのか微妙な感じもしました。
と、いろいろ否定的な意見を書きましたが、c++ の Qt アプリ開発者でもさほど難しくなくWebアプリが作れるようになりますので、実用的には便利な機能かと思います。
また、未検証ですが、機械語ベースで実行されるので、Shared lib などがなくても動作するのではないか、と思っています。ユーザー環境に依存しなアプリが提供できるので、商用利用としては便利な気がします。
Qtのライセンスとしては、アプリケーション形式での提供となりますので、LGPLは利用できず、GPLか商用版になるかと思います。
その点には注意が必要かと思われます。

# 2018を振り返って
2018/12/25 が Qt Advent Calendar の最終日で、私の担当となっていましたが、総括については触れませんでした。
本稿が最終投稿となるので、ここで簡単に触れたいと思います。
私自身はQt勉強会にも参加せず、細かい状況はよくわからないのですが、Qtの開発は以前にも増してハイペースで行われているような感じに見えます。
その結果、ひと昔前のバージョンより、シンプルで使いやすくなった気がしました。
そして、本稿の機能も含めてまだまだ進化して行くのかと思われます。
あくまで推測ですが、皆様の地道な活動の成果で、少しずづQtの認知度も高まってきているような気がします。
（The Qt Company の活動についてはよくわかりませんが・・・）
2019もQtの利用が拡大するよう、皆様よろしくお願い致します。