5分で学ぶGTK+ - Speaker Deck

Slide 1

Slide 1 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 5分で学ぶGTK+ Ruby/GTK2のサンプルもあるよ！ @myokoym Ruby-GNOME2 Project Team デスクトップアプリケーションを作る会 2014/03/16

Slide 2

Slide 2 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 はじめにハンズオンだと思う者にはハンズオンであり、もくもく会だと思う者にはもくもく会である

Slide 3

Slide 3 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 もくもく会だと思う⼈もくもくしてください相談などはいつでもどうぞ :-) ✓ ✓

Slide 4

Slide 4 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 ハンズオンだと思う⼈スライドにサンプルコードを映すので、参考にしながら進めてください ✓

Slide 5

Slide 5 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 ここでアンケートです

Slide 6

Slide 6 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 Q.1 Ruby（1.9.3以降）はインストール済みですか？

Slide 7

Slide 7 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 Noの⽅個別に対応します ✓ 2014年3⽉16⽇現在、Ruby/GTK2はWindows用のRuby x64版では動かないため、x86版をインストールしてください

Slide 8

Slide 8 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 Q.2 Ruby/GTK2はインストール済みですか？

Slide 9

Slide 9 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 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 ✓

Slide 10

Slide 10 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 インストールを待つ間に GTK+ の紹介をします

Slide 11

Slide 11 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 GTK+ とは GUIツールキットオープンソース ✓ マルチプラットフォーム ✓ ⾊々な⾔語から使える ✓ ✓

Slide 12

Slide 12 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 用語ウィジェット ✓ イベント（シグナル） ✓ メインループ ✓

Slide 13

Slide 13 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 ウィジェット GUIを構成する部品ウィンドウ ✓ ボタン ✓ など ✓ ✓

Slide 14

Slide 14 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 イベント（シグナル）ユーザーの操作で発⽣ウィンドウを閉じる ✓ ボタンをクリックする ✓ など ✓ ✓

Slide 15

Slide 15 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 メインループイベントを待つ 1. イベントに応じて処理を⾏う 2. 1に戻る 3.

Slide 16

Slide 16 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 座学は以上ですが、そろそろインストールできましたか？

Slide 17

Slide 17 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 では、実際に⼿を動かして Ruby/GTK2を使ったデスクトップアプリケーションを作成していきます

Slide 18

Slide 18 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 サンプルコード全⽂ https://gist.github.com/myokoym/9489619

Slide 19

Slide 19 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 Hello, GUI! require "gtk2" window = Gtk::Window.new window.signal_connect("destroy") do Gtk.main_quit end window.show_all Gtk.main

Slide 20

Slide 20 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 Hello, GUI! require "gtk2" #Ruby/GTK2を使う準備 # ウィンドウ・ウィジェットのオブジェクトを作成 window = Gtk::Window.new # ウィンドウが閉じられたら処理が実行される window.signal_connect("destroy") do Gtk.main_quit #メインループ終了 end window.show_all #ウィジェットを画面に表示 Gtk.main #メインループ開始

Slide 21

Slide 21 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 実⾏ $ ruby hello_gui.rb

Slide 22

Slide 22 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 タイトルを設定 window = Gtk::Window.new # ウィンドウのtitleプロパティに設定 window.title = "Image Viewer sample" window.signal_connect("destroy") do Gtk.main_quit end

Slide 23

Slide 23 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 画像を表⽰ 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) #ウィンドウに画像を追加

Slide 24

Slide 24 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 実⾏ $ ruby image-viewer.rb ファイル名

Slide 25

Slide 25 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 画像を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

Slide 26

Slide 26 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 実⾏ $ ruby image-viewer.rb ファイル名ファイル名

Slide 27

Slide 27 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 ワイルドカードを許容 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

Slide 28

Slide 28 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 実⾏ $ ruby image-viewer.rb ディレクトリ名/*.png

Slide 29

Slide 29 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 画像以外をスキップ 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)

Slide 30

Slide 30 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 実⾏ $ ruby image-viewer.rb ディレクトリ名/*

Slide 31

Slide 31 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 デフォルトサイズを設定 window = Gtk::Window.new window.title = "Image Viewer sample" window.set_default_size(640, 480) window.signal_connect("destroy") do Gtk.main_quit end

Slide 32

Slide 32 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 スクロールバーを追加 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)

Slide 33

Slide 33 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 スクロール不要時は消す 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)

Slide 34

Slide 34 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 右クリックメニューの準備 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

Slide 35

Slide 35 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 右クリックで削除機能 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)

Slide 36

Slide 36 text

5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ！ Powered by Rabbit 2.1.2 参考リンク 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