GUI で Hello World

(サンプル一覧を表示する)


3 段階に分けて HelloWorld を表示するまでの手順を紹介します。

  • プロジェクトを作成する
  • ウインドウを作る
  • main 関数を作る

各ステップごとにスクリーンショットを貼っていったら少し長くなってしまいました。
ざっと全体に目を通してから読んでみてください。


プロジェクトを作成する


Qt Creator を起動してください。
最初、こんな画面が出ると思います。





ここで、 "Qt のサンプルプログラムを参照" のコンボボックスからサンプルプログラムを選ぶと付属のサンプルが開けますが、ひとまずサンプルは置いておいて、空のプロジェクトを作ってみましょう。

メニューから、"ファイル" → "ファイル/プロジェクトの新規作成" を選んでください。





こんな画面が出たら、"空の Qt4 プロジェクト" を選びます。
慣れてきたら空でない方が便利だと思いますが、いったん空の状態から作ってみましょう。
選べたら OK ボタンを押してください。





ここではプロジェクト名と、ファイル一式を入れるフォルダを選択します。
"パス" で指定したフォルダ内に、 "名前" で指定したフォルダが作られます。
"C:\Qt\sample" というような、テスト用のフォルダを作っておきましょう。
入力できたら "次へ" をクリックしてください。





確認画面が出てくるので、そのまま "完了" をクリックしてください。





完了を押すと、こんな画面になると思います。
ならない場合は、左のメニューから、 "ようこそ" の下の、 "編集" を選んでください。
ここで表示されている、 "test.pro" というファイルが、Qt Creator のプロジェクトファイルになります。VisualStudio でいうところの "*.vcproj" のような感じですね。この "*.pro" ファイルを参照して、自動的に Makefile が生成されるようです。今のところ、手動でこのファイルの中をいじる必要はありませんが、単純にテキストファイルになっています。





ウインドウを作る


それではウインドウを作っていきましょう。
プロジェクト一覧画面から、プロジェクト名を右クリックして、 "新しいファイルを追加" を選んでください。





"新しいファイル" のダイアログが表示されたら、 "Qt デザイナ フォーム クラス" を選んでください。 GUI の編集画面と一緒に、それに連動した C++ クラスファイル (cpp と h のセット) が作られます。





次にテンプレートの選択画面が出てきます。
テンプレートはとりあえず "Widget" にしておいてください。一番機能の少ないテンプレートです。
選択できたら "次へ" をクリックします。





クラス名とファイル名の設定画面が出てきます。
今のところそのままでも問題ないでしょう。
"パス" 欄が、プロジェクトのフォルダになっているか確認しておいてください。ここでは、さきほどと違い、個々のプロジェクトのフォルダを直接指定する必要があります。
設定できたら "次へ" をクリックします。





確認画面が出てくるので、そのまま "完了" をクリックしてください。





するとこのように、3 つのファイルが追加されます。
  • form.cpp (今作ったウインドウのクラスの実装)
  • form.h (ウインドウのクラスのヘッダ)
  • form.ui (GUI デザイン画面で編集できる、XML 形式の GUI 定義ファイル)


(クリックで拡大します。)



部品一覧から、 "Label" を選んでドラッグすると、文字列表示用の部品が配置されます。


(クリックで拡大します。)



配置したラベルは、ダブルクリックすると内容を書きかえられるようになります。
"Hello World" と入力して、文字が途切れない程度に領域を大きくしてください。
ウインドウの作成は以上です。





main 関数を作る


ウインドウはできましたが、開始場所がないとアプリケーションが始められないので、 main() 関数を作りましょう。
プロジェクトの一覧の "ソース" のところを右クリックして、 "新しいファイルを追加" を選んでください。





今度は、 "C++ ソース ファイル" を選びます。





名前は "main" としておきます。
拡張子は省略すると "cpp" が追加されるので、特に入れる必要はありません。
バグなのか不親切なだけなのかは分かりませんが、今のところ (Qt Creator 1.3)、 "パス" 欄に入るはずのプロジェクト名のフォルダが省略されてしまうので、手動で個々のプロジェクト名を入れましょう。





確認画面が出てくるので、そのまま "完了" をクリックしてください。





プロジェクト一覧に "main.cpp" が追加されましたでしょうか。





"main.cpp" をダブルクリックして、コードの入力画面が出たら、次のようにコードを入力してください。
#include <QtGui/QApplication>
#include "form.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    Form form;
    form.show();
    return app.exec();
}




ここまで完了したら、実行してみましょう。
Qt Creator の画面の左下から、実行ボタンを押してください。
コンパイルには 10 秒 から 30 秒程度かかるかもしれません。





コンパイルが完了した後、こんな画面が出てきましたでしょうか。
出てきたら完了です。
お疲れ様でした。





あまり細かい部分には触れませんでしたが、"test.pro" ファイルや、"form.h", "form.cpp" ファイルの中身も見てみてください。 "form.ui" もテキストエディタでそのまま見ることができます。 "test.pro" の中身は、"新しいファイルを追加" するたびに自動的に更新されていきます。

プロジェクトフォルダの中をエクスプローラ等で見ていただければ分かると思いますが、コンパイル時に debug フォルダ内に "moc_form.cpp" というファイルと、プロジェクトフォルダ直下に "ui_form.h" というファイルが追加されています。たぶんこれは "form.ui" から自動生成されたものと思われます。 *.ui の中身は XML ですから、直接コンパイラに渡してもコンパイルできないのでこのような構造になっているんだと思います。これらのファイルの存在は QtCreator を使っている限り、特に意識しなくても良いでしょう。