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

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

More than 1 year has passed since last update.

はじめに

大分遅くなりましたが、あけましておめでとうございます。
既に締め切りが過ぎているのですが、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 でやれる事&実際に使ってみよう!!で使用した音楽再生用アプリケーションです。

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の利用が拡大するよう、皆様よろしくお願い致します。

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