5分で学ぶGTK+

: subtitle

Ruby/GTK2のサンプルもあるよ!

: author

@myokoym

: institution

Ruby-GNOME2 Project Team

: content-source

デスクトップアプリケーションを作る会

: date

2014/03/16

: allotted-time

10m

: theme

lightning-clear-blue

はじめに

# blockquote
ハンズオンだと思う者にはハンズオンであり、
もくもく会だと思う者にはもくもく会である

もくもく会だと思う人

* もくもくしてください
  * 相談などはいつでもどうぞ :-)

ハンズオンだと思う人

* スライドにサンプルコードを映すので、参考にしながら進めてください

ここでアンケートです

property

: as_large_as_possible

false

Q.1

Ruby(1.9.3以降)はインストール済みですか?

Noの方

* 個別に対応します

((‘note:2014年3月16日現在、Ruby/GTK2はWindows用のRuby x64版では動かないため、x86版をインストールしてください’))

Q.2

Ruby/GTK2はインストール済みですか?

Noの方

* Ruby 1.9.3 or 2.0.0 or 2.1.x

    $ gem install gtk2

* Ruby 2.2.0-dev

    $ git clone https://github.com/ruby-gnome2/ruby-gnome2
    $ cd ruby-gnome2
    $ rake gem:install

インストールを待つ間にGTK+ の紹介をします

property

: as_large_as_possible

false

GTK+ とは

* GUIツールキット
  * オープンソース
  * マルチプラットフォーム
  * 色々な言語から使える

用語

* ウィジェット
* イベント(シグナル)
* メインループ

ウィジェット

* GUIを構成する部品
  * ウィンドウ
  * ボタン
  * など

イベント(シグナル)

* ユーザーの操作で発生
  * ウィンドウを閉じる
  * ボタンをクリックする
  * など

メインループ

(1) イベントを待つ
(1) イベントに応じて処理を行う
(1) 1に戻る

座学は以上ですが、そろそろインストールできましたか?

property

: as_large_as_possible

false

では、実際に手を動かしてRuby/GTK2を使ったデスクトップアプリケーションを作成していきます

property

: as_large_as_possible

false

サンプルコード全文

((‘note:gist.github.com/myokoym/9489619’))

Hello, GUI!

# coderay ruby
require "gtk2"

window = Gtk::Window.new

window.signal_connect("destroy") do
  Gtk.main_quit
end

window.show_all

Gtk.main

Hello, GUI!

# coderay ruby
require "gtk2" #Ruby/GTK2を使う準備

# ウィンドウ・ウィジェットのオブジェクトを作成
window = Gtk::Window.new

# ウィンドウが閉じられたら処理が実行される
window.signal_connect("destroy") do
  Gtk.main_quit #メインループ終了
end

window.show_all #ウィジェットを画面に表示

Gtk.main #メインループ開始

実行

$ ruby hello_gui.rb

タイトルを設定

# coderay ruby

window = Gtk::Window.new

# ウィンドウのtitleプロパティに設定
window.title = "Image Viewer sample"

window.signal_connect("destroy") do
  Gtk.main_quit
end

画像を表示

# coderay ruby
window.signal_connect("destroy") do
  Gtk.main_quit
end

path = ARGV[0]

image = Gtk::Image.new
image.pixbuf = Gdk::Pixbuf.new(path)
window.add(image) #ウィンドウに画像を追加

実行

$ ruby image-viewer.rb ファイル名

画像を2枚以上並べる

# coderay ruby

hbox = Gtk::HBox.new(false, 8)
hbox.border_width = 8
window.add(hbox)

ARGV.each do |path|
  image = Gtk::Image.new
  image.pixbuf = Gdk::Pixbuf.new(path)
  hbox.add(image)
end

実行

$ ruby image-viewer.rb ファイル名 ファイル名

ワイルドカードを許容

# coderay ruby
ARGV.each do |path_or_wildcard|
  Dir.glob(path_or_wildcard) do |path|
    image = Gtk::Image.new
    image.pixbuf = Gdk::Pixbuf.new(path)
    hbox.add(image)
  end
end

実行

$ ruby image-viewer.rb ディレクトリ名/*.png

画像以外をスキップ

# coderay ruby
begin
  pixbuf = Gdk::Pixbuf.new(path)
rescue GLib::FileError, Gdk::PixbufError
  $stderr.puts($!.message)
  next
end

image = Gtk::Image.new
image.pixbuf = pixbuf
hbox.add(image)

実行

$ ruby image-viewer.rb ディレクトリ名/*

デフォルトサイズを設定

# coderay ruby

window = Gtk::Window.new

window.title = "Image Viewer sample"

window.set_default_size(640, 480)

window.signal_connect("destroy") do
  Gtk.main_quit
end

スクロールバーを追加

# coderay ruby

scrolled_window = Gtk::ScrolledWindow.new
window.add(scrolled_window)

hbox = Gtk::HBox.new(false, 8)
hbox.border_width = 8
scrolled_window.add_with_viewport(hbox)

スクロール不要時は消す

# coderay ruby

scrolled_window = Gtk::ScrolledWindow.new
scrolled_window.set_policy(:automatic,
                           :automatic)
window.add(scrolled_window)

hbox = Gtk::HBox.new(false, 8)
hbox.border_width = 8
scrolled_window.add_with_viewport(hbox)

右クリックメニューの準備

# coderay ruby

hbox = Gtk::HBox.new(false, 8)
hbox.border_width = 8
scrolled_window.add_with_viewport(hbox)

menu = Gtk::Menu.new
menu_item = Gtk::ImageMenuItem.new(Gtk::Stock::DELETE)
menu_item.signal_connect("activate") do
  hbox.remove(menu.attach_widget)
end
menu.append(menu_item)
menu.show_all

右クリックで削除機能

# coderay ruby

event_box = Gtk::EventBox.new
event_box.signal_connect("button-press-event") do |widget, event|
  if event.kind_of?(Gdk::EventButton) and event.button == 3
    menu.attach_widget = widget
    menu.popup(nil, nil, event.button, event.time)
  end
end
hbox.add(event_box)

image = Gtk::Image.new
image.pixbuf = pixbuf
event_box.add(image)

参考リンク

Ruby/GTK2 チュートリアルn ((‘note:ruby-gnome2.sourceforge.jp/ja/hiki.cgi?gtk2-tut’))

Ruby/GTK2 samplen ((‘note:github.com/ruby-gnome2/ruby-gnome2/tree/master/gtk2/sample’))

Ruby/GTK3 samplen ((‘note:github.com/ruby-gnome2/ruby-gnome2/tree/master/gtk3/sample’))