Qt for Android の入門

このチュートリアルでは、Qt Creator を使用して、Android デバイス向けのQt Quick アプリケーションを開発する方法について説明します。

加速度センサーの値の変化に基づいて SVG (Scalable Vector Graphics) 画像を加速表示するQt Quick アプリケーションを開発します。

開発環境のセットアップ

Qt for Android を始めるには：

1. Qtをダウンロードしてインストールします。これを行うには、「Qtの入手とインストール」ページの手順に従ってください。
2. 「Qt for Android の前提条件」の説明に従って、必要なツールをすべてインストールし、開発環境を設定します。

プロジェクトの作成

1. Qt Creator を開きます。「File 」＞「New Project 」＞「Application (Qt) 」＞ Qt Quick Application」に進みます。

   

2. 「Choose... 」を選択して、「Project Location 」ダイアログを開きます。
3. 「Name 」で、アプリケーションの名前を入力します。

   

4. 「Create in 」で、プロジェクトファイルのパスを入力します。プロジェクトフォルダは後で問題なく移動できます。
5. 「Next 」（macOS では「Continue 」）を選択して、「Define Project Details 」ダイアログを開きます。

   

6. 「Next 」（macOS では「Continue 」）を選択して、「Kit Selection 」ダイアログを開きます。
7. アプリケーションをビルドする対象となるプラットフォームのキットを選択します。

   

   注: このリストには 、「Preferences 」 > 「Kits 」で指定したキットが表示されます。詳細については、「キットの追加」および「キットの管理」を参照してください。

8. 「Next 」（macOS では「Continue 」）を選択して、「Project Management 」ダイアログを開きます。
9. プロジェクト設定を確認し、「Finish 」（macOS では「Done 」）を選択してプロジェクトを作成します。

   

リソースとして画像を追加する

アプリケーションのメインビューには、デバイスを傾けると画面上を動き回る SVG のバブル画像が表示されます。

アプリケーションの実行時にこの画像を表示するには、ウィザードによって自動生成されたCMakeLists.txt ファイル内のqt_add_qml_module() メソッドのRESOURCES 引数で、その画像をリソースとして指定する必要があります。

qt_add_qml_module(appaccelbubble
    URI accelbubble
    QML_FILES Main.qml
    RESOURCES Bluebubble.svg
)

Accelbubble メインビューの作成

1. Projects ビューで、Main.qml を選択します。Main.qml ファイル内の内容を、次のコードに置き換えます：

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       }
   
   }

   このコードは、Window のデフォルトのプロパティを変更し、先ほど追加した画像をビューに追加します。代わりに、他の画像やコンポーネントを使用することも可能です。

2. メインウィンドウの幅と高さに合わせて画像を配置するために、カスタムプロパティを追加します:

   import QtQuick
   import QtQuick.Controls.Material
   
   ApplicationWindow {
       id: mainWindow
       width: 320
       height: 480
       visible: true
       title: qsTr("Accelerate Bubble")
       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
           property real centerX: mainWindow.contentItem.width / 2
           property real centerY: mainWindow.contentItem.height / 2
           property real bubbleCenter: bubble.width / 2
           x: centerX - bubbleCenter
           y: centerY - bubbleCenter
       }
   
   }

3. 次のインポート文を追加します：

   import QtSensors

   これは、加速度センサーの値に基づいてバブルを移動させたい場合に必要となります。

4. Accelerometer コンポーネントと必要なプロパティを追加してください：

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
           dataRate: 100
           active: true
       }
       ...

