チュートリアルモバイルアプリケーション

このチュートリアルでは、Qt の最小バージョンとして Qt 6 を使用し、ビルドシステムとして CMake を使用する場合に、Qt Creator を使用して Android および iOS デバイス用のQt Quick アプリケーションを開発する方法について説明します。

このチュートリアルでは、加速度センサーの値の変化に基づいて SVG（スケーラブル・ベクター・グラフィックス）画像を高速化するQt Quick アプリケーションを開発します。

開発環境のセットアップ

モバイルデバイス用にアプリケーションをビルドし、モバイルデバイス上で実行するには、デバイスプラットフォーム用の開発環境をセットアップし、Qt Creator とモバイルデバイス間の接続を設定する必要があります。

Android デバイス向けに開発するには、「Android 向けの開発」の説明に従って、Qt for Android をインストールし、開発環境をセットアップする必要があります。

iOS デバイスを開発するには、Xcode をインストールし、デバイスを設定します。このためには、Apple の開発者アカウントと、Apple から発行される iOS Developer Program 証明書が必要です。詳細については、Developing for iOS を参照してください。

プロジェクトを作成する

1. File >New Project >Application (Qt) > に移動します。 Qt Quick Application.

   

2. Choose を選択し、Project Location ダイアログを開きます。
3. Name に、アプリケーションの名前を入力します。自分のプロジェクトに名前を付ける場合、後で簡単に名前を変更できないことに注意してください。
4. Create in に、プロジェクトファイルのパスを入力します。後でプロジェクトフォルダを移動しても問題ありません。
5. Next を選択すると、Define Project Details ダイアログが開きます。

   

6. Kit Selection ダイアログを開くには、Next を選択します。
7. アプリケーションをビルドするプラットフォームの Qt 6.5 以降のキットを選択します。モバイルデバイス用のアプリケーションを構築するには、Android と iOS 用のキットも選択します。

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

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

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

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

アプリケーションの実行時に画像を表示するには、ウィザードが作成したCMakeLists.txt ファイルのRESOURCES セクションでリソースとして指定する必要があります：

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

Accelbubble メインビューの作成

Bluebubble.svg をソースとしてImageコンポーネントを追加して、main.qml ファイルにメインビューを作成します：

    Image {
        id: bubble
        source: "Bluebubble.svg"
        smooth: true

他の画像やコンポーネントを使用することもできます。

メインウィンドウの幅と高さに対して画像を配置するカスタムプロパティを追加します：

        property real centerX: mainWindow.width / 2
        property real centerY: mainWindow.height / 2
        property real bubbleCenter: bubble.width / 2
        x: centerX - bubbleCenter
        y: centerY - bubbleCenter

加速度センサーの値に基づいてバブルを動かすコードを追加します。まず、以下のimport文を追加します：

import QtSensors

必要なプロパティを持つAccelerometer コンポーネントを追加します：

    Accelerometer {
        id: accel
        dataRate: 100
        active:true

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

    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;
    }

加速度センサーの値が変化したときにバブルが動くように、加速度センサーコンポーネントのonReadingChanged シグナル用に以下の JavaScript コードを追加する：

        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.width - bubble.width)
                newX = mainWindow.width - bubble.width

            if (newY < 18)
                newY = 18

            if (newY > mainWindow.height - bubble.height)
                newY = mainWindow.height - bubble.height

                bubble.x = newX
                bubble.y = newY
        }

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

バブルのx とy プロパティにSmoothedAnimation ビヘイビアを追加して、バブルの動きをより滑らかに見えるようにします。

        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 で指定します。詳細については、「マニフェスト ファイルの編集」を参照してください。

マニフェスト ファイルを生成して使用するには、CMakeLists.txtファイルで Android パッケージ ソース ディレクトリQT_ANDROID_PACKAGE_SOURCE_DIR を指定する必要があります：

set_property(TARGET appaccelbubble APPEND PROPERTY
    QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
)

3.19 より古い CMake バージョンとの互換性のために、qt_add_executable 関数に手動最終化ステップを追加します：

qt_add_executable(appaccelbubble
    main.cpp
    MANUAL_FINALIZATION
)

次に、qt_finalize_executable 関数を追加します：

qt_finalize_executable(appaccelbubble)

iOSでは、CMakeLists.txt ファイルで指定したMACOSX_BUNDLE_INFO_PLIST 変数の値として、Info.plist ファイルでデバイスの向きをロックできます：

set_target_properties(appaccelbubble PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE_INFO_PLIST "${CMAKE_CURRENT_SOURCE_DIR}/Info.plist"
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

依存関係の追加

プロジェクトファイルの依存関係を指定することで、アプリケーションに必要な Qt モジュールをビルドシステムに伝える必要があります。Projects を選択して、CMake の設定を以下の Qt モジュール情報で更新します：Sensors Svg Xml 。

CMakeLists.txt ファイルには、Qt インストールを検索し、アプリケーションに必要なQt Sensors,Qt SVG,Qt XML モジュールをインポートするように CMake に指示する以下のエントリが必要です：

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Sensors Svg Xml)

また、ターゲット・リンク・ライブラリのリストにQtモジュールを追加する必要があります。target_link_libraries は、上記のfind_package() 呼び出しによってインポートされたターゲットを参照することで、accelbubble 実行ファイルがQt Sensors,Qt SVG,Qt XML モジュールを使用することを CMake に伝えます。これにより、リンカに必要な引数が追加され、適切なインクルード・ ディレクトリとコンパイラ定義がC++コンパイラに渡されるようになります。

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

依存関係を追加したら、Build にアクセスし、Run CMake を選択して構成変更を適用します。

CMakeLists.txt ファイルの詳細については、Getting started with CMake を参照してください。

アプリケーションの実行

これでアプリケーションをデバイスにデプロイすることができます：

1. Android デバイスではUSB デバッグを、iOS デバイスでは開発者モードを有効にします。
2. デバイスを開発用PCに接続します。

   Android v4.2.2を実行しているデバイスを使用している場合、PCからのUSBデバッグを許可するために接続を確認するプロンプトが表示されるはずです。デバイスを接続するたびにこのようなプロンプトが表示されないようにするには、Always allow from this computer を選択し、OK を選択します。

3. デバイス上でアプリケーションを実行するには、Ctrl+Rを選択します。

ファイル

• accelbubble/Bluebubble.svg
• accelbubble/CMakeLists.txt
• accelbubble/main.qml