プログラミング入門Qt Widgets

このトピックでは、C++と Qt Widgets モジュールを使用して、簡単なメモ帳アプリケーションを実装しながら、Qtの基礎知識を解説します。このアプリケーションは、テキストファイルの作成、保存、印刷、および再オープンしての編集が可能な小さなテキストエディタです。使用するフォントを設定することもできます。

例の動作確認

サンプルは次の手順で実行できます：

• Qt Creator

  Welcome モードを開き、Examples からこのサンプルを選択します。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code: チュートリアル: ビルドと実行を参照してください。

Notepad プロジェクトの作成

Qt Creator での新規プロジェクトの設定には、プロジェクト作成プロセスをステップごとに案内するウィザードが役立ちます。ウィザードは、その特定のプロジェクトの種類に必要な設定の入力を求め、プロジェクトを作成します。

Notepad プロジェクトを作成するには、[File ] > [New Project ] > [Application (Qt) ] > Qt Widgets Application > [Choose] を選択し、ウィザードの指示に従ってください。「Class Information 」ダイアログで、クラス名として「Notepad」と入力し、基底クラスとして「QMainWindow 」を選択します。

この Qt Widgets Application ウィザードにより、メインのソースファイルと、ユーザーインターフェース（Notepadウィジェット）を定義する一連のファイルを含むプロジェクトが作成されます：

• CMakeLists.txt - プロジェクトファイル。
• main.cpp - アプリケーションのメインソースファイル。
• notepad.cpp - Notepad ウィジェットの notepad クラスのソースファイル。
• notepad.h - Notepad ウィジェットの notepad クラスのヘッダーファイル。
• notepad.ui - Notepad ウィジェットの UI フォーム。

これらのファイルには、プロジェクトをビルドして実行するために必要な定型コードが含まれています。 以下のセクションで、ファイルの内容について詳しく見ていきます。

詳細

メインのソースファイル

ウィザードは、main.cpp ファイルに以下のコードを生成します：

#include "notepad.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Notepad w;
    w.show();
    return a.exec();
}

コードを1行ずつ確認していきましょう。以下の行では、NotepadウィジェットおよびQApplication のヘッダーファイルがインクルードされています。すべてのQtクラスには、そのクラス名と同じ名前のヘッダーファイルがあります。

#include "notepad.h"

#include <QApplication>

次の行では、すべての C および C++ ベースのアプリケーションのエントリポイントとなる main 関数を定義しています：

int main(int argc, char *argv[])

次の行では、QApplication オブジェクトを作成します。このオブジェクトはアプリケーション全体のリソースを管理し、Qt Widgets を使用するQtプログラムを実行するために必要です。これは、argv で実行されたargc というコマンドライン引数を使用して、アプリケーションオブジェクトを構築します。（Qt Widgets を使用しないGUIアプリケーションの場合は、代わりにQGuiApplication を使用できます。）

    QApplication a(argc, argv);

次の行は、Notepad オブジェクトを作成します。これは、ウィザードによってクラスと UI ファイルが生成されたオブジェクトです。ユーザーインターフェースには、Qt ではwidgets と呼ばれる視覚的要素が含まれています。ウィジェットの例としては、テキストエディタ、スクロールバー、ラベル、ラジオボタンなどがあります。 ウィジェットは、他のウィジェットのコンテナとなることもあります。例えば、ダイアログやメインアプリケーションウィンドウなどです。

    Notepad w;

次の行は、Notepadウィジェットを画面上に独自のウィンドウとして表示します。ウィジェットはコンテナとしても機能します。その一例がQMainWindow であり、これには多くの場合、複数の種類のウィジェットが含まれています。ウィジェットはデフォルトでは表示されませんが、関数show() によってウィジェットを表示させることができます。

    w.show();

次の行は、QApplication をイベントループに入らせます。Qtアプリケーションが実行されている間、イベントが生成され、アプリケーションのウィジェットに送信されます。イベントの例としては、マウスのクリックやキー入力などがあります。

    return a.exec();

詳細はこちら

UIの設計

ウィザードは、XML 形式のユーザーインターフェース定義ファイル「notepad.ui」を生成します。Qt Creator で「notepad.ui」ファイルを開くと、自動的に統合されたQt Widgets Designer が開きます。

アプリケーションをビルドすると、Qt Creator は QtUser Interface Compiler (uic)を起動し、uic は .ui ファイルを読み込んで、対応する C++ ヘッダーファイル ui_notepad.h を作成します。

