Text
Page: 1
5分で学ぶGTK+
Ruby/GTK2のサンプルもあるよ！
@myokoym
Ruby-GNOME2 Project Team
デスクトップアプリケーションを作る会
2014/03/16
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 2
はじめに
ハ ン ズ オ ンだ と思う者に は
ハンズオンであり、もくもく
会だ と思う者に は も く も く会
である
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 3
もくもく会だと思う⼈
✓ もくもくしてください
✓ 相談などはいつでもどうぞ :-)
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 4
ハンズオンだと思う⼈
✓ スライドにサンプルコードを映
すので、参考にしながら進めて
ください
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 5
ここでアンケートです
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 6
Q.1
Ruby（1.9.3以降）はインストー
ル済みですか？
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 7
Noの⽅
✓ 個別に対応します
2014年3⽉16⽇現在、Ruby/GTK2はWindows用のRuby
x64版では動かないため、x86版をインストールしてくださ
い
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 8
Q.2
Ruby/GTK2はインストール済み
ですか？
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 9
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
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 10
インストールを待つ間に
GTK+ の紹介をします
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 11
GTK+ とは
✓ GUIツールキット
✓ オープンソース
✓ マルチプラットフォーム
✓ ⾊々な⾔語から使える
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 12
用語
✓ ウィジェット
✓ イベント（シグナル）
✓ メインループ
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 13
ウィジェット
✓ GUIを構成する部品
✓ ウィンドウ
✓ ボタン
✓ など
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 14
イベント（シグナル）
✓ ユーザーの操作で発⽣
✓ ウィンドウを閉じる
✓ ボタンをクリックする
✓ など
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 15
メインループ
1. イベントを待つ
2. イベントに応じて処理を⾏う
3. 1に戻る
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 16
座学は以上ですが、そろそろ
インストールできましたか？
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 17
では、実際に⼿を動かして
Ruby/GTK2を使ったデスク
トップアプリケーションを作
成していきます
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 18
サンプルコード全⽂
https://gist.github.com/myokoym/9489619
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 19
Hello, GUI!
require "gtk2"
window = Gtk::Window.new
window.signal_connect("destroy") do
Gtk.main_quit
end
window.show_all
Gtk.main
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 20
Hello, GUI!
require "gtk2" #Ruby/GTK2 を使う準備
# ウィンドウ・ウィジェットのオブジェクトを作成
window = Gtk::Window.new
# ウィンドウが閉じられたら処理が実行される
window.signal_connect("destroy") do
Gtk.main_quit # メインループ終了
end
window.show_all # ウィジェットを画面に表示
Gtk.main # メインループ開始
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 21
実⾏
$ ruby hello_gui.rb
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 22
タイトルを設定
window = Gtk::Window.new
# ウィンドウの title プロパティに設定
window.title = "Image Viewer sample"
window.signal_connect("destroy") do
Gtk.main_quit
end
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 23
画像を表⽰
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) # ウィンドウに画像を追加
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 24
実⾏
$ ruby image-viewer.rb ファイル名
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 25
画像を2枚以上並べる
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
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 26
実⾏
$ ruby image-viewer.rb ファイル名 ファイル名
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 27
ワイルドカードを許容
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
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 28
実⾏
$ ruby image-viewer.rb ディレクトリ名/*.png
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 29
画像以外をスキップ
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)
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 30
実⾏
$ ruby image-viewer.rb ディレクトリ名/*
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 31
デフォルトサイズを設定
window = Gtk::Window.new
window.title = "Image Viewer sample"
window.set_default_size(640, 480)
window.signal_connect("destroy") do
Gtk.main_quit
end
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 32
スクロールバーを追加
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)
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 33
スクロール不要時は消す
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)
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 34
右クリックメニューの準備
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
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 35
右クリックで削除機能
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)
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
Page: 36
参考リンク
Ruby/GTK2 チュートリアル
http://ruby-gnome2.sourceforge.jp/ja/hiki.cgi?gtk2-tut
Ruby/GTK2 sample
https://github.com/ruby-gnome2/ruby-gnome2/tree/
master/gtk2/sample
Ruby/GTK3 sample
https://github.com/ruby-gnome2/ruby-gnome2/tree/
master/gtk3/sample
5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！
Powered by Rabbit 2.1.2
