アールテクニカ地下ガレージ

アールテクニカ株式会社の製品開発・研究開発・日々の活動です

Qtによるマルチプラットフォーム開発【GUIアプリ作成編】

Author

中村@アールテクニカ

アールテクニカの中村です。
Qtによるマルチプラットフォーム開発の2回目です。
前回は開発環境の構築まで行ったので、今回は実際にアプリを作成してみましょう。

プロジェクト作成

QT Creatorを起動したらメニューバーから「ファイル」→「ファイル/プロジェクトの新規作成」を選択し新規プロジェクトを作成を開始します。

テンプレートの選択

まず最初にテンプレートを選択します。
「Qt Quick Controls Application」は、QMLという独自言語でGUIレイアウトやロジックが記述でき、多様な解像度にも対応することも可能なプロジェクトです。
今回は、「Qt Quick Controls Application」を選択し次に進みます。

f:id:artteknika_nakamura:20160420175351p:plain:w500

QMLとは

QMLはGUIのレイアウトを記述する言語です。GUIのロジック部分をJavascriptで記述することで高度なユーザインターフェースを実装することが可能です。
もちろん、C++のコードと連携することも可能です。

キットの選択

Qtでは開発対象OSやコンパイラなどの設定をまとめた構成をキットと呼びます。
すべてにチェックを入れて次へ進みます。
f:id:artteknika_nakamura:20160420175715p:plain:w500

プロジェクトの説明

プロジェクト作成が完了すると以下のようなファイルが作成されます。
f:id:artteknika_nakamura:20160420194008p:plain

  • MyApp.pro … プロジェクトファイル
  • deployment.pri … デプロイ設定ファイル
  • main.cpp … メインのC++ファイル
  • main.qml … メインウィンドウのQMLファイル
  • MainForm.ui.qml … UIレイアウトのQMLファイル

メイン関数

一般的なC/C++アプリと同じようにまず最初にmain関数が実行されます。
main関数の中では、main.qmlをロードしています。

QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

UIエディタ

MainForm.ui.qmlをダブルクリックすると、UIエディタが開きます。
初期状態でボタンが2つ配置されているのがわかります。
RowLayoutで2tのボタンが横並びかつ画面中央に配置される設定になっています。
f:id:artteknika_nakamura:20160420194512p:plain

UIイベント処理

main.qmlには、ウィンドウのサイズやタイトルの設定のほかに、ボタンがクリックされた時の処理が記述されています。
初期状態では固定のメッセージを表示するようになっています。
ロジックの記述にはJavascriptが使用できます。

    MainForm {
        anchors.fill: parent
        button1.onClicked: messageDialog.show(qsTr("Button 1 pressed"))
        button2.onClicked: messageDialog.show(qsTr("Button 2 pressed"))
    }

    MessageDialog {
        id: messageDialog
        title: qsTr("May I have your attention, please?")

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }

ビルドと実行

ひとまず初期状態のプロジェクトのままでビルドと実行をしてみましょう。
左サイドバー下側のPCまたはAndroid/iOSのアイコンをクリックすると、ビルドするプラットフォームが選択できます。
まず最初にWindowsの開発環境で確認してみましょう。

Windows

Desktopを選択し緑の三角の実行ボタンをクリックするとPC版のビルドが開始されます。ビルドが完了するとアプリが実行されます

f:id:artteknika_nakamura:20160420181149p:plain

Windowsの実行画面です。
2つのボタンが配置されたウィンドウが表示されます。
ボタンをクリックするとメッセージボックスが表示されます。

f:id:artteknika_nakamura:20160420182316p:plain:w300:left

f:id:artteknika_nakamura:20160420182325p:plain:w300:left

Android

次にAndroidの実行結果を確認してみましょう。
左サイドバーでAndroidを選択し実行ボタンをクリックします。
そうすると下記のダイアログが出るのでUSB接続された実機または仮想デバイスを選択してOKします。
f:id:artteknika_nakamura:20160421124530p:plain:h350

Android実機(Nexus7 2013)

PC版アプリとは画面解像度が異なりますが、ボタンが画面中央にされています。
ボタンをクリックするとPC版と同じくメッセージが表示されます。
横向きに回転させてもボタンは自動で画面中央に配置されます。

f:id:artteknika_nakamura:20160422122541p:plain:w160:left

f:id:artteknika_nakamura:20160422122548p:plain:w160:left

f:id:artteknika_nakamura:20160422122552p:plain:h160:left


Android仮想デバイス(Nexus 5)

仮想デバイスでは、Ctrl + F11で画面を回転出来ます。

f:id:artteknika_nakamura:20160421143941p:plain:h300:left

f:id:artteknika_nakamura:20160421144214p:plain:h300:left

f:id:artteknika_nakamura:20160421135918p:plain:w300:left


Mac OSX

今度は開発環境をMac OSXに変えて確認してみましょう。
左サイドバーのPC/iOS/Androidのアイコンをクリックして実行対象を選択します。
f:id:artteknika_nakamura:20160421200557p:plain

まずは、Mac OSX版から実行してみましょう。
Windows版と同じようなウィンドウが開き、ボタンをクリックするとメッセージボックスが表示されます。

f:id:artteknika_nakamura:20160421191239p:plain:w300:left

f:id:artteknika_nakamura:20160421191854p:plain:w300:left


iOS

次にiOSで実行結果を確認してみましょう。
iOSでは実機用とシミュレータ用で別々のキットとなっています。
また、実機での実行にはApple Developer Programに登録し、プロビジョニングファイル(ワイルドカード)を作成しておく必要があります。

iOSシミュレータ

iphoneossimulatorを選択して実行します。
iOSでもAndroidと同じように表示でき、回転にも対応しています。

f:id:artteknika_nakamura:20160421194819p:plain:h300:left

f:id:artteknika_nakamura:20160421194529p:plain:h300:left

f:id:artteknika_nakamura:20160421194526p:plain:w300:left

iOS実機

iOS実機をUSB接続したら、iphoneosを選択して実行します。
iOS実機でも問題なく動作しています。

f:id:artteknika_nakamura:20160421200924p:plain:h300:left

f:id:artteknika_nakamura:20160421200930p:plain:h300:left

f:id:artteknika_nakamura:20160421200927p:plain:w300:left



これで一通りのプラットフォームで動作確認できました。
ボタンやメッセージボックス程度であれば問題なくマルチプラットフォーム・マルチスクリーンに対応できることがわかりました。

今回は何もコーディングしていませんでしたが、次回はC++でコーディングすることにします。


Author

中村@アールテクニカ

アールテクニカのSE兼プログラマ。Web系のサーバサイド・フロントエンドからスマホ・PCのネイティブアプリまでソフトウェア開発全般が守備範囲。最近はハードウェア開発にも興味あり。

スポンサーリンク