チュートリアル:Qt Widgets アプリケーション

このチュートリアルでは、Qt Creator を使って小さな Qt アプリケーション Text Finder を作成する方法を説明します。これはQt UI Tools Text Finder の例の簡略版です。Qt Widgets Qt Designer を使って Qt ウィジェットからアプリケーションのユーザーインターフェイスを構築し、コードエディターを使って C++ でアプリケーションのロジックを記述します。

Text Finder プロジェクトを作成する

1. File >New Project >Application (Qt) > にアクセスします。 Qt Widgets Application.

   

2. Choose を選択してProject Location ダイアログを開きます。

   

3. Name にTextFinder と入力します。
4. Create in に、プロジェクト・ファイルのパスを入力します。例えば、C:\Qt\examples 。
5. Next （Windows および Linux の場合）またはContinue （macOS の場合）を選択して、Define Build System ダイアログを開きます。

   

6. Build system で、プロジェクトのビルドに使用するビルド・システムとしてCMakeを選択します。
7. Next またはContinue を選択して、Class Information ダイアログを開きます。

   

8. Class name で、クラス名としてTextFinderと入力します。
9. Base class で QWidgetを選択します。

   注: Header file 、Source file 、Form file は、クラス名に合わせて自動的に更新されます。

10. Next またはContinue を選択して、Translation File ダイアログを開きます。

    

11. Language では、アプリケーションを翻訳する予定の言語を選択できます。これでアプリケーションのローカリゼーション・サポートが設定されます。プロジェクトファイルを編集することで、後で他の言語を追加することができます。
12. Next またはContinue を選択して、Kit Selection ダイアログを開きます。

    

13. プロジェクトのビルドと実行キットを選択します。
14. Next またはContinue を選択して、Project Management ダイアログを開きます。

    

15. プロジェクトの設定を確認し、Finish （WindowsおよびLinuxの場合）またはDone （macOSの場合）を選択してプロジェクトを作成します。

TextFinder プロジェクトには以下のファイルがあります：

• main.cpp
• textfinder.h
• textfinder.cpp
• textfinder.ui
• CMakeLists.txt

.h と.cpp ファイルには、必要なボイラープレートコードが含まれています。

ビルドシステムとして CMake を選択した場合は、Qt Creator がCMakeLists.txt プロジェクトファイルを作成します。

足りない部分を補う

ユーザーインターフェースの設計から始め、足りないコードを埋めていきます。最後に、検索機能を追加します。

ユーザーインターフェースの設計

1. Edit モードで、Projects ビューのtextfinder.ui ファイルをダブルクリックして、統合されたQt Widgets Designer を起動します。
2. 以下のウィジェットをフォームにドラッグします：
   • Label (QLabel)
   • Line Edit (QLineEdit)
   • Push Button (QPushButton)

   

   注: ウィジェットを簡単に見つけるには、Widget Box の上部にある検索ボックスを使用します。例えば、Label ウィジェットを見つけるには、label という単語を入力します。

   

3. Label ウィジェットをダブルクリックし、Keyword と入力します。
4. Push Button ウィジェットをダブルクリックし、テキストFind を入力します。
5. Property Editor ビューで、objectName をfindButton に変更します。

   

6. Ctrl+A（またはCmd+A）を選択してウィジェットを選択し、Lay out Horizontally （LinuxまたはWindowsではCtrl+H、macOSではCtrl+Shift+H）を選択して水平レイアウト（QHBoxLayout ）を適用します。

   

7. Text Edit ウィジェット (QTextEdit) をフォームにドラッグします。
8. スクリーン・エリアを選択し、Lay out Vertically （またはCtrl+L）を選択して垂直レイアウト（QVBoxLayout ）を適用する。

   

   水平レイアウトと垂直レイアウトを適用することで、アプリケーションの UI がさまざまな画面サイズに対応します。

9. ユーザーがFind ボタンを選択したときに find 関数を呼び出すには、Qt のシグナルとスロットのメカニズムを使用します。シグナルは特定のイベントが発生したときに発せられ、スロットは特定のシグナルに応答して呼び出される関数です。Qt Widgets には定義済みのシグナルとスロットがあり、Qt Widgets Designer から直接使用できます。find関数のスロットを追加するには
   • Find ボタンを右クリックしてコンテキストメニューを開きます。
   • Go to Slot >clicked() を選択し、OK を選択します。

     これにより、プライベート・スロットon_findButton_clicked() がヘッダー・ファイルtextfinder.h に追加され、プライベート関数TextFinder::on_findButton_clicked() がソース・ファイルtextfinder.cpp に追加されます。

