TOC

手打ちでGUI作るのが面倒だ、という人のためのインターフェースデザイナです。

起動すると、GUIのパーツみたいなのがたくさん表示されるので、「おお、これは便利だ」ということになるのですが、一通りの使いかたを知らないと、何をすればいいのかわからなかったりします。

そこで、ここでは起動してからの操作方法等を簡単にまとめます。

起動直後の画面

ウインドウが複数開きます。注目するのは、このウインドウです。(注意：ステータスバーの「新しいプロジェクトを作成しました」は起動したばかりの状態では表示されていません。)

メインウインドウ

「新規」をクリックします。クリックすると、どの種類のプロジェクトを作成するか尋ねられます。

種類のダイアログ

このコーナーはGTK+のコーナーなので、GTK+を選択します。

そしてパレットウインドウから詰め込みたいパーツを選択します。

パレット

ウインドウは必要なので、選択します。

ウインドウ、コンテナ、その他のパーツ

ウインドウの上には原則1つのパーツしか配置できません。例えば、ウインドウ選択後、ボタンをその上に配置すると、そのウインドウはボタンだけのウインドウになってしまいます。

でも、普通のアプリケーションはウインドウ上にメニューバー、アイコン、文字を入力するスペースなどいろんなパーツを持っています。これはどうしているのでしょうか?

パレットの中に、水平ボックス、垂直ボックス、テーブル、フィックスド・コンテナなどがあります。これを利用することにより、ひとつのウインドウ上に多数のオブジェクトを配置できるようになります。ここでは例としてテキスト・ビューと「はい」、「いいえ」ボタンを水平ボックスと垂直ボックスを用いて分割したウインドウ上に配置しました。はじめてGladeを触る人は、ボックスよりもフィックスド・コンテナを利用した方がわかりやすくていいと思います。

ウインドウ画面ツリー

シグナル

Gladeはインターフェースデザイナなので、プログラム内部の処理は作成してくれません。これは後で自分で作成する必要があります。Gladeでできることは、「ボタンを押したら、なんらかの処理をする」という表面的なソースコードの作成までです。「なんらかの処理をする」だけではプログラムは動きませんので、あとでどんな処理をするのか、ということを自分でコーディングする必要があります。

シグナル設定

シグナルの設定で、オブジェクトに対するアクションにたいして、何を行うか、ということをおおまかに決められます。

具体的には、アクションにたいしてどの関数を実行するのか(関数のテンプレートまではGladeが作成してくれますが、中身は空です)を設定します。簡単な命令(例えば終了する)であれば、Gladeが作成してくれます。

シグナルのエントリーボックスに自分で入力するか、それとも右のボタンからシグナルを選択します。ここではボタンに対してクリックイベントを設定します。

シグナル設定2

シグナル設定3

上の画面の設定は「ボタンをクリックするとon_button1_clicked関数を実行する」という意味です。関数名は自分で自由に変えられるので、わかりやすい名前に設定しましょう。「追加」で設定完了です。

シグナル設定4

1行で終わるような命令であれば、わざわざ関数を自作する必要はありません。ウインドウを閉じたらプログラムを終了するように設定します。

シグナル設定4

gtk_main_quitはGTKのプログラムを終了する命令です。

void gtk_main_quit(void)

一通り作り終わったらセーブします。セーブするときいろいろなオプションが設定できますが、ここではデフォルト設定のまま保存します。保存したディレクトリとファイル名は覚えておきましょう。

ここで作成したファイルは「.glade」という拡張子の付いたGlade用のファイルです。なので、このファイルを直接いじって中身を作成したり、これをこのままコンパイルすることはできません。プログラムの中身を作ったりするにはメインのウインドウのビルドをクリックします。これでプロジェクトのディレクトリにソースコードが書き出されます。。

コンパイル手順

プロジェクトのディレクトリの中には様々なファイルやディレクトリが作成されています。srcディレクトリの中に作成されたソースコードがはいっていますが、それをいじる前にコンパイルの手順を覚えましょう。

