Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした

Ryohei Ikegami
September 21, 2014

RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした

RubyHiroba 2014でLTしました

Ryohei Ikegami

September 21, 2014
Tweet

More Decks by Ryohei Ikegami

Other Decks in Technology

Transcript

  1. RubyとQML/Qt Quickで
    デスクトップアプリを
    書けるようにした
    ! 2014-09-21

    View full-size slide

  2. " seanchas_t
    # seanchas116
    大学生 (10月から休学予定
    Ruby歴は2年くらい
    “しゃなはす”と読みます

    View full-size slide

  3. Qt Quick
    Qtの一部
    QMLという専用言語で
    UIを記述するフレームワーク
    Ruby
    Rubyで
    スクリプトとして
    ロジックを記述する
    組み合わせて
    デスクトップアプリを書けるようにする!!

    View full-size slide

  4. ruby-qml
    https://github.com/seanchas116/ruby-qml
    $ gem install qml

    View full-size slide

  5. デスクトップアプリ?

    View full-size slide

  6. どうやって書くの?

    View full-size slide

  7. require 'qml'
    !
    QML.run do |app|
    app.load_path 'main.qml'
    end
    Ruby
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    !
    ApplicationWindow {
    visible: true
    width: 200
    height: 100
    title: "Hello, world!"
    }
    QML

    View full-size slide

  8. class ClickMe
    include QML::Access
    register_to_qml
    !
    property :text, 'Click me'
    def on_clicked
    puts 'clicked'
    self.text = 'Clicked!!'
    end
    end
    Ruby
    ApplicationWindow {
    visible: true
    Button {
    text: clickMe.text
    onClicked: {
    clickMe.on_clicked()
    }
    }
    ClickMe {
    id: clickMe
    }
    }
    QML

    View full-size slide

  9. item.value # => 10
    item.poyo
    Ruby
    Item {
    property var value: 10
    function poyo() {
    console.log("poyo")
    }
    }
    QML

    View full-size slide

  10. item.value # => 10
    item.poyo
    Ruby
    class Foo : public QObject {
    Q_OBJECT
    Q_PROPERTY(
    int value MEMBER m_value)
    int m_value = 10;
    public:
    Q_INVOKABLE void poyo() {
    qDebug() << "poyo";
    }
    };
    C++

    View full-size slide

  11. 開発した理由

    View full-size slide

  12. QMLの特徴
    UIの記述に特化した言語
    !
    宣言的記法
    プロパティバインディング
    オブジェクトのプロパティ同士のデータバインド

    View full-size slide

  13. QMLの特徴
    QMLでビュー (UI) を記述
    C++でロジックを記述
    イベントとデータバインドでつなげる
    いわゆるMVVMパターン
    UIとロジックを分離できる
    (最近では当たり前?)

    View full-size slide

  14. QMLの開発スタイル
    QMLでビュー (UI) を記述
    C++でロジックを記述
    ◯◯で書きたくない?
    (◯◯: 任意の好きな言語)
    QMLは動的言語なので
    バインディングが比較的作りやすい

    View full-size slide

  15. QMLの開発スタイル
    QMLでビュー (UI) を記述
    C++でロジックを記述
    Go
    go-qml
    https://github.com/go-qml/qml

    View full-size slide

  16. QMLの開発スタイル
    QMLでビュー (UI) を記述
    C++でロジックを記述
    Ruby
    ruby-qml 今回作った!!

    View full-size slide

  17. せっかくRubyをつかうので…
    Rubyらしいライブラリにしたい
    プロパティなどのクラスマクロ
    ブロック

    DSL、メタプログラミングを通して
    QMLの世界観をRubyに違和感なく持ってくるのを
    心がけた

    View full-size slide

  18. 考えられそうなユースケース

    View full-size slide

  19. RubyとQMLのみで
    C++を書かず楽にデスクトップアプリを作る
    Ruby
    コード
    QML
    ビュー
    ruby-qmlアプリ

    View full-size slide

  20. C++・QMLなどをラップ
    Rubyはグルー言語
    Ruby
    コード
    ruby-qmlアプリ
    C++/Qt
    コード
    QML
    ビュー
    他の
    機能

    View full-size slide

  21. これから

    View full-size slide

  22. Windows対応
    !
    モバイル対応 (with mruby?)

    View full-size slide