10. Ctrl+S(またはCmd+S) を選択して変更を保存します。

Qt Widgets Designer でのフォーム設計の詳細については、Qt Widgets Designer Manual を参照してください。

ヘッダーファイルの完成

textfinder.h ファイルには、必要な #include、コンストラクタ、デストラクタ、およびUi オブジェクトがすでに含まれています。入力テキスト・ファイルの内容をQTextEdit に読み込んで表示するには、loadTextFile() というプライベート関数を追加する必要があります。

1. Edit モードのProjects ビューで、textfinder.h ファイルをダブルクリックして編集用に開きます。
2. Ui::TextFinder ポインタの後、private セクションにプライベート関数を追加します：

   private slots:
       void on_findButton_clicked();
   
   private:
       Ui::TextFinder *ui;
       void loadTextFile();

ソース・ファイルの完成

ヘッダー・ファイルが完成したので、ソース・ファイルtextfinder.cpp に移ります。

1. Edit モードのProjects ビューで、textfinder.cpp ファイルをダブルクリックして、編集用に開きます。
2. QFile でテキスト・ファイルを読み込み、QTextStream で読み込み、QTextEdit::setPlainText() でtextEdit に表示するコードを追加する：

   void TextFinder::loadTextFile()
   {
       QFile inputFile(":/input.txt");
       inputFile.open(QIODevice::ReadOnly);
   
       QTextStream in(&inputFile);
       QString line = in.readAll();
       inputFile.close();
   
       ui->textEdit->setPlainText(line);
       QTextCursor cursor = ui->textEdit->textCursor();
       cursor.movePosition(QTextCursor::Start, QTextCursor::MoveAnchor, 1);
   }

3. QFile とQTextStream を使用するには、次の #includes をtextfinder.cpp に追加する：

   #include "./ui_textfinder.h"
   #include <QFile>
   #include <QTextStream>

4. on_findButton_clicked() スロットに、検索文字列を抽出するコードを追加し、QTextEdit::find() 関数を使用してテキスト・ファイル内の検索文字列を検索する：

   void TextFinder::on_findButton_clicked()
   {
       QString searchString = ui->lineEdit->text();
       ui->textEdit->find(searchString, QTextDocument::FindWholeWords);
   }

5. コンストラクタでloadTextFile() を呼び出す行を追加する：

   TextFinder::TextFinder(QWidget *parent)
       : QWidget(parent)
       , ui(new Ui::TextFinder)
   {
       ui->setupUi(this);
       loadTextFile();
   }

次のコード行は、uicが生成したui_textfinder.h ファイルのon_findButton_clicked() スロットを自動的に呼び出します：

QMetaObject::connectSlotsByName(TextFinder);

リソースファイルの作成

入力テキストファイルを埋め込むリソースファイル(.qrc)が必要です。入力ファイルは、テキストの段落がある.txt ファイルであれば何でもかまいません。input.txt というテキストファイルを作成し、textfinder フォルダに保存します。

リソースファイルを追加するには

1. File >New File >Qt >Qt Resource File >Choose と進みます。

   

   Choose the Location ダイアログが開きます。

   

2. Name にtextfinder と入力します。
3. Path にプロジェクトのパスを入力し、Next またはContinue を選択します。

   Project Management ダイアログが開きます。

   

4. Add to project で、TextFinder を選択し、Finish またはDone を選択して、ファイルをコード・エディターで開きます。
5. Add Prefix を選択します。
6. Prefix で、デフォルトの接頭辞をスラッシュ（/）に置き換えます。
7. Add Files を選択し、input.txt を見つけて追加します。

   

プロジェクト・ファイルにリソースを追加する

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

set(PROJECT_SOURCES
        main.cpp
        textfinder.cpp
        textfinder.h
        textfinder.ui
        ${TS_FILES}
        textfinder.qrc
)

アプリケーションのビルドと実行

必要なファイルがすべて揃ったので、 (Run) を選択して、アプリケーションをビルドして実行します。