Rabbit Slide Show

5分で学ぶGTK+

2014-03-16

Description

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

Other slides