QTによる迅速なアプリケーション開発

RAD(Rapid Application Development:迅速なアプリケーション開発)は ソフトウェアを手軽に開発する手段である。RADプログラムを使用すると、グラフィカルユーザーインターフェースを数分で作成することができる。

空のフォームを用意して、入力フィールドやボタンなどを適切な位置に クリック&ドラッグすれば、RADツールがコードを作成し、保守してくれる。後は、ボタンが押されたりメニューが選択されたりしたときに実行するアクションを作成すれば済む。

オープンソースの有力なRADツールの1つにQT Designerがある。 このツールはQTパッケージに含まれている。 KDEデスクトップを使用している場合、 QTはすでにインストール済みで、QT Designerもインストール済みの可能性が高い。 ディストリビューションの都合でQT Designerがインストールされていない場合は、 KDE Development Toolsグループかqt-designerパッケージからインストール可能だ。

QT Designerでできることをいくつか示すため、ここでは摂氏から華氏への単純な気温変換プログラムを作成する手順を紹介しよう。 簡単なGUIをデザインし、気温の変換処理を行うカスタムコードを追加するだけだ。 目的は簡単なデモを示すことであり、 正しいプログラムコードを完成させることではない。 そのため、本番で行うようなエラーチェック、入力内容の検査、 バッファオーバーフローのチェックなどは行わない。

まず、QT Designerプログラムをロードしよう。 KDEを実行している場合は、 ディストリビューションによってはすでにQT Designerのアイコンが表示されているはずだ。 表示されていない場合は、 ALT+F2キーを押せばRun Commandダイアログが表示され、実行するコマンドを入力できるようになる。 designerと入力してEnterキーを押すと、プログラムが起動する。

QT Designerを初めて開いた場合は、New/Openダイアログが表示される。 作成するのはC++アプリケーションなので、C++ Projectを選択する必要がある。 OKをクリックして続行しよう。


プロジェクトのファイルの保存先ディレクトリを選択し、 ファイル名を決める(この例ではcfconvにしてある)。 ファイル名には必ず.pro拡張子を付けよう。 SaveをクリックするとProject Settingsダイアログに戻る。 そのほかはデフォルト値のままでかまわない。

Project Settings

この時点では、QT Designerのメインウィンドウが表示されている。 Property Editorが表示されていることを確認しよう。 表示されていない場合は、Window→Views→Property Editor/Signal Handlersメニューオプションで表示できる。

Main Window

File→Newメニューオプションを選んでNew Fileダイアログを開き、 新しいDialogを作成することにする。 QT Designerが、入力フィールドやボタンを配置するための空のフォームを作成する。 空のフォームをクリックしてアクティブにしよう。

Main Window Form

Property Editorに進んで、nameプロパティをcfconvMainFormに変更し、 captionプロパティをCelsius to Fahrenheit Converterに変更する。

Property Editor Name and Caption

フォームの名前はアプリケーションが使用する内部名だ。 カスタムコードの作成時にはこの名前でフォームを参照することになる。 キャプションは、このプログラムの実行時にタイトルバーに表示される名前だ。

画面左側のToolboxからCommon Widgetsを選択し、 TextLabelをダブルクリックする。 フォームの左上をクリックしてラベルを配置し、 そのすぐ下に別のラベルを配置する。 終わったら、F2を押してテキストラベルの選択を解除する。

最上部のラベルを選択して、textプロパティをCelsiusに変更する。 その後、2枚目のラベルのtextプロパティをFahrenheitに変更する。

次に、これらのラベルに対応する2つの入力ボックスを各ラベルの右側に追加する。 この入力ボックスは、変換したい気温を入力するためと結果を表示するために使用する。

Common WidgetsからLineEditをダブルクリックして選択する。 各ラベルの横にLineEditを作成する。 終わったらF2キーを押す。

Celsiusラベルに属するLineEditボックスのnameプロパティをcelsiusLineEditに変更し、2つ目のLineEditボックスの同じプロパティをfahrenheitLineEditに変更する。 また、fahrenheitLineEditボックスのreadOnlyプロパティもTrueに変更しよう。

Common WidgetsからPushButtonをダブルクリックして選択する。 ラベルの真下に2つの押しボタンを並べて作成する。 左側のボタンのnameプロパティとtextプロパティをそれぞれquitPushButtonQuitに変更する。 同様に、右側のボタンのnameプロパティとtextプロパティもぞれぞれconvertPushButtonConvertに変更する。

この時点でフォームは次のようになるはずだ。

Form Done

