UI プロジェクトをアプリケーションに変換する

.qmlproject ファイルを持つプロジェクトを.pro ファイルを持つプロジェクトに変換します。

Qt Quick UI Prototype プロジェクトはユーザーインターフェースの作成に便利です。Qt Creator 、アプリケーション開発に使用するには、.qmlprojectを追加する必要があります：

• プロジェクト設定ファイル (CMakeLists.txt または.pro ファイル)
• C++コード (.cpp)
• リソースファイル
• アプリケーションをデバイスにデプロイするために必要なコード

QMLとC++の統合についての詳細は、「概要 - QMLとC++の統合」を参照してください。

Qt Design Studio を使用してプロジェクトを作成する方法の詳細については、Qt Design Studio ドキュメントを参照してください。ビルドシステムとして qmake を使用するには、Qt Creator ウィザードテンプレートを使用して、qmake ビルドシステムを使用してビルドされるQt Quick アプリケーションを作成し、Qt UI Quick プロジェクトからアプリケーションプロジェクトにソースファイルをコピーします。

プロジェクト設定ファイルのRESOURCES オプションを使用すると、すべての QML ファイルと関連アセットをQt リソースコレクションファイル (.qrc) に自動的に追加することができます。ただし、大きなファイルはバイナリにコンパイルするのではなく、外部バイナリリソースとして含める必要があります。

ウィザードは、必要なQMLインポートパスを指定するためのQML_IMPORT_PATH オプションをプロジェクトファイルに自動的に追加します。このパスが必要なのは、複数のサブディレクトリにQMLファイルがある場合だけです。

そして、メイン C++ ソースファイルのQQuickView クラスを使用することで、 アプリケーションの起動時にメインの QML ファイルを表示することができます。

Qt Design Studio をインストールすると、Qt Quick Studio Componentsモジュールがインストー ルされます。Qt Creator で編集するプロジェクトで、Qt Quick Studio Components またはモジュールの Effects を使用する場合は、モジュールをビルドして Qt にインストールし、プロジェクトをビルドできるようにする必要があります。詳細については、「Qt インストールにQt Quick Studio Components を追加する」を参照してください。

モジュールは、 をインストールしたときにインストールされます。 Qt Quick TimelineモジュールはQt Design Studio をインストールしたときにインストールされます。Qt Creator と Qt のみをインストールする場合は、Qt Quick Timeline モジュールも忘れずに選択してインストールしてください。Qt のバージョンが 5.14 より古い場合は、Qt Quick Timeline モジュールをビルドして Qt にインストールしないと、プロジェクトをビルドできません。

qmake プロジェクトへの変換

.qmlproject ファイルを持つプロジェクトを.pro ファイルを持つプロジェクトに変換するには：

1. File >New Project >Application (Qt) > を選択する。 Qt Quick Application>Choose を選択します。
2. Build system フィールドで、プロジェクトのビルドと実行に使用するビルド・システムとしてqmake を選択し、Next (macOS ではContinue ) を選択します。
3. ウィザードの指示に従ってプロジェクトを作成する。
4. ファイル・エクスプローラで、Qt Quick UIプロジェクト・ディレクトリからソース・ファイルをアプリケーション・プロジェクト・ディレクトリのサブディレクトリにコピーします。ここでは、このディレクトリをqml と呼びます。
5. アプリケーション・プロジェクト・ファイルを開き、RESOURCES オプションの値を編集して、以下の行を追加します：

   RESOURCES += \
       $$files(qml/*)

6. また、QML_IMPORT_PATH オプションの値を編集して、QML インポート・パスを指定します：

   QML_IMPORT_PATH = qml/imports

   qml/imports はインポートパスです。

7. Build にアクセスし、Run qmake を選択して、RESOURCES オプションをビルド構成に適用します。
8. main.cpp ファイルを開き、QQmlApplicationEngine オブジェクトをQQuickView オブジェクトに置き換えます：

       QQuickView view;
       view.engine()->addImportPath("qrc:/qml/imports");
       view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
       if (!view.errors().isEmpty())
           return -1;
       view.show();

   qrc:/qml/imports はインポートパス、qrc:/qml/ProgressBar.ui.qml はQt Quick UI プロジェクトのメイン QML ファイルへのパスとファイル名です。

9. Build にアクセスし、Run を選択してプロジェクトをビルドして実行します。

   注: モジュールに関するエラーメッセージが表示される場合は、「Qt インストールにQt Quick Studio コンポーネントを追加する」で説明する手順を実行してください。

例えば、Qt Design Studio にあるProgressBarサンプルのソース・ファイル（\share\qtcreator\examples\ProgressBar ディレクトリにあります）を空のQt Quick アプリケーション・プロジェクトにコピーし、必要な変更を加えると、main.cpp ファイルは次のようになります：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQuickView view;
    view.engine()->addImportPath("qrc:/qml/imports");
    view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
    if (!view.errors().isEmpty())
        return -1;
    view.show();

    app.exec();
}

大きなデータファイルの処理

UI で使用される画像、Effect、3D シーンなどの Graphical アセットは、UI のパフォーマンス問題の典型的な原因です。100MBの3Dモデルや64MBのテクスチャのような大きなアセットファイルを、バイナリにコンパイルするための.qrc ファイルに含めようとすると、アプリケーションのビルドでさえ膨大な量のメモリを必要とします。

まず、デザインの最適化と最適化された3Dシーンの作成で説明されているように、アセットを最適化してみてください。

大きなアセットは、ファイルシステムから直接ロードするか、Qt リソースシステムを動的に使用する必要があります。詳細はQt Resource System を参照してください。

Qt インストールへのQt Quick Studio コンポーネントの追加

Qt Design Studio 3.9 以降、Qt Design Studio で作成されたアプリケーションの一部として、Qt Quick Studio Components モジュールがデフォルトでインストールされます。 このモジュールを手動でインストールすることもできます。

モジュールを手動でインストールすることもできます：

1. モジュール・リポジトリーをクローンします。

   git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git

2. Qt Quick Studio Components モジュールをインストールします。

   mkdir build
   cd build
   cmake -GNinja -DCMAKE_INSTALL_PREFIX=<path_to_qt_install_directory> <path_to_qtquickdesigner-components>
   cmake --build .
   cmake --install .

   注: ここで、<path_to_qt_install_directory>と<path_to_qtquickdesigner-components>は、ローカル・ドライブ上の実際の場所に置き換える必要があります。たとえば、<path_to_qt_install_directory>は /Qt/6.3.0/msvc2019_64 、<path_to_qtquickdesigner-components>は ../qtquickdesigner-components/のようになります。