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

このチュートリアルでは、Qt Creator を使用して小さな Qt アプリケーション「Text Finder」を作成する方法について説明します。これは、Qt UI Tools のText Finderサンプルを簡略化したものです。Qt Widgets Designer を使用して Qt Widgets からアプリケーションのユーザーインターフェースを構築し、コードエディタを使用して 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 」ボタンを選択した際に検索関数を呼び出すには、Qtのシグナルとスロットの仕組みを使用します。シグナルは特定のイベントが発生したときに発信され、スロットは特定のシグナルに応答して呼び出される関数です。Qt Widgetsには、Qt Widgets Designer から直接使用できる定義済みのシグナルとスロットが用意されています。検索関数のスロットを追加するには：
   • 「Find 」ボタンを右クリックしてコンテキストメニューを開きます。
   • 「Go to Slot 」＞「clicked() 」を選択し、続いて「OK 」を選択します。

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

10. Ctrl+S（またはCmd+S）を押して変更を保存します。

Qt Widgets Designer を使用したフォームの設計の詳細については、『Qt Widgets Designer マニュアル』を参照してください。

ヘッダーファイルを完成させる

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

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

   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 を使用するには、textfinder.cpp に以下の #include を追加してください：

   #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 ）を選択して、アプリケーションをビルドおよび実行します。