RubyでGUIを作る (Tcl/Tk)

Rubyで簡単にGUIを作成するにはRuby/Tkを利用するのが簡単です。 GUIを作れるのはTkだけでは有りませんので、それらは別の機会に紹介します。

Windows版のRubyのインストールを RubyInstaller からダウンロードして行なう場合にはインストール時のオプションで Tcl/Tkも同時にインストールすることが出来ます。

Tcl/Tkを後からインストールする場合には以下のようにして下さい。

RubyのTcl/Tkは 九州工業大学大学院の永井 秀利さんが活躍しています。1.9系は 永井さんのページ Ruby/Tk-KitをダウンロードしてRubyをインストールしてあるフォルダーに 上書きするだけで、他にTcl/Tkをインストールする事無く使えるようになります。

詳細は Ruby/Tk-Kitページ を参照してください。

Windows用のRubyInstallerでRubyをインストールした場合にはこれを選びます。

environment (please extract at RubyInstaller's lib/ruby/1.9.1) :
        rubytk-simple-w-img_ext-20100523-for-RubyInstaller191.zip

1.8系は ActiveStateのActiveTcl の8.4.xx.xをインストールすると使えるようになります。 最新版(8.5.x)を入れるとRuby側のライブラリと版が矛盾して使えないので注意してください。

Tcl/Tkが使えるようになっているかを確認するため下記のプログラムを実行してみましょう。

 require 'tk'
 Tk.mainloop

 上記プログラムをtk_test.rbとして作ったら下記のように実行
 
 ruby tk_test.rb

これで中身が何も無い窓が出れば正しくインストールされています。 窓が出ない時にはインストールをやり直してください。

ここでは普段ツールを作る時に良く使う部分だけを解説します。

込み入ったGUIを作るために詳細に知りたい場合には Rubyのソース をダウンロードし ./ext/tk/sampleの下のデモを参照してください。このデモの概要は このページ に紹介されています。

逆引きRuby/Tk も便利だと思います。

ツールを作る時にGUIで欲しい機能は、初期値や設定値の表示と修正、実行開始・終了等のボタン、 実行結果の表示領域だと思います。

それらを持ったダイアログのソースの例をあげます。

 #! ruby -EWindows-31J
 # -*- mode:ruby; coding:Windows-31J -*-
 
 require 'tk'
 
 
 Tk.root.title('TKダイアログ')
 
 operation = TkVariable.new('+')
 option1 = TkVariable.new
 option2 = TkVariable.new
 
 
 f1 = TkFrame.new.pack('side'=>'top','fill'=>'x')
 f2 = TkFrame.new.pack('side'=>'left')
 f3 = TkFrame.new(f2).pack
 
 v1_name  = TkLabel.new(f1, 'text'=>'値1').pack('side'=>'left')
 v1_value = TkEntry.new(f1,'width'=>10).pack('side'=>'left')
 
 v2_name  = TkLabel.new(f1, 'text'=>'値2').pack('side'=>'left')
 v2_value = TkEntry.new(f1,'width'=>10).pack('side'=>'left')
 
 b1=TkButton.new(f1,'text'=>'実行').pack('side'=>'left')
 
 b1.command{
   $txt.value += v1_value.value + operation.value + v2_value.value + "\n"
   $txt.value += "Option 1 が選択されています。\n" if option1 == '1'
   $txt.value += "Option 2 が選択されています。\n" if option2 == '1'
 }
 
 TkButton.new(f1,'text'=>"  Exit  ",'command'=> proc { exit }).pack('side' => 'left')
 
 ['+','-'].each {|op|
   TkRadioButton.new(f2) {
     text "#{op}"
     relief 'flat'
     value op
     variable operation
   }.pack('side'=>'top', 'pady'=>2)
 }
 
 
 TkCheckButton.new(f3) {
   text "Option1"
   variable option1
 }.pack('side'=>'top', 'pady'=>2)
 
 TkCheckButton.new(f3) {
   text "Option2"
   variable option2
 }.pack('side'=>'top', 'pady'=>2)
 
 
 scr = TkScrollbar.new.pack('fill'=>'y', 'side'=>'right')
 $txt = TkText.new {
   yscrollbar(scr)
   pack('fill' => 'both', 'expand' => true, 'side'=>'right')
 }
 
 Tk.mainloop

この例ではまず require 'tk' でTkの使用を宣言します。 続いて Tk.root.title('TKダイアログ') でウインドウにタイトルを付けています。

TkVariableはTkで使う変数の宣言です。ここではラジオボタンの選択結果を受ける operationとチェックボックスの結果を受けるoption1,option2を定義しています。

TkFrameは諸々のオブジェクトの入れ物としてのフレーム構造です。 フレームの中に子供のフレームを入れたりして配置をやりやすくします。 newの時に親フレームを指定すると、その子フレームと成ります。

配置はpackの時のside指定(どちらに詰めるか)やfill(x,y方向に拡張する)等で 指定することで簡単に並べることが出来ます。

TkLabelでラベルを作れます。textでラベルの文字列を指定します。

TkEntryで文字入力のエディットボックスが作れます。widthでサイズを指定します。

TkButtonでボタンを作れます。textでボタンの文字列を指定します。 ボタンにはボタンが押されたときの手続きを指定できます。 ここではボタンを b1 という名前で生成して、後から command として ボタンが押されたときに実行される手続きをブロックとして指定しています。

Exitボタンの方は、newの引数としてcommand手続きを指定しています。 proc { } でブロックが手続きであることを指定しています。

TkRadioButtonはnewの時に f2 を引数として渡しf2フレーム内に 作る様に指定しています。ここでvariable operation と指定することで ラジオボタンの選択結果がoperationに入る事になります。

TkCheckButtonはf3フレームに作っています。 ここでもvariable指定で結果が入る場所を指定しています。

TkScrollbarとTkTextでスクロールバー付きのテイストエリアを作れます。 ここではテキストエリアを $txt という変数に入れて置くことで b1.commandの中で $txt.value に値を書き込むことで表示しています。 このTkTextはnewでフレームを指定していないのでf1,f2と同列のオブジェクトと成ります。

同様にラジオボタンの値は operation.value で、エディットボタンの値も .valueで取り出せます。チェックボックスは特に指定しなければ選択時に '1' と成ります。

だいたい、これくらい有れば、それなりにツールを作れると思います。

Tkでのファイル選択のダイアログは次の様に使用します。

#! ruby -EWindows-31J
# -*- mode:ruby; coding:Windows-31J -*-

require 'tk'


Tk.root.title('TKダイアログ')

b1 = TkButton.new('text' => 'ファイル選択ボタン').pack('fill'=> 'x')
b1.command {
  file = Tk.getOpenFile({'title' => 'ファイル選択',})
  if file != ''
    Tk.messageBox('message' => file + 'を選択しました。')
  else
    Tk.messageBox('message' => '選択なし。')
  end
}

Tk.mainloop

getOpenFileを呼び出すとファイルダイアログが出て、ファイルを選択可能となり選択したファイル名が渡されます。

Tk.messageBox	メッセージを表示
Tk.getOpenFile	ファイル選択ダイアログ
Tk.getSaveFile	保存するファイル選択ダイアログ
Tk.chooseDirectory	ディレクトリ選択ダイアログ
Tk.chooseColor	色指定ダイアログ