Up

Qtクリエータ試用記

 

openSUSE13.2でのQt Creatorのインストール

Qt Creatorのバージョンアップ

 

 Qt CreatorUbuntuで試用してみた(2012.08)。以下に要点を備忘録としてまとめておく。

 Qt Creatorはウェブサイト

http://qt.nokia.com/downloads

からダウンロード・インストールすることができる。

Ubuntuの場合は、アプリケーション「Ubuntuソフトウェア―センター」を起動して、「Qt Creator」で検索すれば表示されるので、それをインストールすることができる。

Macの場合、ウェブサイト

http://qt.nokia.com/downloads

から、ダウンロード・インストールすると、ユーザーのホームディレクトリにQtSDKというフォルダーが作成され、そこにQt Creator.appが格納される。これをダブル・クリックするとQt Creatorが起動される。

インストール後、Qt Creatorを起動すると図1のフォームが表示される。

図1

 

新しくプログラムを作成するために「新しいプロジェクトの作成...」ボタンをクリックするか、「ファイル|ファイル/プロジェクトの新規作成(N)...」メニュを選ぶ(図2)。

図2

 

「新規作成」ダイアログフォームが表示される(図3)。

図3

 

まず、プロジェクトから「Qtウィジェットプロジェクト」を選んでクリックする。次に右の「Qt GUIアプリケーション」をクリックして、「選択」ボタンをクリックする。「プロジェクト名とパス」を設定するダイアログフォームが表示される(図4)。

図4

 

まず、プログラムファイルなどを格納するフォルダ(ディレクトリ)を「パス」に設定するが、表示されているフォルダ以外を選ぶときは、右にある「参照」ボタンをクリックするとフォルダを選択するダイアログフォームが表示される(図5)。

図5

 

新しくフォルダを作成するときは、「フォルダの作成」ボタンをクリックすればよい。フォルダを選択したら「開く」ボタンをクリックする。「プロジェクト名とパス」を設定するダイアログフォームに戻る(図6)。

図6

 

プロジェクト名を適当に設定して「次へ」ボタンをクリックする。「ターゲット設定」ダイアログフォームが表示される(図7)。

図7

 

「次へ」ボタンをクリックする。「クラス情報」ダイアログフォームが表示される(図8)。

図8

 

「次へ」ボタンをクリックする。「プロジェクト管理」ダイアログフォームが表示される(図9)。

図9

 

「完了」ボタンをクリックする。プロジェクトを開発するウィンドウが表示される(図10)。

図10

 

左上のペインにおいて、「ソース」の下にはファイル名が表示されているが、「ヘッダー」と「フォーム」の下には表示されていない。それぞれ左の横向きの小さい三角形をクリックすると該当するファイル名が表示される。ファイル名をダブルクリックすると、そのファイルの内容が右のペインに表示される。

図11

 

フォームのファイル名(図11)をダブルクリックすると、フォームが表示されので(図12)、この上にボタンなどを張り付けたりすることができる。

図12

 

左のアイコンの「デザイン」がマークされているときは、図12のようにフォームが表示されているが、その上の「編集」アイコンをクリックするとテキストファイルの表示となる。

図13

 

まず、ひな形として用意されたプログラムが問題なくビルド・実行できることを確認するため、「ビルド|すべてビルド」メニュを選択する。フォーム下の「コンパイル出力」タブをクリックして、コンパイルの結果を表示させる(図14)。

図14

 

「正常に終了しました」というメッセージを確認後、図13の「実行メニュ」を選ぶ。図15の実行時フォームが表示される。

図15

 

左上のX印をクリックすると、プログラムの実行終了となる。このプログラムを基に、いろいろな機能を付け加える。例えば、図16のように時刻を表示するようにしてみる。

図16

 

まず、図10で用意されたプログラムのひな形のファイルを見てみると、以下のようになっている。

メイン関数の宣言されているmain.cppは以下の通りである。

=============== main.cpp ====================

#include <QtGui/QApplication>

#include "mainwindow.h"

 

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

{

    QApplication a(argc, argv);

    MainWindow w;

    w.show();

   

    return a.exec();

}

==========================================

ウィンドウを表すオブジェクト w を表示して、QApplicationオブジェクト a のメソッドexec の実行でイベント(Qtではシグナルと呼んでいる)待ちになっている。

MainWindowの宣言・定義は、mainwindow.hmainwindow.cppで行われている。