使用方法Qt Widgets Designer

ウィザードは、QMainWindow を使用するアプリケーションを作成します。このアプリケーションには独自のレイアウトがあり、そこにメニューバー、ドックウィジェット、ツールバー、ステータスバーを追加できます。中央領域には、あらゆる種類のウィジェットを配置できます。ウィザードは、そこに Notepad ウィジェットを配置します。

Qt Widgets Designer にウィジェットを追加するには：

1. Qt Creator のEdit モードで、Projects ビュー内のnotepad.uiファイルをダブルクリックし、統合されたQt Widgets Designer でファイルを開きます。
2. ウィジェット「Text Edit」（QTextEdit ）をフォームにドラッグ＆ドロップします。
3. Ctrl+A（またはCmd+A）を押してウィジェットを選択し、Lay out Vertically （またはCtrl+L）をクリックして、縦方向のレイアウト（QVBoxLayout ）を適用します。
4. Ctrl+S（またはCmd+S）を押して変更を保存します。

Qt Widgets Designer での UI は、次のように表示されます：

コードエディタで生成された XML ファイルを確認できます：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Notepad</class>
 <widget class="QMainWindow" name="Notepad">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>400</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Notepad</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QTextEdit" name="textEdit"/>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
    ...

次の行には、ドキュメントで使用されるXMLバージョンと文字エンコーディングを指定するXML宣言が含まれています：

<?xml version="1.0" encoding="UTF-8"?>

ファイルの残りの部分では、Notepadウィジェットを定義するui 要素が指定されています：

<ui version="4.0">

このUIファイルは、Notepadクラスのヘッダーファイルおよびソースファイルと組み合わせて使用されます。UIファイルの残りの部分については、後のセクションで詳しく見ていきます。

Notepad ヘッダーファイル

ウィザードは、Notepad クラス用のヘッダーファイルを生成しました。このファイルには、必要な #include 文、コンストラクタ、デストラクタ、および Ui オブジェクトが含まれています。ファイルの内容は次のとおりです:

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class Notepad;
}
QT_END_NAMESPACE

class Notepad : public QMainWindow
{
    Q_OBJECT

public:
    explicit Notepad(QWidget *parent = nullptr);
    ~Notepad();

private:
    Ui::Notepad *ui;
    QString currentFile;
};

次の行では、メインアプリケーションウィンドウを提供する `QMainWindow ` をインクルードしています：

#include <QMainWindow>

次の行では、uic ツールを用いて .ui ファイルから生成された UI クラスの標準名前空間である Ui 名前空間内で、Notepad クラスを宣言しています：

namespace Ui {
class Notepad;
}

クラス宣言には、Q_OBJECT マクロが含まれています。これはクラス定義の最初に記述する必要があり、このクラスをQObject として宣言します。当然ながら、QObject から継承する必要があります。QObject は、通常のC++クラスにいくつかの機能を追加します。 特に注目すべきは、クラス名やスロット名を実行時に取得できる点です。また、スロットのパラメータ型を取得したり、スロットを呼び出したりすることも可能です。

class Notepad : public QMainWindow
{
    Q_OBJECT

以下の行では、parent というデフォルト引数を持つコンストラクタを宣言しています。値0は、このウィジェットに親が存在しないこと（トップレベルウィジェットであること）を示しています。

public:
    explicit Notepad(QWidget *parent = nullptr);

次の行では、オブジェクトのライフサイクル中に取得されたリソースを解放するための仮想デストラクタを宣言しています。 C++の命名規則に従い、デストラクタは、それに関連付けられたクラス名にチルダ（~）を接頭辞として付けたものと同じ名前になります。QObject では、基底クラスへのポインタを通じてオブジェクトが削除された際に、派生クラスのデストラクタが正しく呼び出されるように、デストラクタは仮想化されています。

    ~Notepad();

以下の行では、Notepad UI クラスへのポインタであるメンバ変数を宣言しています。メンバ変数は特定のクラスに関連付けられており、そのクラスのすべてのメソッドからアクセス可能です。

private:
    Ui::Notepad *ui;
    QString currentFile;
};

Notepad ソースファイル

ウィザードによって Notepad クラス用に生成されたソースファイルは、次のようになります。

#include "notepad.h"
#include "ui_notepad.h"

Notepad::Notepad(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::Notepad)
{
    ui->setupUi(this);

}

