QML（Qtメタオブジェクト言語[ 4 ]）は、ユーザーインターフェースマークアップ言語です。ユーザーインターフェース中心のアプリケーションを設計するための宣言型言語（ CSSやJSONに類似）です。インラインJavaScriptコードで命令型の側面を処理します。QMLは、 NokiaがQtフレームワーク内で独自に開発したUI作成キットであるQt Quickと連携しています。Qt Quickは、タッチ入力、滑らかなアニメーション、ユーザーエクスペリエンスが重要なモバイルアプリケーションに使用されます。QMLは、Qt3D [ 5 ]と組み合わせて3Dシーンや「フレームグラフ」レンダリング手法を記述するためにも使用されます。QMLドキュメントは階層的なオブジェクトツリーを記述します。Qtに同梱されているQMLモジュール[ 6 ]には、基本的なグラフィカル構成要素（Rectangle、Imageなど）、モデリングコンポーネント（FolderListModel、XmlListModelなど）、動作コンポーネント（TapHandler、DragHandler、State、Transition、Animationなど）、そしてより複雑なコントロール（Button、Slider、Drawer、Menuなど）が含まれています。これらの要素を組み合わせることで、単純なボタンやスライダーから完全なインターネット対応プログラムまで、さまざまな複雑なコンポーネントを構築できます。
QML要素は、インラインおよびインクルードされた.jsファイルを介して標準JavaScriptで拡張できます。また、 Qtフレームワークを使用した C++コンポーネントとシームレスに統合および拡張することも可能です。
QMLは言語であり、そのJavaScriptランタイムはカスタムV4エンジンです[ 7 ]（Qt 5.2以降）[ 8 ]。Qt Quickは2Dシーングラフとそれに基づくUIフレームワークです。これらはすべてQt Declarativeモジュールの一部ですが、この技術はQt Declarativeという名前ではなくなりました。
QMLとJavaScriptコードはQt Quick Compilerを使ってネイティブC++バイナリにコンパイルすることができます。[ 9 ]また、QMLキャッシュファイル形式[ 10 ]があり、これはコンパイルされたバージョンのQMLを動的に保存し、次回実行時に起動を高速化します。
以下にいくつかの構文例を示します。
QtQuickをインポートする長方形{ id: キャンバス幅: 250高さ: 200色: "青"画像{ id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas . height / 5 } }オブジェクトは、その型とそれに続く括弧で指定します。オブジェクト型は常に大文字で始まります。上記の例では、Rectangle とその子である Image という2つのオブジェクトがあります。括弧の間には、オブジェクトのプロパティなどの情報を指定できます。プロパティは property: value の形式で指定します。上記の例では、Image には というプロパティがありsource、値 が割り当てられていますpics/logo.png。プロパティと値はコロンで区切られています。
idプロパティ
各オブジェクトには、IDと呼ばれる特別な固有プロパティを与えることができます。IDを割り当てることで、オブジェクトを他のオブジェクトやスクリプトから参照できるようになります。下図の最初のRectangle要素にはID が与えられていますmyRect。2番目のRectangle要素は、 を参照して独自の幅を定義していますmyRect.width。つまり、最初のRectangle要素と同じ幅を持つことになります。
アイテム{四角形{ id: myRect幅: 120高さ: 100 }四角形{幅: myRect .幅高さ: 200 } }ID は小文字またはアンダースコアで始まる必要があり、文字、数字、アンダースコア以外の文字を含めることはできません。
プロパティバインディングは、プロパティの値を宣言的に指定します。リアクティブプログラミングパラダイムに従い、他のプロパティまたはデータ値が変更されると、プロパティ値が自動的に更新されます。
QMLでは、プロパティにJavaScript式が割り当てられるたびに、プロパティバインディングが暗黙的に作成されます。次のQMLでは、2つのプロパティバインディングを使用して、長方形のサイズをotherItemのサイズに関連付けています。
長方形{幅: otherItem.width高さ: otherItem.height }QMLは標準準拠のJavaScriptエンジンを拡張しているため、有効なJavaScript式をプロパティバインディングとして使用できます。バインディングはオブジェクトのプロパティにアクセスしたり、関数呼び出しを行ったり、DateやMathなどの組み込みJavaScriptオブジェクトを使用したりすることもできます。
四角形{ 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 に配置されています。「移動」状態では、50,50 に配置されます。マウス領域内をクリックすると、状態がデフォルト状態から「移動」状態に変わり、長方形が移動します。
QtQuickをインポートするアイテム{ id: myItem幅: 200 ;高さ: 200四角形{ id: myRect width: 100 ; height: 100 color: "red" }状態: [状態{ name: "moved" PropertyChanges { target: myRect x: 50 y: 50 } } ]マウス領域{アンカー.fill: parent onClicked: myItem . state = 'moved' } }状態の変化は、Transitions を使用してアニメーション化できます。
たとえば、上記の Item 要素に次のコードを追加すると、「移動済み」状態への遷移がアニメーション化されます。
遷移: [ Transition { from: "*" to: "moved" NumberAnimation { properties: "x,y" ; duration: 500 } } ]QMLにおけるアニメーションは、オブジェクトのプロパティをアニメーション化することで実現されます。real、int、color、rect、point、size、vector3d型のプロパティはすべてアニメーション化できます。
QML は、基本プロパティ アニメーション、トランジション、プロパティ ビヘイビアという 3 つの主要な形式のアニメーションをサポートしています。
最もシンプルなアニメーションはPropertyAnimationで、上記のすべてのプロパティタイプをアニメーション化できます。プロパティアニメーションは、Animation on property構文を使用して値ソースとして指定できます。これは、繰り返しアニメーションを実行する場合に特に便利です。
次の例では、バウンス効果を作成します。
長方形{ id: rect幅: 120 ;高さ: 200画像{ id: img source: "pics/qt.png" x: 60 - img . width / 2 y: 0SequentialAnimation 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 } } } }QMLを使用するのにQt/C++の知識は必要ありませんが、Qtを介して簡単に拡張できます。[ 28 ] [ 29 ] QObjectから派生したC++クラスは、QMLでインスタンス化できる型として簡単に登録できます。
QML は、Qt から次の概念に直接アクセスできるようにします。
シグナルハンドラは、イベントに応じて命令的なアクションを実行できるようにするJavaScriptコールバックです。例えば、MouseArea要素には、マウスの押下、解放、クリックを処理するシグナルハンドラがあります。
MouseArea { onPressed : console.log ( "マウスボタンが押されました" ) }すべてのシグナル ハンドラー名は「on」で始まります。
QMLとJavaScriptは非常に似ているため、JavaScriptをサポートするほぼすべてのコードエディタが動作します。構文ハイライト、コード補完、統合ヘルプ、WYSIWYGエディタの完全なサポートは、無料のクロスプラットフォーム統合開発環境（IDE）であるQt Creatorのバージョン2.1以降、および他の多くのIDEで利用できます。
qml実行ファイルは、QMLファイルをスクリプトとして実行するために使用できます。QMLファイルがシェバンで始まっている場合は、直接実行可能にすることができます。ただし、アプリケーションをデプロイ用にパッケージ化するには（特にモバイルプラットフォームの場合）、通常、シンプルなC++ランチャーを作成し、必要なQMLファイルをリソースとしてパッケージ化する必要があります。