Ubuntu上にQtのWebAssembly開発環境を構築する

# はじめに
Qtは１つのソースファイルでマルチプラットフォームに対応できる開発環境ですが、Qt5.13からはプラットフォームの１つとしてWebAssemblyが追加されています。ここではUbuntu上でWebAssembly開発を体験できる環境を作っていきます。
# インストール手順
### Ubuntuの準備
Ubuntuは18.04.5LTSを使っています。

https://releases.ubuntu.com/18.04.5/

#### 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をインストールします。

https://www.qt.io/download-qt-installer

![QtOnlineInstallWebsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/93897660-1c5c-6454-ce0e-7ab81cfc9c01.png)
「Qt Online Installer for Linux(64-bit)」リンクをクリックしてダウンロード。
![QtOnlineInstallDownloaded.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/79ee81a9-5afe-8fad-cd67-36e7855f06f8.png)
ターミナル画面より以下のコマンドを実行してインストーラーを起動します。

    chmod +x qt-unified-linux-x64-4.1.1-online.run
    sudo ./qt-unified-linux-x64-4.1.1-online.run
オンラインインストーラ画面が立ち上がるので、Qtアカウントにログインします。
![QtInstall001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/6d2479ae-0236-6561-9d23-e93ac43a213e.png)
Nextボタンで進んで、インストールするコンポーネントを選択します。WebAssemblyが含まれているのはQt5.13からなので、5.13以降のバージョンを選択してください。
![QtInstall004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/1b5563b3-2319-b331-c9a0-603e683d4d65.png)
インストール完了したら、Qt Creatorを起動してみます。

### Qtのライセンス解決
![QtLicenseDialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/ddbf20da-b12a-8dd2-4186-0f792866b578.png)
Qt Creatorを起動してライセンスのエラーダイアログが表示された場合には、下記のウェブサイトにログインしてライセンスを確認します。

https://account.qt.io/licenses

![スクリーンショット 2021-06-29 10.49.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/e51143d2-57c9-affa-d618-b98332042cbf.png)

「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です。

https://doc.qt.io/qt-5/wasm.html

インストール

	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を起動して上部「ツール」メニューから「オプション」を選択します
![スクリーンショット 2021-06-29 11.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/58e62538-1ddc-ee6d-787a-12cdce5f9e3b.png)
「デバイス」ペインの「WebAssembly」タブを選び、「参照」ボタンを押してEmscriptenをインストールしたディレクトリを選びます。

    /home/(ユーザー名)/emsdk

そのディレクトリ名の下に「Activated version: 1.39.8」と表示され、下段のテキストエリアに環境変数が表示されれば設定完了です。

### WebAssemblyプロジェクトの新規作成
Qt Creatorの「ファイル」メニューから「ファイル/プロジェクトの新規作成」を選びます。
Qt Widgets Applicationを選びます。
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/45a1b5b8-cb7d-2af6-1c23-3e4e439d0bfa.png)
プロジェクト名を入力して「次へ」ボタンを押して進んでいきます。ここではHelloWebAssemblyにしました。
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/3e50c4cc-9d81-5303-2b14-3e753bda5faa.png)
「キットの選択」画面でプロジェクトのビルドディレクトリを指定します。
![名称未設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/a8bb04f2-07a0-6583-38fc-d9df17693327.png)
デフォルトでは下記のようなディレクトリ名になっていますが

    build-HelloWebAssembly-Desktop_Qt_5_15_5_GCC_64bit-Debug

![名称未設定3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/d655de40-e1c6-ace2-1635-351b28fc7c3e.png)

これをプロジェクト名称だけに変更します。

    HelloWebAssembly

![名称未設定4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/3a7a0e79-6c4a-4637-a0ec-8daae8eece35.png)
Qt WebAssemblyの部分も同様に変更します。
![名称未設定5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/f15f9076-913a-543d-5d0f-0f342498bdc9.png)
「次へ」ボタンで進み、「完了」ボタンを押してプロジェクトを生成します。

### WebAssemblyプロジェクトのビルド＆ラン

#### Desktopビルド
Qt Creator画面の左下にあるビルド切り替えスイッチで「Desktop Qt」を選択してビルドし、実行します。
![名称未設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/6e36e7b9-1b6b-d298-8ea7-e1de13763306.png)
#### WebAssemblyビルド
Qt Creator画面の左下にあるビルド切り替えスイッチで「Qt WebAssembly」を選択してビルドし、実行します。
![名称未設定3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1839672/bb9800eb-ab0f-5597-9322-04b739c49215.png)

# WebAssemblyのデバッグ

ここまでの手順でビルドしたWebAssemblyアプリのデバッグ環境構築は次の記事をどうぞ。

https://qiita.com/AlohaYos/items/0fecff0840277eae4a8a