QMLとは？わかりやすく解説

QML
パラダイム	宣言型プログラミング、リアクティブプログラミング
登場時期	2009年 (15年前)
開発者	Qt Project（英語版）
最新リリース	5.12 LTS/ 2018年12月6日 (5年前)
影響を受けた言語	JavaScript、Extensible Application Markup Language、JavaScript Object Notation、Qt
ウェブサイト	QML Applications
拡張子	.qml
	テンプレートを表示

QML (Qt Modeling Language^[2]) は、ユーザインタフェースマークアップ言語（英語版）である。QMLはJavaScriptをベースとした言語であり、アプリケーションのユーザインタフェースをデザインするためのCSSやJSONのような宣言型言語である。この言語はノキアによって開発されたQtのUI作成キットであるQt Quick（英語版）に関連するものである。Qt Quickはタッチ入力と流体アニメーション (60 fps) とユーザーエクスペリエンスが重要となるモバイルアプリケーションでしばしば使用されている。QMLはQt 3D^[3]と共に3Dシーンの描画と「フレームグラフ」のレンダリングのためにも使用される。QMLドキュメントは階層的なオブジェクトツリーを記述する。Qtに同梱されているQMLモジュールには基本的なグラフィカルビルディングブロック (長方形、画像など)、モデリングコンポーネント (FolderListModel、XmlListModelなど)、動作コンポーネント (タップハンドラ、ドラッグハンドラ、状態、トランジション、アニメーションなど)、より複雑なコントロール (ボタン、スライダー、ドロワ、メニューなど) が含まれている^[4]。これらの単純な要素を組み合わせることで、インターネットに対応したアプリケーションなどの複雑なものを作成することができる。

QMLの要素は標準的なJavaScriptによって拡張することができ、インライン展開されたものと外部ファイルからのものの両方を使用することができる。また、Qtで使用されているC++コンポーネントによって統合と拡張することもできる。

QMLではV4と呼ばれるJavaScriptエンジン^{[注釈 1]}をQt 5.2から使用している^[5]^[6]。Qt Quickは2Dシーングラフ（英語版）とそれに基づいたUIフレームワークである。これらは全てQt Declarativeモジュールの一部であるが、この技術はもはやQt Declarativeとは呼ばれていない。

QMLとJavaScriptはQt Quickコンパイラによって機械語にコンパイルすることができる^[7]。或いは、コンパイル済みのQMLを動的に格納し、次回起動時に高速起動することができるQMLキャッシュファイル形式がある^[8]。

採用例

構文

標準的な構文

例:

 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
     }
 }

オブジェクトは型によって指定され、その後に波括弧が続く。オブジェクトの型は常に大文字から始まる。上の例では、Rectangleとその子供のImageの2つのオブジェクトがある。波括弧の間にはオブジェクトのプロパティなどの情報を指定することができる。プロパティはプロパティ: 値の形式で指定することができる。上の例では、Imageにsourceというプロパティがあり、pics/logo.pngという値が割り当てられている。プロパティと値はコロンによって区切られている。

idプロパティ

各オブジェクトにはidという特殊な固有のプロパティを与えることができる。idを割り当てることで、他のオブジェクトやスクリプトがそのidが割り当てられたオブジェクトを参照できるようになる。下の例の最初のRectangleには、myRectというidがある。2番目のRectangleのwidthの値は、myRect.widthと定義されているが、これは最初のRectangleのwidthの値を参照している。つまり、2番目のRectangleのwidthには、最初のRectangleのwidthと同じ幅が指定されることになる。

 Item {
     Rectangle {
         id: myRect
         width: 120
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

idは小文字かアンダースコアで始まり、ラテン文字・数字・アンダースコア以外の文字は使用できない。

プロパティバインディング

プロパティバインディングは、宣言的な方法でプロパティの値を指定する。リアクティブプログラミング（英語版）のパラダイムに従って、他のプロパティまたはデータの値が更新された場合に、プロパティの値が自動的に更新される。

プロパティバインディングはJavaScriptの式が割り当てられるたびにQMLに暗黙的に作成される。以下の例では、2つのプロパティバインディングを使用して、長方形の大きさとotherItemの大きさを繋げている。

 Rectangle {
     width: otherItem.width
     height: otherItem.height
 }

QMLの処理系は標準に準拠したJavaScriptエンジンを拡張したものなので、有効なJavaScriptの式は全てプロパティバインディングとして使用することができる。プロパティバインディングはオブジェクトのプロパティに接続したり、関数呼び出しを作成したり、DateやMathなどのの組み込みオブジェクトを使用することもできる。

例:

 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"
 }

状態

状態は意味論単位でプロパティの変更を結び付ける仕組みである。例えば、ボタンは押された状態とそうでない状態を持ち、アドレス帳アプリケーションは連絡先のための読み取り専用の状態と編集可能な状態を持つことができる。全ての要素は暗黙的な基本状態を持つ。これ以外の全ての状態は、基本状態と異なるこれらの要素のプロパティと値を列挙することで記述される。

例:

基本状態ではmyRectは 0, 0 に配置される。movedでは50, 50 に配置される。マウス領域内をクリックすると状態が基本状態からmovedに変化し、長方形が移動する。

 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'
     }
 }