まず、autogen.shを実行します。これはコンパイルの準備です。これに成功したらmakeと打ちます。これでコンパイルが開始されます。

$ ./autogen.sh
$ make

コンパイルが終了したら、実行してみましょう。srcディレクトリのなかにプログラムができあがっています。

なお、make installでインストールできますが、まだ完成していないのでインストールは行いません。

実行してみた

このプログラムはまだ中身が入っていないので、ボタンを押してもなんの反応もありません。クローズボタンでプログラムを終了させましょう(このページの上から順番にやってきたのであれば、閉じるボタンで終了するはずです)。なお、上の方でウインドウを閉じるイベントについて設定しなかった場合は、ウインドウは閉じてもプログラムは終了しません。ターミナル上で「Ctrl + C」するかkillコマンドで強制終了させましょう。

中身を作る

いよいよ中身を作成します。srcディレクトリの中には3つのヘッダファイルと4つのソースファイルがあるはずです。(それ以外の.oファイルなどはさっきコンパイルしたときにできた中間生成物です。害はないので無視してよいです。どうしても邪魔だと思ったらrmしたりmake cleanで一掃したりします。)この中で、いじってよいファイルといじってはいけないファイルがあります。どれをいじっていけないかは各ファイルの先頭に書いてあります。

まずはmain.cの中身を見てみましょう。かなりシンプルな作りになっています。このファイルは上書きされないので好きなように作り替えていいです。

/* main.c ソースコード　一部抜粋 */

  gtk_set_locale ();
  gtk_init (&argc, &argv);

  add_pixmap_directory (PACKAGE_DATA_DIR "/" PACKAGE "/pixmaps");

  /*
   * The following code was added by Glade to create one of each component
   * (except popup menus), just so that you see something after building
   * the project. Delete any components that you don't want shown initially.
   */
  window1 = create_window1 ();
  gtk_widget_show (window1);

  gtk_main ();
  return 0;
}

まず、テキストビュー(textview1)にプログラムから何か書き込みましょう。テキストビューに書き込むためにはテキストビューのwidgetを取得する必要があります。これには、support.cにかかれているlookup_widgetが利用できます。(main.cにはtextview1が登場していないし、グローバル変数でもないのでそのまま使うことができません)

GtkWidget *lookup_widget(GtkWidget *widget, const gchar *widget_name)

第1引数に同じウインドウ上にあるWidget(ここではwindow1)を、第2引数には抽出したいWidget名(ここではtextview1)をセットします。

lookup_widget(window1,"textview1")

これと、テキストをセットする関数を組み合わせます。

  gtk_text_buffer_set_text (gtk_text_view_get_buffer (GTK_TEXT_VIEW (lookup_widget(window1,"textview1"))), _("終了しますか？？"), -1);

これを、create_window1の後ろにいれます。(ただ、gtk_main()の前でないと意味がないです。)

これで、テキストビューに「終了しますか？？」と表示されます。

ウインドウ

コールバックをセットする

コールバック関数はcallbacks.cに記述します。callbacks.cの中にはヘッダのロードと関数名しか書いてないです。

「終了しますか？？」の問に対して「はい」を押したときに終了させたいので、

void
on_button1_clicked                     (GtkButton       *button,
                                        gpointer         user_data)
{
	gtk_main_quit();
}

とします。また、

void
on_button1_clicked                     (GtkButton       *button,
                                        gpointer         user_data)
{
	gtk_widget_destroy(lookup_widget(GTK_WIDGET(button),"window1"));
}

としても同じです。前者はプログラムを直接終了させているのに対し、後者はウインドウを閉じることによって終了させています。ウインドウを閉じるとプログラムを終了するように設定してあるので、その結果どちらもプログラムが終了します。

テキストビューの内容、ボタンのコールバック関数を作りなおせば、これだけでノベルゲームの類が作れるかもしれません。

indexに戻る