第2回～第3回の演習で実際に（自分で手を動かして）学んでもらう内容についてです．

step1からstep6まで，もれなく，順番に進めていき，gtkプログラミングに関する簡単な仕組みを理解してください．

!!! 準備

* gtkの演習用にディレクトリを作成してください．
6<
8<
% (cd ~; mkdir -p csd/gtk)
>8
* csdは本講義用のディレクトリ（トップ）
* csd/gtkは入門gtk+用のディレクトリ
>9

!!! お手本コード置き場

教育用端末なら
6<
[/home/prog/kimura/csd/gtk/tutorial|file:///home/prog/kimura/csd/gtk/tutorial/]
>9
以下にあります．

!!! 演習内容

[教科書|http://wiki.cis.iwate-u.ac.jp/~wiki/csd/docs/GTK-book-all.pdf]第2章の内容をトレースし，中身を理解する．

!! [step1] 空ウィンドウ作成

* csd/gtk/image-viewer/1 を作り，
* image-viewer.c を（教科書ソース2-1どおりに）入力
* コンパイル，動作確認
6<
* コンパイルコマンドは
8<
gcc -o image-viewer image-viewer.c `pkg-config --cflags --libs gtk+-2.0`
>8
* 動作確認は
8<
./image-viewer
>8
* プログラムの終了はウィンドウの「×」ボタンか，プログラムを実行した端末ウィンドウで「Ctrl+C」
>9
* Makefile を作成してみる（参考：[[Makefileの書き方]]）
6<
* 解答例
8<
# $Id:$
# -*- coding:utf-8; -*-

CC = gcc

TARGET = image-viewer

GTK2FLAG = `pkg-config gtk+-2.0 --cflags --libs`

$(TARGET): image-viewer.c
        $(CC) image-viewer.c $(GTK2FLAG) -o $(TARGET)
>8
以下は中級者向け．（$< とか $@ とか .PHONY とか，分からないことは自分で調べてみよう！）
8<
# $Id:$
# -*- coding:utf-8; -*-

CC = gcc

TRGS = image-viewer

GTK2FLAG = `pkg-config gtk+-2.0 pango gdk-pixbuf-2.0 --cflags`
GTK2LIBS = `pkg-config gtk+-2.0 pango gdk-pixbuf-2.0 --libs`

CFLAGS = -g -Wall -DG_DISABLE_DEPRECATED -DGTK_DISABLE_DEPRECATED -DGDK_DISABLE_DEPRECATED -DGDK_PIXBUF_DISABLE_DEPRECATED -I .

all: $(TRGS)

.c.o:
        $(CC) -c $< $(GTK2FLAG) $(CFLAGS)

image-viewer: image-viewer.o
        $(CC) -o $@ $^ $(GTK2LIBS)

image-viewer.o: image-viewer.c

.PHONY: clean
clean:
        rm -f *~ *.o $(TRGS)
>8
>9

6<
((color red '''step1で理解すべき項目'''))

* GTK+の関数を利用する場合のインクルードファイル指定，コンパイル・リンク法
* GTK+の初期化法
* ウィンドウの作成，大きさ変更，表示
>9

!! [step2] 終了ボタンの追加

* csd/gtk/image-viewer/2 を作り，
* image-viewer.c を（教科書ソース2-2どおりに）入力
* Makefile作成
* step1との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 1 2)
//表示されたウィンドウでimage-viewer.cを選択（どちら側でもよい）
//>8
//>9
* コンパイル，実行
6<
8<
cd ~/csd/gtk/2
make
./image-viewer
>8
>9

6<
((color red '''step2で理解すべき項目'''))

* ボタンウィジェットの作成，配置
* '''コンテナ'''
* '''コールバック関数'''，'''イベント'''
>9

!! [step3] 画像の表示

* csd/gtk/image-viewer/3 を作り，
* image-viewer.c を（教科書ソース2-3どおりに）入力
* Makefile作成
* step2との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 2 3)
//>8
//>9
* コンパイル，実行
** 実行の際，コマンドラインで「表示したい画像ファイル名」を指示すること
6<
教科書と同じ画像は以下にあります．
8<
/home/prog/kimura/csd/gtk/tutorial/birds.png
>8
>9

6<
((color red '''step3で理解すべき項目'''))

* イメージウィジェットの作成，配置法
* '''パッキングボックス'''
>9

!! [step4] スクロールバーの追加

* csd/gtk/image-viewer/4 を作り，
* image-viewer.c を（教科書ソース2-4どおりに）入力
* Makefile作成
* step3との差分をよく確認する
//6<
//8<
//(cd ~/csd/gtk; meld 3 4)
//>8
//>9
* コンパイル，実行
** スクロールバーで画像が動くことを確認する
** ウィンドウを大きくするとスクロールバーはどうなる？

6<
((color red '''step4で理解すべき項目'''))

* スクロールバー付ウィジェット
* スクロールバーの設定法

>9

!! [step5] メニューバーの追加

* 先に教科書の内容をよく読んでGtkUIManagerについて簡単に知っておいた方がベターです．その後，
* csd/gtk/image-viewer/5 を作り，
* image-viewer.c を（教科書ソース2-5どおりに）入力
** ソースがかなり長くなるので注意！
** 129行めを，image = gtk_image_new_from_file( argv[1] ); として，画像を表示してみるのもいいかもしれません．
* Makefile作成
* step4との差分をよく確認する（meldを使ってみよう）
6<
8<
(cd ~/csd/gtk; meld 4 5)
>8
>9
* コンパイル，実行
** メニューの内容とプログラムに記載した事項をよく確認する
** Unityを使っている場合，初期設定は'''グローバルメニュー（画面上部がメニューバーで，そこにカーソルを移動させないとメニューが表示されない）'''なので注意しよう．

6<
((color red '''step5で理解すべき項目'''))

* メニュー作成の手順
* メニュー構成を記述するXMLファイル
* メニューアイテムを設定するGtkActionEntry
* GtkUIManager
* ショートカットキーを使う場合の設定法
* メニューバーウィジェット

>9

! [2014/10/08]追記

ウィンドウ自体にメニューを表示したいよ！（グローバルメニューが嫌）という人は，

* 環境変数 UBUNTU_MENUPROXY に 0 をセット

してみてください．（ .bashrcに export UBUNTU_MENUPROXY=0 を追加して再ログイン）

オーバーレイスクロールバーが嫌だ！という人は，

* gsettings set com.canonical.desktop.interface scrollbar-mode normal を実行してみてください．
* gsettings reset com.canonical.desktop.interface scrollbar-mode で元に戻ります．


!! [step6] ファイル選択ダイアログの実装

* csd/gtk/image-viewer/6 を作り，
* image-viewer.c を（教科書ソース2-6どおりに）入力
* Makefile作成
* step5との差分をよく確認する
6<
8<
(cd ~/csd/gtk; meld 5 6)
>8
>9
* コンパイル，実行

6<
((color red '''step6で理解すべき項目'''))

* ファイル選択ダイアログ（gtk_file_chooser_dialog_new）

>9