状態の変更はトランジションを使うことでアニメーションにすることができる。

例えば、下記のコードを上のItemに追加すると、movedへの遷移を動的なものにすることができる。

 transitions: [
     Transition {
         from: "*"
         to: "moved"
         NumberAnimation { properties: "x,y"; duration: 500 }
     }
  ]

アニメーション

QMLのアニメーションは、オブジェクトのプロパティをアニメーションにすることで行われる。real・int・color・rect・point・size・vector3dプロパティは全てアニメーションに対応している。

QMLは基本的なプロパティアニメーション・トランジション・プロパティ動作の3つの主要な形式のアニメーションに対応している。

アニメーションの最も簡単な形式はPropertyAnimationで、上の一覧の全てのプロパティ型をアニメーション化することができる。プロパティアニメーションは、プロパティシンタックスのアニメーションを使用して値のソースを指定することができる。これはアニメーションを繰り返す場合に特に便利である。

次の例では弾む効果を作成している。

 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
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

Qt/C++との統合

QMLを使用するときにQt/C++の知識は不要で、Qtを経由して簡単に拡張することができる。QObjectから派生したC++クラスは、QMLでインスタンス化できる型として簡単に登録することができる。

ソフトウェアアーキテクチャ

QObject signals - JavaScriptでコールバックをトリガーすることができる。
QObject slots - JavaScriptで呼び出す関数として利用できる。
QObject properties - JavaScriptの変数やバインディングとして利用できる。
QWindow - ウィンドウがウィンドウ内にQMLシーンを作成する。
Q*Model - データバインディングで直接使用される (QAbstractItemModelなど)^[22]。

シグナルハンドラ

シグナルハンドラはJavaScriptのコールバックであり、イベントに応じて強制的にアクションを取ることができる。例えば、MouseArea要素にはマウスの押す・離す・クリックを処理するシグナルハンドラがある。

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

全てのシグナルハンドラの名前は「on」から始まる。

開発ツール

QMLとJavaScriptは非常に似ているので、JavaScriptに対応する殆ど全てのソースコードエディタで利用することができる。但し、シンタックスハイライト・コード補完・統合されたヘルプ・WYSIWYGエディタの完全なサポートはQt Creator 2.1以降かその他の統合開発環境で利用することができる。

QMLの実行ファイルはQMLをスクリプトとして実行するのに利用できる。QMLファイルがシバンで始まる場合には直接実行することができる。しかし、アプリケーションを追加するためにパッケージングするとき (特にモバイルプラットフォーム) には、単純なC++ランチャーを作成し、必要なQMLファイルをリソースとしてパッケージングする必要がある。

脚注

注釈

^ V8をカスタマイズしたJavaScriptエンジン。

出典