以下の行では、ウィザードによって生成された Notepad クラスのヘッダーファイルと、uic ツールによって生成された UI ヘッダーファイルをインクルードしています：

#include "notepad.h"
#include "ui_notepad.h"

次の行は、Notepad のコンストラクタを定義しています：

Notepad::Notepad(QWidget *parent) :

次の行は、Notepadクラスの基底クラスであるQMainWindow のコンストラクタを呼び出しています：

    QMainWindow(parent),

次の行では、UIクラスのインスタンスを作成し、それをui メンバーに代入しています：

    ui(new Ui::Notepad)

次の行では、UIを設定しています：

{
    ui->setupUi(this);

デストラクタでは、ui を削除します：

Notepad::~Notepad()
{
    delete ui;
}

プロジェクトファイル

ウィザードにより、次のプロジェクトファイル「CMakeLists.txt 」が生成されます：

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

cmake_minimum_required(VERSION 3.16)
project(notepad LANGUAGES CXX)

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

qt_standard_project_setup()

qt_add_executable(notepad
    main.cpp
    notepad.cpp notepad.h notepad.ui
)

set_target_properties(notepad PROPERTIES
    WIN32_EXECUTABLE TRUE
    MACOSX_BUNDLE TRUE
)

target_link_libraries(notepad PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Widgets
)

if(TARGET Qt6::PrintSupport)
    target_link_libraries(notepad PRIVATE Qt6::PrintSupport)
endif()

# Resources:
set(notepad_resource_files
    "images/bold.png"
    "images/copy.png"
    "images/create.png"
    "images/cut.png"
    "images/edit_redo.png"
    "images/edit_undo.png"
    "images/exit.png"
    "images/font.png"
    "images/info.png"
    "images/italic.png"
    "images/new.png"
    "images/open.png"
    "images/paste.png"
    "images/pencil.png"
    "images/print.png"
    "images/save.png"
    "images/save_as.png"
    "images/underline.png"
)

qt_add_resources(notepad "notepad"
    PREFIX
        "/"
    FILES
        ${notepad_resource_files}
)

install(TARGETS notepad
    BUNDLE  DESTINATION .
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
)

qt_generate_deploy_app_script(
    TARGET notepad
    OUTPUT_SCRIPT deploy_script
    NO_UNSUPPORTED_PLATFORM_ERROR
)
install(SCRIPT ${deploy_script})

このプロジェクトファイルには、プロジェクトに含まれるソースファイル、ヘッダーファイル、および UI ファイルが指定されています。

詳細

ユーザー操作の追加

エディタに機能を追加するには、まずツールバーにメニュー項目とボタンを追加することから始めます。

「Type Here」をクリックし、「New」、「Open」、「Save」、「Save as」、「Print」、「Exit」というオプションを追加します。これにより、下のアクションエディタに 5 行が作成されます。アクションをスロットに接続するには、アクションを右クリックして「Go to slot 」>「triggered() 」を選択し、そのスロットのコードを完成させます。

さらに、これらのアクションをツールバーに追加したい場合は、各QAction にアイコンを割り当て、QAction をツールバーにドラッグします。アイコンの割り当ては、該当するアクションのIconプロパティにアイコン名を入力することで行います。QAction をツールバーにドラッグすると、アイコンをクリックすることで関連するスロットが起動します。

newDocument() メソッドを完成させてください：

void Notepad::newDocument()
{
    currentFile.clear();
    ui->textEdit->setText(QString());
}

変数 `currentFile ` は、現在編集中のファイルを含むグローバル変数であり、clear() はテキストバッファをクリアします。変数 `currentFile ` は、`notepad.h` のプライベートセクションで定義されています：

private:
    Ui::Notepad *ui;
    QString currentFile;

ファイルのオープン

notepad.ui で、actionOpen を右クリックし、[Go to Slot] を選択します。

open() メソッドを完成させます。

void Notepad::open()
{
    QString fileName = QFileDialog::getOpenFileName(this, "Open the file");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);
    currentFile = fileName;
    if (!file.open(QIODevice::ReadOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot open file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream in(&file);
    QString text = in.readAll();
    ui->textEdit->setText(text);
    file.close();
}

QFileDialog::getOpenFileName ファイルを選択できるダイアログが開きます。QFile オブジェクトmyfile には、選択されたfile_name がパラメータとして渡されます。後で利用できるよう、選択されたファイルはグローバル変数currentFile にも格納します。file.open を使用して、ファイルを読み取り専用テキストファイルとして開きます。ファイルを開けない場合は警告が表示され、プログラムは停止します。

パラメータmyfile に対応するQTextStream をinstream として定義します。ファイルmyfile の内容は、QString text にコピーされます。setText(text) は、エディタのバッファにtext を書き込みます。

ファイルの保存

ファイルの保存用のメソッドは、ファイルの開く場合と同様に、actionSave を右クリックし、Go to Slot を選択して作成します。

void Notepad::save()
{
    QString fileName;
    // If we don't have a filename from before, get one.
    if (currentFile.isEmpty()) {
        fileName = QFileDialog::getSaveFileName(this, "Save");
        if (fileName.isEmpty())
            return;
        currentFile = fileName;
    } else {
        fileName = currentFile;
    }
    QFile file(fileName);
    if (!file.open(QIODevice::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

QFile オブジェクト `myfile ` は、操作中のファイルを含むグローバル変数 `current_file` にリンクされています。myfile を開けない場合、エラーメッセージが表示され、メソッドは停止します。QTextStream `outstream` を作成します。エディタのバッファの内容はプレーンテキストに変換され、その後 `outstream` に書き込まれます。

別の名前でファイルを保存する

void Notepad::saveAs()
{
    QString fileName = QFileDialog::getSaveFileName(this, "Save as");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);

    if (!file.open(QFile::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    currentFile = fileName;
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

これは「ファイルの保存」と同じ手順ですが、唯一の違いは、ここで作成するファイルの新しいファイル名を入力する必要があるという点です。

ファイルの印刷

印刷機能を使用するには、プロジェクトファイルにPrintSupport を追加する必要があります。

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

notepad.cpp 内で、printDev という名前の QPrinter オブジェクトを宣言します：

void Notepad::print()
{
#if defined(QT_PRINTSUPPORT_LIB) && QT_CONFIG(printer)
    QPrinter printDev;
#if QT_CONFIG(printdialog)
    QPrintDialog dialog(&printDev, this);
    if (dialog.exec() == QDialog::Rejected)
        return;
#endif // QT_CONFIG(printdialog)
    ui->textEdit->print(&printDev);
#endif // QT_CONFIG(printer)
}

プリンタダイアログボックスを起動し、選択されたプリンタをオブジェクト `printDev` に格納します。`Cancel ` をクリックしてもプリンタが選択されなかった場合、メソッドは終了します。実際のプリンタコマンドは、QPrinter オブジェクトをパラメータとして `ui->textEdit->print ` に指定して実行します。

フォントの選択

void Notepad::selectFont()
{
    bool fontSelected;
    QFont font = QFontDialog::getFont(&fontSelected, this);
    if (fontSelected)
        ui->textEdit->setFont(font);
}

QFontDialog を使用して、フォントが選択されたかどうかを示すブール値を宣言します。選択された場合は、ui->textEdit->setFont(myfont) を使用してフォントを設定します。

コピー、切り取り、貼り付け、元に戻す、やり直し

テキストを選択し、それをクリップボードにコピーしたい場合は、ui->textEdit の適切なメソッドを呼び出します。切り取り、貼り付け、元に戻す、やり直しについても同様です。

この表は、使用するメソッド名を示しています。

詳細

コマンドラインからのビルドと実行

コマンドラインからサンプルアプリケーションをビルドするには、そのアプリケーション用のビルドディレクトリを作成します。ビルドディレクトリに移動し、qt-cmake を実行して、ビルド用にプロジェクトを設定します。プロジェクトの設定が正常に完了すると、生成されたファイルを使用してプロジェクトをビルドできるようになります。

md <build_directory>
cd <build_directory>
<qt_installation_directory>\bin\qt-cmake -GNinja <source_directory>
<generator>

これらのコマンドにより、ビルドディレクトリ内に実行ファイルが生成されます。CMake ツールはプロジェクトファイルを読み込み、アプリケーションのビルド方法に関する指示を生成します。その後、ジェネレータはその指示に基づいて実行可能バイナリを生成します。

たとえば、Ninjaをジェネレータとして使用してWindows上でNotepadのサンプルをビルドするには、次のコマンドを入力します。

md notepad-build
cd notepad-build
C:\Qt\6.12.0\msvc2022_64\bin\qt-cmake -GNinja C:\Examples\notepad
ninja

Ninjaをジェネレータとして使用しない場合は、ninja の代わりに、ジェネレータに依存しないCMakeコマンドを使用してアプリケーションをビルドしてください：

cmake --build