この記事は The Qt Blog の Qt for WebAssembly を翻訳したものです。
執筆: Lorn Potter, 2018年05月22日
Qt Project が Qt for WebAssembly テクノロジープレビューのベータ版をリリースしたニュースをご覧いただけましたでしょうか。
ウェブサーバーで配信した Qt をウェブブラウザ上で動かすために Emscripten を利用してコンパイルをしています。複数のプラットフォーム向けにコンパイルとデプロイをする代わりに、WebAssembly をサポートするすべてのブラウザむけのウェブサーバー向けにコンパイルとデプロイをするという発想です。これから事業を始める方で、様々なプラットフォームを持つ複数の顧客と仕事をする方は、Qt for WebAssembly で Qt もしくは Qt Quick のアプリをコンパイルすることで、デプロイを一度で済ませることが可能になります。
Qt for WebAssembly のビルド手順は Qt for WebAssembly の wiki ページ をご覧ください。まず初めに、emsdk compiler のダウンロードとセットアップが必要です。手順自体は極めて一般的です。これをクロスコンパイラとして利用します。
gdb が無いためデバッグは少々困難ですが、ブラウザのデバッガコンソールと同様に出力文が存在します（std::cout や qDebug()、printf）。Firefox では、about:config の “devtools.hud.loglimit.console” にてコンソールのログの制限を緩和する必要があるかもしれません。
ブレークポイントをセットするには、
EM_ASM({ debugger });
をコードに記述することでブラウザのデバッガが起動します。（#include <emscripten.h> をお忘れ無く）この場合、再コンパイルが必要になるのが微妙なところです。
すべてが完璧に動作しているわけではありませんが、実際に動作しているサンプルのスクリーンショットを掲載します。
QOpenGLWIndow は正常に動作し、60fps 近く出ています。現在は「フルスクリーン」のウィンドウのみの対応で、ブラウザのウィンドウいっぱいに広がって表示されます。QOpenGLWidget はまだいくつかの問題を抱えています。何かしら問題のあるシェーダーが存在しているようです。
Emscripten は OpenGL の呼び出しを WebGL に変換するため、デスクトップ版、組み込み版ともに制限があります。
Qt Base と QtDeclarative の ‘wip/webassembly’ ブランチ以外にも、以下のモジュールの動作を確認しています。
QtMqtt を利用する場合は、QtMqtt モジュールの websocketsubscription のサンプルに含まれる WebSocketIODevice クラスを自分のアプリに移植する必要があります。
モバイル（やラップトップ）での画面を縦や横といった向きの変更を扱うための QtSensors のバックエンドのマージリクエストとしてコンパイルだけ確認をしたものが存在しますが、テスト自体はまだ為されていません。
JavaScript と WebAssembly にはスレッドが一つしかないため、QtDeclarative は１つのスレッドで動作するようになっています。
QtCharts, QtGraphicalEffects, QtQuickControls, QtQuickControls2 は変更なしで動作しました。
クリップボードのサポートに関するマージリクエストが存在しますが、現時点ではまだ完璧ではありません。単純なテキストのみ対応しています。