^ “Qt 5.12 LTS Released”. Qt Blog (2018年12月6日). 2018年12月13日閲覧。
^ Qt Declarative API Changes - ウェイバックマシン（2014年11月13日アーカイブ分）
^ “Qt 3D Overview”. The Qt Company. 2018年12月13日閲覧。
^ “All QML Types”. The Qt Company. 2018年12月13日閲覧。
^ Lars Knoll (2013年4月15日). “Evolution of the QML engine, part 1”. 2018年12月13日閲覧。
^ “What's New in Qt 5.2”. The Qt Company. 2018年12月13日閲覧。
^ “Qt Quick Compiler”. The Qt Company. 2018年12月13日閲覧。
^ “Deploying QML Applications”. The Qt Company. 2018年12月13日閲覧。
^ “Development/Tutorials/Plasma4/QML/GettingStarted”. KDE. 2018年12月13日閲覧。
^ “Developing for the reMarkable tablet”. KDE (2017年12月1日). 2018年12月13日閲覧。
^ “reHackable-HelloWorld”. GitHub. 2018年12月13日閲覧。
^ Michael Larabel (2013年3月4日). “Ubuntu's Unity Written In Qt/QML For "Unity Next"”. 2018年12月13日閲覧。
^ “Tutorial - Combining C++ with QML”. SailfishOS. 2018年12月13日閲覧。
^ “Tutorial - QML Live Coding With Qt QmlLive”. SailfishOS. 2018年12月13日閲覧。
^ “QML fundamentals”. BlackBerry. 2018年12月13日閲覧。
^ Ash (2011年2月23日). “MeeGo and Qt / QML demos assault MWC”. 2018年12月13日閲覧。
^ “QML”. Maemo. 2018年12月13日閲覧。
^ “Qt Launches on Tizen with Standard Look and Feel”. Qt for Tizen Blog (2013年5月20日). 2018年12月13日閲覧。
^ “Mer Project”. Mer Project. 2018年12月13日閲覧。
^ “QML - the best tool to unlock your creativity”. Canonical. 2018年12月13日閲覧。
^ Josh Smith (2018年5月2日). “Looking at Lumina Desktop 2.0”. 2018年12月13日閲覧。
^ “QAbstractItemModels in QML views”. The missing pieces (2010年4月22日). 2018年12月13日閲覧。

外部リンク

利用方法

[5] V8をカスタマイズしたJavaScriptエンジン。

[1] “Qt 5.12 LTS Released”. Qt Blog (2018年12月6日). 2018年12月13日閲覧。

[2] Qt Declarative API Changes - ウェイバックマシン（2014年11月13日アーカイブ分）

[3] “Qt 3D Overview”. The Qt Company. 2018年12月13日閲覧。

[4] “All QML Types”. The Qt Company. 2018年12月13日閲覧。

[6] Lars Knoll (2013年4月15日). “Evolution of the QML engine, part 1”. 2018年12月13日閲覧。

[7] “What's New in Qt 5.2”. The Qt Company. 2018年12月13日閲覧。

[8] “Qt Quick Compiler”. The Qt Company. 2018年12月13日閲覧。

[9] “Deploying QML Applications”. The Qt Company. 2018年12月13日閲覧。

[10] “Development/Tutorials/Plasma4/QML/GettingStarted”. KDE. 2018年12月13日閲覧。

[11] “Developing for the reMarkable tablet”. KDE (2017年12月1日). 2018年12月13日閲覧。

[12] “reHackable-HelloWorld”. GitHub. 2018年12月13日閲覧。

[13] Michael Larabel (2013年3月4日). “Ubuntu's Unity Written In Qt/QML For "Unity Next"”. 2018年12月13日閲覧。

[14] “Tutorial - Combining C++ with QML”. SailfishOS. 2018年12月13日閲覧。

[15] “Tutorial - QML Live Coding With Qt QmlLive”. SailfishOS. 2018年12月13日閲覧。

[16] “QML fundamentals”. BlackBerry. 2018年12月13日閲覧。

[17] Ash (2011年2月23日). “MeeGo and Qt / QML demos assault MWC”. 2018年12月13日閲覧。

[18] “QML”. Maemo. 2018年12月13日閲覧。

[19] “Qt Launches on Tizen with Standard Look and Feel”. Qt for Tizen Blog (2013年5月20日). 2018年12月13日閲覧。

[20] “Mer Project”. Mer Project. 2018年12月13日閲覧。

[21] “QML - the best tool to unlock your creativity”. Canonical. 2018年12月13日閲覧。

[22] Josh Smith (2018年5月2日). “Looking at Lumina Desktop 2.0”. 2018年12月13日閲覧。

[23] “QAbstractItemModels in QML views”. The missing pieces (2010年4月22日). 2018年12月13日閲覧。

[1]

[2]

[3]

[4]

[注釈 1]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

表話編歴 Qt
技術	Meta-object System Phonon QML QtScript（英語版） Qt Quick（英語版） Qt Style Sheets（英語版） Signals and slots（英語版）
ツール	qmake（英語版） Qt Creator
バインディング	PHP-Qt（英語版） PyQt PySide QtRuby（英語版） Qt Jambi（英語版）
関連項目	The Qt Company Qt Project（英語版） KDE Lumina Mer（英語版） MeeGo


	All text is available under the terms of the GNU Free Documentation License. この記事は、ウィキペディアのQML (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。
	Text is available under GNU Free Documentation License (GFDL). Weblio辞書に掲載されている「ウィキペディア小見出し辞書」の記事は、Wikipediaの量子プログラミング言語 (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。

QMLとは？ わかりやすく解説

QML

採用例

構文