はじめに
Qtは１つのソースファイルでマルチプラットフォームに対応できる開発環境ですが、Qt5.13からはプラットフォームの１つとしてWebAssemblyが追加されています。ここではUbuntu上でWebAssembly開発を体験できる環境を作っていきます。
インストール手順
Ubuntuの準備
Ubuntuは18.04.5LTSを使っています。
Apacheの設定
Ubuntuのターミナル画面より以下のコマンドでApacheをインストールします。
sudo apt-get install apache2
WebAssemblyプログラム用のディレクトリを作成しておきます。
sudo mkdir /var/www/html/wasm
sudo chmod 777 /var/www/html/wasm
Qtのインストール
本家QtウェブサイトからオンラインインストーラーをダウンロードしてQt5をインストールします。
「Qt Online Installer for Linux(64-bit)」リンクをクリックしてダウンロード。
ターミナル画面より以下のコマンドを実行してインストーラーを起動します。
chmod +x qt-unified-linux-x64-4.1.1-online.run
sudo ./qt-unified-linux-x64-4.1.1-online.run
オンラインインストーラ画面が立ち上がるので、Qtアカウントにログインします。
Nextボタンで進んで、インストールするコンポーネントを選択します。WebAssemblyが含まれているのはQt5.13からなので、5.13以降のバージョンを選択してください。
インストール完了したら、Qt Creatorを起動してみます。
Qtのライセンス解決
Qt Creatorを起動してライセンスのエラーダイアログが表示された場合には、下記のウェブサイトにログインしてライセンスを確認します。
「Download Qt License」をクリックして qt-license.txt をダウンロードし、Ubuntuユーザーのホームディレクトリ（$HOME）にファイル名を「.qt-license」と変更して保存します。これでユーザー認証はOKです。
Pythonのインストール
UbuntuにはPython3がインストールされていますが、Emscriptenの動作にはPython2が必要です。ターミナル画面で以下のコマンドを実行し、インストールしておきます。
sudo apt-get install python
インストール後のバージョン確認
python
Emscriptenのインストール
UbuntuユーザーのホームディレクトリにEmscriptenインストーラーをダウンロードします。
Qtのバージョンによって対応するEmscriptenのバージョンは違ってきますのでQt本家サイトで確認してインストールします。QtバージョンQt5.15用のEmscriptenは1.39.8です。
インストール
cd ~/
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
git pull
./emsdk install 1.39.8
./emsdk activate 1.39.8
環境変数の設定
source ./emsdk_env.sh
設定手順
QtでのWebAssembly設定
Qt Creatorを起動して上部「ツール」メニューから「オプション」を選択します
「デバイス」ペインの「WebAssembly」タブを選び、「参照」ボタンを押してEmscriptenをインストールしたディレクトリを選びます。
/home/(ユーザー名)/emsdk
そのディレクトリ名の下に「Activated version: 1.39.8」と表示され、下段のテキストエリアに環境変数が表示されれば設定完了です。
WebAssemblyプロジェクトの新規作成
Qt Creatorの「ファイル」メニューから「ファイル/プロジェクトの新規作成」を選びます。
Qt Widgets Applicationを選びます。
プロジェクト名を入力して「次へ」ボタンを押して進んでいきます。ここではHelloWebAssemblyにしました。
「キットの選択」画面でプロジェクトのビルドディレクトリを指定します。
デフォルトでは下記のようなディレクトリ名になっていますが
build-HelloWebAssembly-Desktop_Qt_5_15_5_GCC_64bit-Debug
これをプロジェクト名称だけに変更します。
HelloWebAssembly
Qt WebAssemblyの部分も同様に変更します。
「次へ」ボタンで進み、「完了」ボタンを押してプロジェクトを生成します。
WebAssemblyプロジェクトのビルド＆ラン
Desktopビルド
Qt Creator画面の左下にあるビルド切り替えスイッチで「Desktop Qt」を選択してビルドし、実行します。
WebAssemblyビルド
Qt Creator画面の左下にあるビルド切り替えスイッチで「Qt WebAssembly」を選択してビルドし、実行します。
WebAssemblyのデバッグ
ここまでの手順でビルドしたWebAssemblyアプリのデバッグ環境構築は次の記事をどうぞ。