はじめに

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アプリのデバッグ環境構築は次の記事をどうぞ。