QML

QML (Qt Modeling Language) は、である。QMLはJavaScriptをベースとした言語であり、アプリケーションのユーザインタフェースをデザインするためのCSSやJSONのような宣言型言語である。この言語はノキアによって開発されたQtのUI作成キットであるに関連するものである。Qt Quickはタッチ入力と流体アニメーション (60 fps) とユーザーエクスペリエンスが重要となるモバイルアプリケーションでしばしば使用されている。QMLはQt 3Dと共に3Dシーンの描画と「フレームグラフ」のレンダリングのためにも使用される。QMLドキュメントは階層的なオブジェクトツリーを記述する。Qtに同梱されているQMLモジュールには基本的なグラフィカルビルディングブロック (長方形、画像など)、モデリングコンポーネント (FolderListModel、XmlListModelなど)、動作コンポーネント (タップハンドラ、ドラッグハンドラ、状態、トランジション、アニメーションなど)、より複雑なコントロール (ボタン、スライダー、ドロワ、メニューなど) が含まれている。これらの単純な要素を組み合わせることで、インターネットに対応したアプリケーションなどの複雑なものを作成することができる。
QMLの要素は標準的なJavaScriptによって拡張することができ、インライン展開されたものと外部ファイルからのものの両方を使用することができる。また、Qtで使用されているC++コンポーネントによって統合と拡張することもできる。
QMLではV4と呼ばれるJavaScriptエンジンをQt 5.2から使用している。Qt Quickは2Dとそれに基づいたUIフレームワークである。これらは全てQt Declarativeモジュールの一部であるが、この技術はもはやQt Declarativeとは呼ばれていない。
QMLとJavaScriptはQt Quickコンパイラによって機械語にコンパイルすることができる。或いは、コンパイル済みのQMLを動的に格納し、次回起動時に高速起動することができるQMLキャッシュファイル形式がある。
構文.
標準的な構文.
例:
 import QtQuick 2.9 // import from Qt 5.9
 Rectangle {
 id: canvas
 width: 250
 height: 200
 color: "blue"
 Image {
 id: logo
 source: "pics/logo.png"
 anchors.centerIn: parent
 x: canvas.height / 5
オブジェクトは型によって指定され、その後に波括弧が続く。オブジェクトの型は常に大文字から始まる。上の例では、codice_1とその子供のcodice_2の2つのオブジェクトがある。波括弧の間にはオブジェクトのプロパティなどの情報を指定することができる。プロパティはcodice_3の形式で指定することができる。上の例では、codice_2にcodice_5というプロパティがあり、codice_6という値が割り当てられている。プロパティと値はコロンによって区切られている。
各オブジェクトにはcodice_7という特殊な固有のプロパティを与えることができる。codice_7を割り当てることで、他のオブジェクトやスクリプトがそのcodice_7が割り当てられたオブジェクトを参照できるようになる。下の例の最初のcodice_1には、codice_11というcodice_7がある。2番目のcodice_1のcodice_14の値は、codice_15と定義されているが、これは最初のcodice_1のcodice_14の値を参照している。つまり、2番目のcodice_1のcodice_14には、最初のcodice_1のcodice_14と同じ幅が指定されることになる。
 Item {
 Rectangle {
 id: myRect
 width: 120
 height: 100
 Rectangle {
 width: myRect.width
 height: 200
codice_7は小文字かアンダースコアで始まり、ラテン文字・数字・アンダースコア以外の文字は使用できない。
プロパティバインディング.
プロパティバインディングは、宣言的な方法でプロパティの値を指定する。のパラダイムに従って、他のプロパティまたはデータの値が更新された場合に、プロパティの値が自動的に更新される。
プロパティバインディングはJavaScriptの式が割り当てられるたびにQMLに暗黙的に作成される。以下の例では、2つのプロパティバインディングを使用して、長方形の大きさとcodice_23の大きさを繋げている。
 Rectangle {
 width: otherItem.width
 height: otherItem.height
QMLの処理系は標準に準拠したJavaScriptエンジンを拡張したものなので、有効なJavaScriptの式は全てプロパティバインディングとして使用することができる。プロパティバインディングはオブジェクトのプロパティに接続したり、関数呼び出しを作成したり、codice_24やcodice_25などのの組み込みオブジェクトを使用することもできる。
例:
 Rectangle {
 function calculateMyHeight() {
 return Math.max(otherItem.height, thirdItem.height);
 anchors.centerIn: parent
 width: Math.min(otherItem.width, 10)
 height: calculateMyHeight()
 color: width > 10 ? "blue" : "red"
状態.
状態は意味論単位でプロパティの変更を結び付ける仕組みである。例えば、ボタンは押された状態とそうでない状態を持ち、アドレス帳アプリケーションは連絡先のための読み取り専用の状態と編集可能な状態を持つことができる。全ての要素は暗黙的な基本状態を持つ。これ以外の全ての状態は、基本状態と異なるこれらの要素のプロパティと値を列挙することで記述される。
例:
基本状態ではcodice_11は 0, 0 に配置される。codice_27では50, 50 に配置される。マウス領域内をクリックすると状態が基本状態からcodice_27に変化し、長方形が移動する。
 import QtQuick 2.0
 Item {
 id: myItem
 width: 200; height: 200
 Rectangle {
 id: myRect
 width: 100; height: 100
 color: "red"
 states: [
 State {
 name: "moved"
 PropertyChanges {
 target: myRect
 x: 50
 y: 50
 MouseArea {
 anchors.fill: parent
 onClicked: myItem.state = 'moved'
状態の変更はトランジションを使うことでアニメーションにすることができる。
例えば、下記のコードを上のcodice_29に追加すると、codice_27への遷移を動的なものにすることができる。
 transitions: [
 Transition {
 from: "*"
 to: "moved"
 ]
アニメーション.
QMLのアニメーションは、オブジェクトのプロパティをアニメーションにすることで行われる。codice_31・codice_32・codice_33・codice_34・codice_35・codice_36・codice_37プロパティは全てアニメーションに対応している。
QMLは基本的なプロパティアニメーション・トランジション・プロパティ動作の3つの主要な形式のアニメーションに対応している。
アニメーションの最も簡単な形式はcodice_38で、上の一覧の全てのプロパティ型をアニメーション化することができる。プロパティアニメーションは、プロパティシンタックスのアニメーションを使用して値のソースを指定することができる。これはアニメーションを繰り返す場合に特に便利である。
次の例では弾む効果を作成している。
 Rectangle {
 id: rect
 width: 120; height: 200
 Image {
 id: img
 source: "pics/qt.png"
 x: 60 - img.width/2
 y: 0
 SequentialAnimation on y {
 loops: Animation.Infinite
Qt/C++との統合.
QMLを使用するときにQt/C++の知識は不要で、Qtを経由して簡単に拡張することができる。QObjectから派生したC++クラスは、QMLでインスタンス化できる型として簡単に登録することができる。
シグナルハンドラ.
シグナルハンドラはJavaScriptのコールバックであり、イベントに応じて強制的にアクションを取ることができる。例えば、MouseArea要素にはマウスの押す・離す・クリックを処理するシグナルハンドラがある。
 MouseArea {
 onPressed: console.log("mouse button pressed")
全てのシグナルハンドラの名前は「on」から始まる。
開発ツール.
QMLとJavaScriptは非常に似ているので、JavaScriptに対応する殆ど全てのソースコードエディタで利用することができる。但し、シンタックスハイライト・コード補完・統合されたヘルプ・WYSIWYGエディタの完全なサポートは 2.1以降かその他の統合開発環境で利用することができる。
QMLの実行ファイルはQMLをスクリプトとして実行するのに利用できる。QMLファイルがシバンで始まる場合には直接実行することができる。しかし、アプリケーションを追加するためにパッケージングするとき (特にモバイルプラットフォーム) には、単純なC++ランチャーを作成し、必要なQMLファイルをリソースとしてパッケージングする必要がある。