================ mainwindow.h ==================

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

 

#include <QMainWindow>

 

namespace Ui {

class MainWindow;

}

 

class MainWindow : public QMainWindow

{

    Q_OBJECT

   

public:

    explicit MainWindow(QWidget *parent = 0);

    ~MainWindow();

   

private:

    Ui::MainWindow *ui;

};

 

#endif // MAINWINDOW_H

==========================================

 

=============== mainwindow.cpp ========================

#include "mainwindow.h"

#include "ui_mainwindow.h"

 

MainWindow::MainWindow(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow)

{

    ui->setupUi(this);

}

 

MainWindow::~MainWindow()

{

    delete ui;

}

==========================================

 

ウィンドウの表示に必要な最小限のものが宣言・定義されていることがわかる。これを基に、ウィンドウ上に時刻を表示するプログラムを作成する。このために、タイマーイベント(Qtではシグナルといっている)に対して、その時の時刻を読み込み表示するイベントハンドラ(Qtではスロットと呼んでいる)を用意する。また、ウィンドウのサイズも変更する。

ウィンドウのサイズの変更は、main.cppに以下のようにコードを書き加えて行う。

================ main.cpp修正版 ==========

#include <QtGui/QApplication>

#include "mainwindow.h"

 

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

{

    QApplication a(argc, argv);

    MainWindow w;

    w.setGeometry(0, 0, 900, 600);      //      ウィンドウの位置とサイズ

    w.show();

 

    return a.exec();

}

===================================

ウィンドウの位置とサイズを再設定するために、メソッドsetGeometryを呼び出している。ウィンドウは左上の位置が(0, 0)、サイズが横900、縦600になるように表示される。

ウィンドウの宣言・定義ファイルは以下のように加筆する。

============== mainwindow.hの修正版 ==============

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

 

#include <QMainWindow>

 

namespace Ui {

class MainWindow;

}

 

 

class MainWindow : public QMainWindow

{

    Q_OBJECT        //  Qtのクラスを宣言する時に置くマクロ

 

public:

    explicit MainWindow(QWidget *parent = 0);

    ~MainWindow();

 

private:

    Ui::MainWindow *ui;

 

    void paintEvent(QPaintEvent * event);       //  描画用メソッド

 

    class QTimer * my_timer;                    //  描画画面更新用タイマー

 

public slots:

    void show_time();                           //  タイマーイベント処理用メソッド

};

 

#endif // MAINWINDOW_H

====================================

ウィンドウの画面の再描画のためのメソッドpaintEventをオーバーライドしている。また、タイマーイベント(タイマーシグナル)を発生さるためのQTimer型のポインター変数my_timerも定義している。タイマーイベントを処理するためのメソッドをスロットとして「public slots:」をつけて宣言している。何がシグナル(イベント)として使えるかは、ヘルプに説明されている。例えば、QTimerという語をクリックしてマウスのポインタを置いてからF1キーを押すとヘルプの説明が表示されるので、QTimer型オブジェクトにどのようなシグナル(イベント)が用意されているかが分かる。F1キーを押したとき、「該当する語がありません」というようなメッセージが表示されたときは、検索語に指定して検索すると関連語のリストが表示されるので、その中から適当な語を選べばよい。

ウィンドウでの具体的な動作はmainwindow.cppに記述する。

============== mainwindow.cpp修正版 ====================

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include <QtGui>

#include <QString>

#include <time.h>

 

MainWindow::MainWindow(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow)

{

    ui->setupUi(this);

    my_timer = new QTimer();

    //

    //      タイマーシグナルtimeoutと処理用メソッドshow_timeの結合

    //

    connect(my_timer, SIGNAL(timeout()), this, SLOT(show_time()));

    my_timer->start(100);

}

 

MainWindow::~MainWindow()

{

    if (my_timer) delete my_timer;

    delete ui;

};

 

void MainWindow::paintEvent(QPaintEvent *event){

    //

    //      時刻を表す文字列をcvに設定

    //

    time_t vt;

    time(&vt);

    char * cstr = ctime(&vt);

    char cv[9];

    for (int i = 0; i < 8; i++)

        cv[i] = cstr[11+i];

    cv[8] = 0;

    //

    //      文字列cvをウィンドウ中央に描画

    //

    QPainter painter(this);

    painter.setPen(Qt::blue);

    painter.setFont(QFont("Arial", 100));

    painter.drawText(rect(), Qt::AlignCenter, QString(cv));

}

 

