いまさらはじめる Ruby/Tk

# 概要

マルチプラットフォームで使えてブラウザを使わず、大きめのライブラリを入れなくても良い中小零細企業利用レベル想定のRubyで手軽に作れるGUIソフト開発をしたいということでRuby/Tkをはじめてみました。参考にしているページがRuby1.8系での説明だったり、キャプチャの画像がVineLinuxだったりと、とても楽しそうな予感がしてます(^_^)
ここではRuby/Tkの環境構築と簡単なアプリ作成まで。詳細は[Ruby/Tk覚え書き](http://qiita.com/ftakao2007/items/72838abb4bab054c4c81)で書きます。

# 環境構築

※ この記事にコメントいただきましたように、Ruby2.4以降でtkを使う場合は別途インストールする必要があります。

```
gem install tk
```

## Mac
* ruby
    * rbenvを入れてruby2.2.2をセットしました
* Tcl/Tk
    * /usr/bin/wishが有ることを確認します
    * バージョンは8.5

``` bash:バージョンの確認
$ wish
% puts $tk_version
8.5
```

## Ubuntu trusty(14.04)

* ライブラリのインストール

``` bash:ライブラリのインストール
$ sudo apt-get update
$ sudo apt-get install tk tcl tk8.6-dev tcl8.6-dev
```

* ruby
    * 以下のようにrbenvでruby2.2.2をインストール

``` bash:rubyインストール
$ RUBY_CONFIGURE_OPTS="--with-tcltkversion=8.6 \
--with-tcl-lib=/usr/lib/x86_64-linux-gnu \
--with-tk-lib=/usr/lib/x86_64-linux-gnu \
--with-tcl-include=/usr/include/tcl8.6 \
--with-tk-include=/usr/include/tcl8.6 \
--enable-pthread" rbenv install 2.2.2 -v
$ rbenv global 2.2.2
$ rbenv rehash
```

* Tcl/Tk
    * /usr/bin/wishが有ることを確認します
    * バージョンは8.6


# 動作確認
## Tcl/Tkの動作確認
helloというボタンを表示して押したら消える

``` bash:hello
$ wish
% button .btn -text "hello" -command "exit"
.btn
% pack .btn  ### これを実行するとhelloとかかれた窓が表示される
```
![スクリーンショット 2015-07-31 8.46.32.png](https://qiita-image-store.s3.amazonaws.com/0/20474/605da3de-9f1f-95dd-f85f-e99e51d86f39.png)
helloを押すとWindowが消えます。

## Ruby/Tkの動作確認
exitというボタンを表示して押したら消える

``` ruby:exit.rb
$ vi exit.rb
====================
require 'tk'

button = TkButton.new   ### TkButtonというRuby/Tkのウィジェットをインスタンス化。
button.text = 'exit' ### ボタンに表示するテキストを設定
button.command = proc { exit }   ### ボタンが押されたときに終了する
button.pack   ### ボタンをウインドウにパッキングする(ウインドウにボタンを載せる)

Tk.mainloop ### Tkのメインループを実行
====================

$ ruby exit.rb
```

![スクリーンショット 2015-07-31 8.58.17.png](https://qiita-image-store.s3.amazonaws.com/0/20474/fcce0339-a853-9b25-4171-87ed6ae944cb.png)
exitを押すとWindowが消えます。


# 作ってみる
参考にある「チュートリアルRuby/Tk」そのまま引用。

## 落書き帳

``` ruby:rakugaki.rb
require "tk"

size = 5

c1 = TkCanvas.new {|c|
  width 200
  height 200
  bind 'B1-Motion', proc { |x,y|
    #TkcRectangle.new(c, x, y, x+size, y+size) {
    TkcOval.new(c, x, y, x+size, y+size) {
      outline 'blue'
      fill 'blue'
      tag 'p'
    }}, "%x %y"
  pack
}

TkButton.new {
  text "Clear"
  command { c1.delete('p') }
  pack
}

Tk.mainloop
``` 
以下のように青いラインで絵がかけます。clearを押すと描いた絵が消えます。
![スクリーンショット 2015-08-01 16.50.56.png](https://qiita-image-store.s3.amazonaws.com/0/20474/82170e30-cbb7-2649-3335-fb4a050bc86b.png)

## 電卓

``` riby:dentaku.rb
require 'tk'

e = TkEntry.new { relief 'sunken' }.pack('fill' => 'x')

r = 0.25

TkFrame.new { |f|
  "789*456/123-0+=C".split(//).each_with_index do |w, i|
  TkButton.new(f) {
    text "#{w}"
    bind('1', proc { e.value = eval e.value }) if w == "="
    bind('1', proc { e.value = "" }) if w == "C"
    command { e.insert('end', w) }  if w != "C" && w != "="
    place('relx' => (i % 4) * r, 'rely' => i / 4 * r,
          'relw' => r, 'relh' => r)
  }
  i += 1
  end
  height 120
  width 120
}.pack('fill' => 'x')

Tk.mainloop
```
![スクリーンショット 2015-08-01 16.58.49.png](https://qiita-image-store.s3.amazonaws.com/0/20474/c5f8efa2-65e6-cfc3-93bb-fb1e10c3d576.png)

## 3D plot

``` ruby:3dplot
require 'tkextlib/tcllib/plotchart'
include Tk::Tcllib::Plotchart

[[:yellow,:red],[:green,:darkgreen]].each{|c|
s = Plot3D.new([0, 10, 3], [-10, 10, 10], [0, 7.5, 2.5],width:500,height:400){
  title "3D Plot"
  grid_size(80,80)
  color(c[0],c[1])
  plot_function{|x,y|
    x1 = x.to_f/9.0
    y1 = y.to_f/9.0
    3.0 * (1.0-(x1*x1+y1*y1))*(1.0-(x1*x1+y1*y1))
  }
}.pack(side: :left)
}
Tk.mainloop
```

![スクリーンショット 2015-08-10 8.31.37.png](https://qiita-image-store.s3.amazonaws.com/0/20474/34e3c19f-7b63-56a5-4c06-d7603c75fab9.png)


このようにちょっとしたものならすぐ作れます。

# 参考

* 環境構築
    * [Mac OS X で Tcl/Tk を使う](http://ayiva.sakura.ne.jp/misc/Y199/tclet/mac/tclet-mac.html)
    * [Lubuntu 14.04にrbenvとruby-buildで入れたRuby 2.1.5でRuby/Tkを使う](http://5zalt.hatenablog.com/entry/2014/11/22/170206)

* チュートリアルや解説など
    * [Ruby/Tk の動向](http://magazine.rubyist.net/?0003-RubyTkMovement)
    * [チュートリアル Ruby/Tk](http://pub.cozmixng.org/~the-rwiki/rw-cgi.rb?cmd=view;name=Ruby%2FTk+%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB)
    * [Ruby/Tk入門](http://ronor.web.fc2.com/rubytk/)
    * [RUBY/TKで簡単にグラフを作成する](http://medfreak.info/?p=273)