Web Analytics

こつこつエンジニア

現役アプリ開発者によるIT系特化ブログ

Qtでクロスプラットフォーム開発をしてみよう!【Windows導入編】

f:id:madai21:20210801231731j:plain

はじめに

皆さんQtをご存じでしょうか?
QtとはWindowsMacLinuxなどマルチプラットフォームで同じプログラムコードで動作させることのできるクロスプラットフォームアプリケーションフレームワークです。
このQtをWindowsLinux Ubuntu(AWS)それぞれに導入して、WindowsLinux Ubuntuの両方でHello Worldを表示するプログラムを作成してみたいと思います。
※Winodws編とLinux Ubuntu(AWS)編の2回に分けて記事を書きます。
 今回はWindowsとなります。

環境

以下をすべて用意していることを前提とします。

C++によるデスクトップ開発の機能を使用します。
もし、インストール時に機能を入れていなければVisual Studio InstallerからVisual Studio Community 2019の変更でこれらの機能をインストールしておいて下さい。

手順

  1. Qt Creatorをダウンロード
  2. Qtをインストール
  3. Qt CreatorでHelloWorldアプリケーションを作成

1. Qt Creatorをダウンロード

Qtには商用版とオープンソース版(LGPL)があります。
LGPLを使用したいと思います。
以下の場所にアクセスします。
www.qt.io
Download the Qt Online Installerを押します。
f:id:madai21:20210801233856p:plain
Downloadを押すと、「qt-unified-windows-x86-X.X.X-online.exe」のダウンロードを開始します。
f:id:madai21:20210801234048p:plain

2. Qtをインストール

ダウンロードした「qt-unified-windows-x86-X.X.X-online.exe」を起動しましょう。
初めての場合はアカウントがないと思うので、Don't have Qt account?の右横のSign upの個所を押します。
f:id:madai21:20210801234312p:plain
上から新規作成するQtアカウントで使用するユーザー名(メールアドレス)、パスワード、パスワードの確認を順次入力します。
サービス規約に同意した場合はI accept the service terms.のチェックボックスをONにします。
その後Nextボタンを押します。
f:id:madai21:20210801234442p:plain
メールアドレス宛にQt Account email verification neededというタイトルのメールが届きます。
届いたメールのVerify now:に記載のURLをクリックすると以下の画面がブラウザで表示されるので順次入力してConfirmを押します。
f:id:madai21:20210801234943p:plain
アカウントログインできると先に進めますので
上に記載のGPLのobligationsに納得出来たらI have read and approve the obligations of using open source qt のチェックボックスをONにします。
個人ユーザーであればI am an indivisual person not Qt for any companyのチェックボックスをONにします。
f:id:madai21:20210801234952p:plain
Nextボタンを押します。
f:id:madai21:20210802000741p:plain
統計情報を送信してQt Creatorの改善に協力するなら上を選択し、送信させたくない場合は下を選択します。
Nextボタンを押しましょう。
f:id:madai21:20210802000822p:plain
インストール先を入力し、Custom Installationにチェックをします。
Qt関連の拡張子を関連付けしたい場合はAssociate common file types with Qt Creatorにチェックします。
Nextボタンを押します。
f:id:madai21:20210802001533p:plain
Qt5.12.11のMSVC 2017 64-bitにチェックし、
Qt Charts/Qt Data Visualization/Qt Purchasing/Qt WebEngine/Qt Network Authorization/Qt WebGL Streaming Pluginにもチェックしておきましょう。
f:id:madai21:20210802001840p:plain
Developer and Designer ToolsのQt Creator 4.15.2 CDB Debuggerにチェックします。
Nextボタンを押します。
f:id:madai21:20210802002252p:plain
ライセンス承諾した場合にチェックをし、Nextボタンを押します。
f:id:madai21:20210802002443p:plain
Nextボタンを押します。
f:id:madai21:20210802002548p:plain
Installボタンを押すとインストール開始します。
f:id:madai21:20210802002630p:plain
しばらくするとインストール完了するのでFinishボタンを押して終了します。
f:id:madai21:20210802002730p:plain

3. Qt CreatorでHelloWorldアプリケーションを作成

インストール完了後に以下のような画面のQt Creatorが起動していると思います。
f:id:madai21:20210802003022p:plain
HelloWord表示用のプロジェクトを新規作成します。
Newボタンを押しましょう。
f:id:madai21:20210802003102p:plain
Application(Qt)→Qt Widgets Applicationの順に選び選択ボタンを押します。
f:id:madai21:20210802003223p:plain
名前を「HelloWorld」と入力し、次へを押します。
f:id:madai21:20210802003343p:plain
qmakeを選択し、次へを押します。
f:id:madai21:20210802003433p:plain
次へを押します。
f:id:madai21:20210802003516p:plain
Japanese(Japan)を選択し、次へを押します。
f:id:madai21:20210802003546p:plain
次へを押します。
f:id:madai21:20210802003631p:plain
完了を押します。
f:id:madai21:20210802003711p:plain
これでプロジェクト作成できました。
Formsからmainwindow.uiをダブルクリックし編集していきます。
f:id:madai21:20210802003744p:plain
Labelをウィンドウ上にドラッグ&ドロップします。
f:id:madai21:20210802003913p:plain
次にmainwindow.cppをを開いて以下の内容に編集します。

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->label->setText("Hello World!");
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

タイトルバーのビルドから実行を押して実行してみましょう。
※実行を押すとqmake→make→生成したアプリの実行を順次行います。
qmakeMakefileを自動生成してくれます。
f:id:madai21:20210802004400p:plain
こんな画面が表示されたらOKです^^
f:id:madai21:20210802004441p:plain

おわりに

今回はWindows版のQt CreatorをインストールしWindowsHello Worldを表示させるプログラムを作成しました。
次回はAWSを使ってLinux Ubuntuで同じプログラムをLinux版のQt CreatorでビルドさせてHello Worldを表示させるようにしてみたいと思います。