このドキュメントは，Unix/Linux上のC言語でGUIプログラミングを行う方法について，掻い摘んで説明しています。 環境に関しては，OSはLinux(Debian/Ubuntu系), コンパイラはgcc，GUIツールキットはGTK+2.0，を使用します。 しかし，GTK+の開発環境を導入すれば，他のOSでもこのドキュメントのプログラムを利用することができます。

趣旨としては，「GUIプログラミングはこんな感じでやるんだぜ」という雰囲気を味わってもらいたいだけですので， プログラミングや，GTK+の細かい使い方については触れません。その手の情報に関しては，ページ中に解説サイトへの リンクを貼ってありますので，そちらをご覧ください。

このページの便利な読み方について説明します。 各見出しの横に「↑」マークがあります。これをクリックすると，目次にもどることができます。 また，コード部分をダブルクリックすると，そのコード全体を選択する事ができます。この状態でコピーすると，プログラムを簡単に入手できます。 （必ずjavascriptを使えるブラウザで見てください。）

全てのプログラムを一括してダウンロードしたい場合は，次のリンクをクリックしてください。
howto-gtk.zipのダウンロード

GTK+はC言語用のライブラリですが，C++やPythonなど，他言語でのバインディングも存在するため， 幅広く利用することができます。

GTK+を使用して作られたソフトとしては，GIMP，Gnome，Mozilla Firefox などがあります。詳しくは WikipediaのGTK+のページ でも読んでください。

GTK+関係のオススメサイトとしては，次のようなサイトがあります。

Linuxを実行しながら、私はWindowsのファイルを使用することができます

• GTK/GNOMEによるGUIプログラミング
  名著『入門GTK+』の著者のサイトです。
  リンク先の「配布物」で『入門GTK+』のpdf版が読めます。（現在，10章中6章まで公開されています。）
• GTK::超入門
  日本語の入門サイトです。検索機能を活用すると，目的の情報を得られやすいです。
• GTK Tutorial(日本語版)
  本家チュートリアルを有志が和訳した物です。
  画像がほとんどないので，イメージがわきにくいのが難点だと思います。
• GTK+ 2.0 Tutorial(英語)
  開発本家の初心者向けチュートリアルです。
  上記サイトの元になったサイトです。
• GTK+ - Documentation（英語）
  開発本家のDocumentationのページです。
  上記のチュートリアルや，もっと詳しいリファレンス，解説サイトへのリンク集などがあります。
• GNOME ドキュメントライブラリ（英語）
  GNOMEやGTK+，それに関係が深いライブラリに関する情報をまとめた総合サイトです。
  APIリファレンスなどもあり，構造体や関数などの詳しい情報が知りたいなら，頻繁にアクセスすることになるでしょう。 英語が中心ですが，時々日本語があります。
  

GTK+，Gladeのインストール

開発環境はパッケージマネージャで簡単に整えられます。 Debian/Ubuntu系のLinuxの場合は，次のコマンドを実行するだけです。

$ sudo apt-get install libgtk2.0-dev glade

最後に，正しくインストールされているかどうか確認しましょう。 次のコマンドを実行して，"No package 'gtk+-2.0' found"のようなメッセージが表示されなければ正しくインストールできています。正常にインストールされている場合，次のような呪文が表示されます。（呪文の意味は気にしないでください）

$ pkg-config --cflags gtk+-2.0
-pthread -I/usr/include/gtk-2.0 -I/usr/lib/gtk-2.0/include -I/usr/include/atk-1.0 -I/usr/include/cairo -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/pango-1.0 -I/usr/include/glib-2.0 -I/usr/lib/glib-2.0/include -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng14

コンパイル方法

$ gcc $(pkg-config --cflags --libs gtk+-2.0) test.c -o test

$ alias gtp='gcc $(pkg-config --cflags --libs gtk+-2.0)'

$ gtp test.c -o test

私はVisual Studioを実行するには、 Vistaのどのバージョンが必要ですか

上記のエイリアスコマンドを，${HOME}/.bashrcの末尾に書いておけば， 次にターミナルを立ち上げた時もgtpコマンドが使えるようになります。

ウインドウを表示する

$ gcc $(pkg-config --cflags --libs gtk+-2.0) window01.c -o window01
$ ./window01

ウインドウにボタンをつける

ウインドウに画像を表示する

プログラムのコメントにある「パッキンボックス」というのは，htmlでいう所のテーブルのような物です。 これを使うと，ウインドウ上に複数のウィジェットを配置することができます。

そのため，パッキンボックスを使うと，ウィジェットを好きなように配置できます。 これによりどのようなインタフェースも作成できます。