void MainWindow::show_time(){

        update();       //  paintEventの呼び出し

}

=====================================

MainWindowのコンストラクタでは、QTimerオブジェクトが生成されてmy_timerに設定されている。my_timerから出されるシグナルtimeoutMainWindowthisで表されている)のスロットshow_timeで処理されるように結合するためにconnect関数を

connect(my_timer, SIGNAL(timeout()), this, SLOT(show_time()));

と呼び出している。タイマーシグナルは

my_timer->start(100);

と設定されているので、100msec間隔で送出される。

シグナルtimeoutによりスロットshow_timeが呼び出されると

update()

が実行されて、paintEventが呼び出される。paintEventでは、時刻の読み込みと、ウィンドウ上での描画が行われている。

 この時刻表示プログラムは圧縮ファイルDispTime.zipとしてまとめた。DispTime.zipをクリックしてダウンロード・解凍すれば、プロジェクトとしてQt Creatorで開くことができる。既存のプロジェクトを開くときは、「プロジェクトを開く」ボタンをクリックするか(図17)、「ファイル|ファイル/プロジェクトを開く」メニュを選ぶ(図18)。

図17

 

図18

 

「プロジェクトを開く」ボタンあるいはメニュを選ぶと、「ファイルを開く」ダイアログウィンドウが表示される(図19)。

図19

 

プロジェクトファイル(*.pro)を選んで「開く」ボタンをクリックする。

ただし、本ウェブサイトからダウンロードした圧縮ファイルでは「*.user」ファイルが除かれている。これは、プログラムを開発したマシンと異なるマシンで開くとき、「*.user」ファイルがあるとビルドがうまくいかないことがあるからである。「*.user」ファイルのないプロジェクト(*.pro)を開くと、「ターゲット設定」ダイアログフォームが表示される(図20)。

図20

 

「完了」ボタンをクリックする(図20はUbuntuの場合で、Macなど他のマシンの場合は「終了」ボタンなど該当ボタンを適宜選ぶ)。これでプロジェクト(プログラム)を開く作業が完了するので、「すべてビルド」を行ってビルドできることを確認後、「実行」と進めばよい。

 

ボタンの貼り付けとクリックの処理

 

 図16のフォームにボタンを張り付けて図A.1のようにし、ボタンのクリックでプログラムが終了するようにする。

A.1

 

まず、図A.2のように左端の「デザイン」がマークされている状態でフォームが表示される(上の「編集」アイコンをクリックしてマークするとテキストファイルが表示される)ので、左のペインにある「Push Button」のところをクリックしたままフォームのボタンを張り付けたい所までドラッグする。

A.2

 

ドラッグして張り付けたボタンの名前(プログラム中で用いる識別子)は、右下のペインの上端に「pushButton: QPushButton」というようにそのクラス型名QPushButtonとともにpushButtonであることが表示されている。ボタン上に表示されている文字列「Close」は、右下のペインのtext欄の右のセルに設定したものである。これは、プログラム中で用いる識別子ではなく、単にボタン上に表示されるものであるので注意。

以上の準備の後、ボタンのクリックをイベント(すなわちシグナル)として、そのイベントによって呼び出されるメソッド(すなわちスロット)を用意する。メソッドは、mainwindow.hにおいて

public slots:

                         void show_time();                           //  タイマーイベント処理用メソッド

                         void goodBy();                              //  ボタンクリック処理用メソッド

と、スロットgoodByという名前で用意した。このメソッドの具体的な定義はmainwindow.cppにおいて

void MainWindow::goodBy(){

                         exit(0);            //  プログラムの実行終了; exec()から抜け出す。

}

と与えられている。exit()を呼び出して、exec()main.cppファイルの「return a.exec();」文、メインウィンドウ表示中はexec()の実行中状態)のループから抜け出している。

ボタンのクリックとスロットとしてのメソッドgoodByの結合は、mainwindow.cppにおいて

connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(goodBy()));

と関数connectを呼び出すことによって行っている。メインフォームに張り付けたボタンpushButtonは、メインフォームを表す変数uiのメンバとなっているので

ui->pushButton

という形で表している。ボタンのクリックというシグナルは

clicked()

