Qt

GUI ウィジェットを作る参考に Qt を試している(最初 Gtk を参考にしようと思ったが、gtk-osx.org のページが石川県になっていて途方に暮れたので Qtにした)。かなりちゃんとしたウェブサイトがあってインストールはすんなり行った。

QML で Hello world!

特に面白いのは、画面の記述に Javascript ベースの QML という言語を使える事。例えば Hello world! を表示するには次のようなファイル Hello.qml を作ればいい。

// Hello.qml
import QtQuick 1.0

Rectangle {
    width: 100; height: 50
    Text {
        text: "Hello world!"
    }
}

Json ともちょっと違って、大文字始まりのシンボルは型名らしい。Qt に付属する Qt Creater というツールを使うと、GUI を使っても QML を作る事が出来る。QML 人間の目にも優しく機械生成も出来るバランスの取れた形式だと思う。

これを実行するには Mac の場合パスが長くなるけど次のようにする。

$ ~/QtSDK/Desktop/Qt/473/gcc/bin/QMLViewer.app/Contents/MacOS/QMLViewer Hello.qml

QML でコンポーネント

ここはかなり面白い。一度作った qml ファイルは部品のように他の画面に組み込む事が出来る。例えば上で作った Hello.qml を沢山並べるには、次のようにする。

// Hellos.qml
import QtQuick 1.0

Rectangle {
    width: 500; height: 100
    Grid {
        rows: 2; columns: 3
        Hello {}
        Hello {}
        Hello {}
        Hello {}
        Hello {}
        Hello {}
    }
}

ここで、部品のファイル名 Hello がそのままコンポーネントの名前になる。

プロパティを使った制約

import QtQuick 1.0

Item {
    width: 200; height: 150

    TextInput {
        id: original
        x: 10; y: 0
        text: "好き"
    }

    Text {
        x: 10; y: 50
        text: original.text + "やねん"
    }
    Text {
        x: 10; y: 100
        text: original.text + "どすえ"
    }
}

ここはさらに面白い。QML のプロパティは簡単な記法でかなり凝った事が出来る。上の例では、まず最初のテキストボックスに origin という名前を付ける(この右辺値として変数名が書ける所も変態的だ)。そして下の二つのテキストでは text: original.text + "やねん" のような記法で文字列を加工している。この text: という記法は、単に text というプロパティに代入しているだけじゃなくて、original.text の内容が変化するとそれに合わせて動的に text の中身も変化する事を示している。つまり、これだけでスプレッドシートのように二つのデータを関連づけた事になる。これはすごい！

プロパティの右辺にクォート無しで変数名を書いたり処理を書いたり出来る所は、今後セマンティックスが破綻してしまわないか心配になるけど、記法の単純さのバランスを考えると Qt の作者はかなりセンスある事が分かる。

今後調べたいこと: ドロップダウンメニューに動的にデータを与える方法。

参考

• QML 入門: http://doc.qt.nokia.com/4.7/qml-tutorial.html
• Qt Quick: http://doc.qt.nokia.com/main-snapshot/qtquick.html
• Qt コンポーネント: http://doc.qt.nokia.com/main-snapshot/qml-component.html
• プロパティ: http://doc.qt.nokia.com/main-snapshot/propertybinding.html