この時点で作業結果を保存しておこう。 Ctrl+Sキーを押すか、メニューからFile→Saveの順に選んで、ファイル名を入力すればよい。 デフォルトのファイル名は、このフォームのnameプロパティに.ui拡張子を付けたものだ。 この名前を受け入れてSaveをクリックしてもかまわない。

必要なら、Ctrl+Tキーを押すか、 Preview→Preview Formメニューオプションを選択すると、 アプリケーションをプレビューすることができる。 見てわかるとおり、このボタンにはまだ何の機能もないので、次の手順でボタンを特定のアクションに接続しよう。 Quitボタンをクリックするとアプリケーションが閉じ、 Convertボタンをクリックすると摂氏の入力値が華氏に変換されるようにする。

Quitボタンを右クリックしてConnectionsを選択してから、 Newをクリックする。 SenderリストからquitPushButtonを選択し、 Signalリストからはclicked()を選択する。 また、ReceiverリストからcfconvMainFormを選択し、 Slotリストからはclose()を選択する。

Quit Button Connection

これで、Quitボタンをクリックすると、 クリックされたという信号がフォームに送られ、 フォームが閉じるようになった(この例の場合はメインフォームなので、アプリケーションが閉じる)。 Preview→Preview Formメニューオプションを選択するか、Ctrl+Tキーを押して、テストしてみるとよい。 Quitボタンを押すとプレビューウィンドウが閉じる。

次に、Convertボタン用の接続を作成する。 Convertボタンを右クリックし、Connectionsを選択する。 これは、すべての接続が格納されたグローバル接続ウィンドウだ。 1つのウィジェットに属する接続だけが格納されているわけではない。 その証拠に、Quitボタンの接続も示されている。 Newをクリックして新しい接続を作成しよう。 SenderリストからconvertPushButtonを選択する。 Signalリストからはclicked()を選択し、 ReceiverリストからはcfconvMainFormを選択する。 このボタンをfahrenheitLineEditウィジェットに接続したいのだが、 この目的を満たすスロットがリストには存在しない。 したがって、この接続を完成させるためには、新しいスロットを作成して、 選択できるようにしなければならない。

Edit SlotsNew Functionをクリックしよう。 関数名をconvert()に変更する。 ほかの値はそのままでかまわない。 OKをクリックしてウィンドウを閉じる。

Edit Functions

この接続を完成させるために、Slotリストからconvert()を選択する。

Done Editing Connections

いよいよ、アプリケーションの中身を作成する。つまり、convert()関数の作成だ。 Project Overviewウィンドウでcfconvmainform.ui.hをクリックして、 Code Editorを呼び出す。 一目瞭然だろうが、convert()関数は空の状態ですでに用意されている。 次のC++コードを関数として入力しよう。

void cfconvMainForm::convert() {
	/* 変数を宣言する */
	double celsius_input, result = 0;

	/* 摂氏の入力値を取り出す */
	celsius_input = celsiusLineEdit->text().toDouble();

	/* 華氏に変換する */
	result = (celsius_input *  (9.0/5.0)) + 32.0;

	/* 結果を示して、摂氏の入力ボックスを閉じる */
	fahrenheitLineEdit->setText(QString::number(result, ‘f’, 1));
	celsiusLineEdit->clear();
}

アプリケーションをコンパイルして実行できるようにする前に、必要な作業がまだ少し残っている。 まず、File→NewメニューからC++ Main-File (main.cpp)を選択して、main.cppファイルを作成する必要がある。 設定はデフォルトのままでかまわない。 main.cppファイルがCode Editorで自動的に開くはずだ。 main.cppファイルでは何も変更する必要がないので、 Code Editorウィンドウを閉じ、画面の指示に従って変更内容をmain.cppファイルに保存しよう。 必要なら、cfconfMainForm.ui.hのCode Editorウィンドウも閉じてよい。

これで、QT Designerでの作業は終わりだ。 プロジェクトを保存して(先にフォームを選択する必要があるかもしれない)、 プログラムのコンパイルと実行に移ろう。

プログラムのコンパイルに進む前に、Makefileファイルを作成しなければならない。 xtermやKonsoleなどの端末プログラムを起動して、 このプロジェクトのファイルが入っているディレクトリに変更すればよい。 次のコマンドを実行すると、Makefileファイルが生成される。 qmake -o Makefile cfconv.pro

いよいよ、makeを実行してプログラムをコンパイルするときが来た。 使っているシステムの速度によっては、少し時間を要するかもしれない。 コンパイル処理が完了したら、./cfconvを実行してプログラムをテストしよう。 -14と入力すると、プログラムが6.8と表示するはずだ。

これで、RAD(迅速なアプリケーション開発)と呼ばれる理由がわかっただろう。