Day 1 GUIプログラミングSTART

まえがき

C++/QtでGUIを作ってみたいと思います。私自身も開発経験が乏しいので、勉強しながら、日記的に学んだことを残していきたいと思います。何日分書くことができるかわかりませんが、満足いくまで継続しようと思います。(目標 1週間に1記事!!)

 

バージョン情報は以下の通りです。

Visual Studio 2017 Community

・CMake 3.16.0

・Qt 5.12.5

(導入等についてはこの記事では紹介しません!)

 

Qtとは

今回のこの記事ではQtを使用して、GUIを開発します。そもそも、Qtについて簡単に紹介したいと思います。Qtとは、アプリケーションフレームワークです。そして、クロスプラットフォームで開発可能です。GUIのみならず、色々なライブラリが用意されているため色々なものが作れるみたいで、加えてWindowsでもlinuxでも動くため、大変便利なものになっています。全体像はかなり大きなものですので、詳細は自身で調べていただいたらなと思います。

お約束 Hello World

早速、開発を進めます。プログラミング入門時のお約束通り、Hello worldを表示させてみたいと思います。

GUIには、ボタン、入力欄、文字、画像、、、と色々な機能を持った要素で構成されています。これらは、Widgetウィジェット)と呼ばれるらしく、Qtには様々な種類のWidgetのクラスがあり、これらクラスをうまく利用することで、GUIに機能を持たせることができます。

また、見栄えに関してはLayoutを管理する必要がある。GUI開発入門レベルであれば、この2点をうまく応用できれば、ある程度のことができそうです。(Layoutの管理にもクラスが用意されている。)

GUIはイベント駆動型みたいで、基本的にはクリックなどのGUI上での操作をトリガにいろんな処理が実施されます。

まずは、簡単にHello Worldを表示します。構成と使うクラスをFig .1に示します。

 簡単で、QLabelというWidgetを使えば、文字列や画像を表示できるみたいです。では、ソースコードを下に載せます。

f:id:M0CAN:20210402002948p:plain

Fig. 1 Hello World!!!の構成


 

main.cpp

#include <QApplication>

#include <QLabel>

 

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

{

    QApplication app(argc, argv);

    QLabel label("Hello world!!!");

    label.show();

    return app.exec();

}

 

コードの解説を簡単にする。はじめ、QApplicationをインクルードし、QApplicationクラスのインスタンスを生成する。ここでWindowのclose処理が行われるまでのイベントループを作成する。app.exec()でイベントループが開始され、returnを付けておくことで、アプリケーションの状態をOSにパスし、特に閉じたタイミングを知らせます。そして、CMaleLists.txtを以下に載せておきます。参考にしてみてください。

 

CMakeLists.txt

cmake_minimum_required(VERSION 3.5)

 

project(HelloWorldGUI LANGUAGES CXX)

 

set(CMAKE_INCLUDE_CURRENT_DIR ON)

 

set(CMAKE_AUTOUIC ON)

set(CMAKE_AUTOMOC ON)

set(CMAKE_AUTORCC ON)

 

set(CMAKE_CXX_STANDARD 11)

set(CMAKE_CXX_STANDARD_REQUIRD ON)

 

include_directories(${CMAKE_CURRENT_SOURCE_DIR})

include_directories(${CMAKE_CURRENT_BINARY_DIR})

 

find_package(Qt5 COMPONENTS Widgets REQUIRED)

 

add_executable(${PROJECT_NAME} main.cpp)

 

target_link_libraries(${PROJECT_NAME} Qt5::Widgets)

 

最後に、実行結果は以下に示します。

f:id:M0CAN:20210402002448p:plain

Fig. 2 Hello World!!! GUI

以上で、今回の記事は終わりにします。

次回はLayoutについて説明しようと思います。