しかし，私自身はあまりこのような方法でGUIを作りません。 もっと直感的にGUIを作成する方法があります。それは，GUIデザイナーと呼ばれるツールを使用する方法です。 これについては次章でお話します。

Gladeとは何か

GladeはGTK用のGUIデザイナーです。これを使うと，ペイントソフトのような感覚でGUIを作れます。 Gladeはバージョンによって，使い方が異なりますが，ここではGlade 3系の使い方を説明します。

Gladeは作成したGUIを，".glade"という拡張子で出力します。gladeファイルの実体はxmlです。 これをプログラムに読み込む事で，作成したGUIを動かすことができます。

それでは，さっそく使ってみましょう。ここでは，前節「ウインドウに画像を表示する」と同じ物をつくります。

Gladeの使い方

Gladeを起動すると，次のようなウインドウが表示されます。とりあえず「閉じる」ボタンをクリックしてください。

次に，ウインドウボタンをクリックします。 すると，画面にウインドウが作られます。

Ubuntuのランプサーバー上のデスクトップをインストールする方法

続いて，横パッキンボックスを作りましょう。 ツールから横パッキンボックスを選び，ウインドウ上でクリックします。

すると，アイテム数を聞いてきますので，「２」にします。

今度は，ボタンと画像を読み込むためのフィールドを取り付けます。 ツールからボタンと画像を選んで，パッキンボックス上でクリックしてください。

最後にプロパティの設定をします。プロパティの設定は右側のインスペクターとプロパティを使います。

今，インスペクターの「ウィジェット」には，次のウィジェットがあります。

• window1
• vbox1
• image1
• button1

• window1　→　window
• vbox1　　→　vbox
• image1　 →　image
• button1　→　button

次に，インスペクターでwindowを選択して，「プロパティ」の「全般タブ」内の， 「デフォルトの幅」「デフォルトの高さ」を，それぞれ300, 400にします。

buttonのプロパティで，「パッキング」タブの「拡張」を「いいえ」にします。

「全般」タブで，「画像がついたラベル」から「ストックボタン」にチェックを入れ替えます。 そして，「ストックボタン：」で「終了（Q）」を選びます。

「シグナル」の「GtkButton」内の「cliked」で，「ハンドラ名」に「on_button_clicked()」を選択します。

最後に，imageのプロパティを変更します。 「シグナル」の「GtkButton」内の「expose-event」で，「ハンドラ名」に「image_expose_event_cb()」を選択します。

以上の設定を行うと，ウインドウが次のようになります。ボタンがそれらしくなりましたね。

Gladeファイルを用いたプログラム

理屈を説明しないのは，「こうすれば動くんだな」くらいの気持ちでプログラムを読んでほしいからです。 本音を言えば私が詳しく知らないからです（＾＾；）
下記のプログラムは，Glade3 tutorial (6) - Signalsを参考にして書いていますので，詳しい解説が欲しい方は，こちらを読んでください。

Gladeファイルを使うときは，コンパイルのコマンドが違います。次のコマンドを使ってください。

$ gcc $(pkg-config --cflags --libs gtk+-2.0 gmodule-2.0) glade01.c -o glade01

• glade01.c
• gui.glade
• girl.png
• glade01(ビルドして生成された実行ファイル)

今回作成したプログラムでは，「ウインドウに画像を表示する」よりも複雑なプログラムになってしまいました。 しかし，もっと実用性のあるソフトウェアを作ろうとした場合，GUIデザイナーを使った方が，圧倒的に楽になります。

図形の描画

cairoについては，次のようなサイトを参考にしてください。

イベントループ

今回はブロック崩しなので，「ボールを動かす」「ボールがブロックにあたったか判定する」「キーボード入力を反映する」などといった処理をイベントループで行います。

ボールを動かす

上記のプログラムでは，10ミリ秒おきにcb_expose_event()が呼び出されます。 呼び出されるたびに，ボールの位置を示すパラメータ(t_x, t_y)の値が変わるので， ボールが動いているように見えます。

キーボード入力を調べる

テキストの表示

ただし，下記の方法はcairoによるテキストの表示方法であって， ツールソフトなどをつくる際にはlabelウィジェットというテキスト表示専用のウィジェットを使ったほうがいいです。

ブロック崩しゲーム

関数cb_expose_event()が，ゲーム全体の流れをコントロールしているので，ここを中心に読めば わかりやすいと思います。（背景色が違う部分です）

java等でゲームを作ったことのある人なら，このプログラムにダブルバッファリングに関する 記述がないことを不思議に思うかもしれません。
GTK+の場合，ダブルバッファリングは自動でやってくれます。

実行すると，次のようになります。