中村@アールテクニカ
アールテクニカの中村です。
Qtによるマルチプラットフォーム開発の2回目です。
前回は開発環境の構築まで行ったので、今回は実際にアプリを作成してみましょう。
プロジェクト作成
QT Creatorを起動したらメニューバーから「ファイル」→「ファイル/プロジェクトの新規作成」を選択し新規プロジェクトを作成を開始します。
テンプレートの選択
まず最初にテンプレートを選択します。
「Qt Quick Controls Application」は、QMLという独自言語でGUIレイアウトやロジックが記述でき、多様な解像度にも対応することも可能なプロジェクトです。
今回は、「Qt Quick Controls Application」を選択し次に進みます。
QMLとは
QMLはGUIのレイアウトを記述する言語です。GUIのロジック部分をJavascriptで記述することで高度なユーザインターフェースを実装することが可能です。
もちろん、C++のコードと連携することも可能です。
キットの選択
Qtでは開発対象OSやコンパイラなどの設定をまとめた構成をキットと呼びます。
すべてにチェックを入れて次へ進みます。
プロジェクトの説明
プロジェクト作成が完了すると以下のようなファイルが作成されます。
- 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のボタンが横並びかつ画面中央に配置される設定になっています。
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版のビルドが開始されます。ビルドが完了するとアプリが実行されます
Windowsの実行画面です。
2つのボタンが配置されたウィンドウが表示されます。
ボタンをクリックするとメッセージボックスが表示されます。
Android
次にAndroidの実行結果を確認してみましょう。
左サイドバーでAndroidを選択し実行ボタンをクリックします。
そうすると下記のダイアログが出るのでUSB接続された実機または仮想デバイスを選択してOKします。
Android実機(Nexus7 2013)
PC版アプリとは画面解像度が異なりますが、ボタンが画面中央にされています。
ボタンをクリックするとPC版と同じくメッセージが表示されます。
横向きに回転させてもボタンは自動で画面中央に配置されます。
Android仮想デバイス(Nexus 5)
仮想デバイスでは、Ctrl + F11で画面を回転出来ます。
Mac OSX
今度は開発環境をMac OSXに変えて確認してみましょう。
左サイドバーのPC/iOS/Androidのアイコンをクリックして実行対象を選択します。
まずは、Mac OSX版から実行してみましょう。
Windows版と同じようなウィンドウが開き、ボタンをクリックするとメッセージボックスが表示されます。
iOS
次にiOSで実行結果を確認してみましょう。
iOSでは実機用とシミュレータ用で別々のキットとなっています。
また、実機での実行にはApple Developer Programに登録し、プロビジョニングファイル(ワイルドカード)を作成しておく必要があります。
iOSシミュレータ
iphoneossimulatorを選択して実行します。
iOSでもAndroidと同じように表示でき、回転にも対応しています。
iOS実機
iOS実機をUSB接続したら、iphoneosを選択して実行します。
iOS実機でも問題なく動作しています。
これで一通りのプラットフォームで動作確認できました。
ボタンやメッセージボックス程度であれば問題なくマルチプラットフォーム・マルチスクリーンに対応できることがわかりました。
今回は何もコーディングしていませんでしたが、次回はC++でコーディングすることにします。
中村@アールテクニカ
アールテクニカのSE兼プログラマ。Web系のサーバサイド・フロントエンドからスマホ・PCのネイティブアプリまでソフトウェア開発全般が守備範囲。最近はハードウェア開発にも興味あり。