である。ボタンにどのようなシグナルがあるかは、Qt Creatorのヘルプに説明されている。

メインフォームのスロットとして宣言されたgoodByは、thisとの組み合わせで表されている。goodByは、this(コンストラクタMainWindowを呼び出したオブジェクト)のメンバー関数である。

以上の準備で、プログラムをビルド・実行すると、ボタンのクリックでプログラムが終了するようになる。

このボタンを付け加えたプログラムは圧縮ファイルDispTimeButton.zipとしてまとめた。DispTimeButton.zipをクリックしてダウンロード・解凍すれば、Qt Creatorで開くことができる。

 

 

Qt Creatorの更新(バージョンアップ)

 

Qt Creatorは主にubuntuで使っているが、ubuntuのソフトウェア更新アプリケーションを実行してもいまだに更新されない(2013/02/17)ので、QtのダウンロードのウェブサイトからQtクリエイターの最新版をダウンロードしてインストールした。

ダウンロードは

http://qt-project.org/downloads#qt-creator

から行った。端末を起動してダウンロードしたファイル(*.binファイル;今回ダウンロードしたのは「qt-creator-linux-x86-opensource-2.6.2.bin」である)の格納されているフォルダに移り、念のためファイル特性を

chmod u+x ダウンロードしたファイル名

と変更、今回ダウンロードしたファイルの場合なら

chmod u+x qt-creator-linux-x86-opensource-2.6.2.bin

chmodコマンドを実行後、ダウンロードしたファイルを

./qt-creator-linux-x86-opensource-2.6.2.bin

と実行するとインストールされた。インストール後、unbuntuの再起動を行ってからDashホームを開いてインストールされたアプリケーションを見ると下図のようになっている。

図B.1

 

新しくインストールした方のアイコンをクリックして起動すると図B.2のように新しいQt Creatorが起動される。

図B.

 

インストールで作成されたQtCreatorの実行ファイルを直接起動することもできる。図B.3は、Fedora 18にインストール後、Home/qtcreator-2.6.2/binホルダーに作成された実行ファイルqtcreatorを示すものである。

図B.

 

qtcreatorのアイコンのダブルクリックでQtCreatorを起動することもできる。

 

 

openSUSE 13.2でのQt Creatorのインストール

openSUSE13.2での日本語入力の設定とg++のインストールは別のウェブサイトで説明した。

 

まず、「YaST2 モジュ...」の「ソフトウェア管理」を選ぶ(図S1)。

S1

 

表示された「YaST2」フォームにおいて、「検索」ページ内に「qt-creator」を設定して「検索」ボタンを押すと、右側のペインにパッケージ「qt-creator・・・」が表示される(図S2)。これにチェックを入れて選び、右下の「了解」ボタンをクリックする。

S2

 

S3のフォームが表示されたら、「続行」ボタンをクリックする。

S3

 

インストールが始まり、完了すると図S4のように「完了」ボタンが表示される。

S4

 

インストールの完了後は図S5のように「Qtクリエータ」のアイコンが表示される。この「Qtクリエータ」アイコンのクリックでQtクリエータが起動する。

S5

 

Qtクリエータから上のサンプルプログラムDispTimeButton.zipをダウンロードして開くときは以下のような手順になる。

まず、ダウンロードしたファイルの名前をマウスの右ボタンでクリックして表示されるメニュから「ここに展開する」を選ぶ(図S6)と、ダウンロードした圧縮ファイルが解凍される。

S6

 

次にQtクリエータを起動し、メニュ「ファイル|ファイル/プロジェクトを開く」を選ぶ(図S7)。

S7

 

提示された「ファイルを開く」フォームにおいて、ファイル拡張子が「.pro」のファイル(図S8の場合「DispTimeButton.pro」)をクリックして選び、右下の「開く」ボタンをクリックする。

S8

 

S9のフォームになったら、「プロジェクトの設定」ボタンをクリックする。

S9

 

次に、メニュ「ビルド|プロジェクト〜のリビルド」を選ぶ(図S10)。

S10

 

リビルドの終了後、「問題」タブをクリックして表示されるペイン内のメッセージを見ると「使われていないパラメータがあります」という内容なので無視する(図S11)。

S11

 

「ビルド|実行」メニュを選ぶ(図12)。

S12

 

プロジェクトが実行され、プロジェクトのフォームが表示される(図13)。

S13

 

 

 

Up