$30 off During Our Annual Pro Sale. View Details »

5分で学ぶGTK+

 5分で学ぶGTK+

デスクトップアプリケーションを作る会@札幌 2014-03-16の資料です。

Masafumi Yokoyama

March 16, 2014
Tweet

More Decks by Masafumi Yokoyama

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ! Powered by Rabbit 2.1.2
    Noの⽅
    個別に対応します

    2014年3⽉16⽇現在、Ruby/GTK2はWindows用のRuby
    x64版では動かないため、x86版をインストールしてくださ

    View Slide

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

    View Slide

  9. 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

    View Slide

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

    View Slide

  11. 5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ! Powered by Rabbit 2.1.2
    GTK+ とは
    GUIツールキット
    オープンソース

    マルチプラットフォーム

    ⾊々な⾔語から使える


    View Slide

  12. 5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ! Powered by Rabbit 2.1.2
    用語
    ウィジェット

    イベント(シグナル)

    メインループ

    View Slide

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

    ボタン

    など


    View Slide

  14. 5分で学ぶGTK+ - Ruby/GTK2のサンプルもあるよ! Powered by Rabbit 2.1.2
    イベント(シグナル)
    ユーザーの操作で発⽣
    ウィンドウを閉じる

    ボタンをクリックする

    など


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. 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

    View Slide

  20. 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 #メインループ開始

    View Slide

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

    View Slide

  22. 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

    View Slide

  23. 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) #ウィンドウに画像を追加

    View Slide

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

    View Slide

  25. 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

    View Slide

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

    View Slide

  27. 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

    View Slide

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

    View Slide

  29. 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)

    View Slide

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

    View Slide

  31. 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

    View Slide

  32. 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)

    View Slide

  33. 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)

    View Slide

  34. 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

    View Slide

  35. 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)

    View Slide

  36. 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

    View Slide