5. 現在の加速度センサーの値に基づいてバブルのx座標とy座標を計算する、以下のJavaScript関数を追加します：

   import QtQuick
   import QtQuick.Controls.Material
   import QtSensors
   ApplicationWindow {
       id: mainWindow
       ...
       Accelerometer {
           id: accel
       ...
       }
       function calcPitch(x,y,z) {
           return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
       }
       function calcRoll(x,y,z) {
           return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
       }
       ...

6. 加速度センサーコンポーネントのonReadingChanged シグナルに対して、加速度センサーの値が変化した際にバブルが動くように、以下のJavaScriptコードを追加します:

       Accelerometer {
           id: accel
           dataRate: 100
           active: true
           onReadingChanged: {
               var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
               var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
   
               if (isNaN(newX) || isNaN(newY))
                   return;
   
               if (newX < 0)
                   newX = 0
   
               if (newX > mainWindow.contentItem.width - bubble.width)
                   newX = mainWindow.contentItem.width - bubble.width
   
               if (newY < 0)
                   newY = 0
   
               if (newY > mainWindow.contentItem.height - bubble.height)
                   newY = mainWindow.contentItem.height - bubble.height
   
               bubble.x = newX
               bubble.y = newY
           }
       }

   バブルの位置が常に画面の範囲内にあるようにする必要があります。加速度センサーが数値以外の値（NaN）を返した場合、その値は無視され、バブルの位置は更新されません。

7. バブルのx およびy プロパティにSmoothedAnimation の挙動を追加することで、動きをより滑らかに見せることができます。

       Image {
           id: bubble
           source: "Bluebubble.svg"
           smooth: true
       ...
           Behavior on y {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
           Behavior on x {
               SmoothedAnimation {
                   easing.type: Easing.Linear
                   duration: 100
               }
           }
       ...

デバイスの向きを固定する

デフォルトでは、デバイスの向きが縦向きと横向きの間で切り替わると、表示も回転します。画面の向きを縦向きに固定すると、このアプリケーションの見栄えが良くなります。

Androidでは、Qt Creator で生成したAndroidManifest.xml ファイルで画面の向きを設定します。画面の向きを縦向きに固定するには：

1. Tools >Android >Manifest XML Source に移動します。Qt Creator を実行すると、プロジェクトディレクトリ内のandroidディレクトリにファイルが生成され、マニフェストエディタで開かれます。
2. マニフェストエディタで、XML Source を選択し、activity 要素のandroid:screenOrientation 属性をportrait に設定します。

   <?xml version='1.0'?>
   <manifest ...>
       <supports-screens.../>
       <!--%%INSERT_PERMISSIONS-->
       <!--%%INSERT_FEATURES-->
       <application ...>
           <activity ... android:screenOrientation="portrait">
       ...

   詳細については、「Android マニフェストファイルの編集」を参照してください。

依存関係の追加

このアプリケーションは `Qt Sensors ` および `Qt SVG ` モジュールを使用するため、これらを `CMakeLists.txt ` ファイルに依存関係として追加する必要があります。依存関係を追加するには：

1. `find_package ` 関数に `Sensors ` および `Svg ` コンポーネントを追加します。これにより、CMake は Qt のインストール場所を検索し、モジュールをインポートするようになります:

   find_package(Qt6 REQUIRED COMPONENTS Quick Sensors Svg)

2. インポートされたターゲットを `target_link_libraries ` 関数に追加します:

   target_link_libraries(appaccelbubble
       PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg)

   これにより、accelbubble 実行ファイルがこれらのモジュールを使用していることがCMakeに伝えられます。その後、CMakeはリンカーに必要な引数を渡し、C++コンパイラには適切なインクルードディレクトリとコンパイラ定義を渡します。

3. 設定の変更を適用するには、Build に移動し、Run CMake を選択します。

CMakeLists.txt ファイルの詳細については、『CMake の始め方』を参照してください。

アプリケーションの実行

これで、アプリケーションを実機または仮想の Android デバイスにデプロイできます。

実機を使用する場合：

1. Android デバイスでUSB デバッグを有効にします。
2. デバイスを開発用PCに接続します。

複数のデバイスが接続されている場合、Qt Creator を使用して、アプリケーションを実行するデバイスを選択できます。

デバイス上でアプリケーションを実行するには、Ctrl+R（Cmd+R）を押します。

デバイス上でアプリケーションが起動したら、デバイスを傾けて、画面上を動くバブルを確認できます。バブルは傾けた方向に移動し、移動速度は傾き角度によって決まります。デバイスを強く傾けるほど、バブルの移動速度は速くなります。