翻訳言語

QML ( Qt Modeling Language ^[4] ) は、ユーザーインターフェイスのマークアップ言語です。これは、ユーザーインターフェイス中心のアプリケーションを設計するための宣言型言語です ( CSSやJSONに似ています)。インラインJavaScriptコードが命令型の側面を処理します。これは、Qtフレームワーク内でNokiaによって最初に開発された UI 作成キットであるQt Quickに関連付けられています。Qt Quick は、タッチ入力、滑らかなアニメーション、およびユーザーエクスペリエンスが重要なモバイルアプリケーションに使用されます。QML は、3D シーンと「フレームグラフ」レンダリング手法を記述するために Qt3D ^[5]と共に使用されます。QML ドキュメントは、階層的なオブジェクトツリーを記述します。Qt に同梱されている QML モジュール^[6]には、基本的なグラフィカル ビルディング ブロック (Rectangle、Image など)、モデリング コンポーネント (FolderListModel、XmlListModel など)、動作コンポーネント (TapHandler、DragHandler、State、Transition、Animation など)、およびより複雑なコントロール (Button、Slider、Drawer、Menu など) が含まれます。これらの要素を組み合わせることで、単純なボタンやスライダーから完全なインターネット対応プログラムまで、さまざまな複雑さのコンポーネントを構築できます。

QML 要素は、インラインと組み込まれた .js ファイルの両方で標準のJavaScriptによって拡張できます。要素は、Qt フレームワークを使用して C++コンポーネントによってシームレスに統合および拡張することもできます。

QMLは言語であり、そのJavaScriptランタイムはQt 5.2以降のカスタムV4エンジンです^{[7] 。 [8]} Qt Quickは2Dシーングラフとそれに基づくUIフレームワークです。これらはすべてQt Declarativeモジュールの一部ですが、この技術はもはやQt Declarativeと呼ばれていません。

QMLとJavaScriptコードは、Qt Quick Compilerを使用してネイティブC++バイナリにコンパイルできます。^[9]また、QMLキャッシュファイル形式^[10]もあり、これはコンパイルされたバージョンのQMLを動的に保存し、次回実行時に起動を高速化します。

• KDE Plasma 4、^[11] KDE Plasma 5およびPlasma 6 （Plasmaフレームワーク経由）
• リリOS
• シンプルなデスクトップディスプレイマネージャー
• reMarkableタブレット端末^{[12] [13]}
• ユニティ2D ^[14]
• セイルフィッシュOS ^{[15] [16] [17]}
• ブラックベリー10 ^[18]
• ミーゴー^{[19] [20]}
• メーモ^[21]
• ティゼン^[22]
• メル^{[23] [24] [25]}
• ウブントゥフォン^[26]
• ルミナ（デスクトップ環境）^[27]
• 多くのオープンソースアプリケーション

例：

  QtQuickをインポートする

 長方形 { 
     id: canvas
     幅:  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 は小文字またはアンダースコアで始まる必要があり、文字、数字、アンダースコア以外の文字を含めることはできないことに注意してください。

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

プロパティ バインディングは、プロパティに JavaScript 式が割り当てられるたびに、QML で暗黙的に作成されます。次の 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' 
     } 
 }

状態の変化は、トランジションを使用してアニメーション化できます。

たとえば、上記の Item 要素に次のコードを追加すると、「移動済み」状態への遷移がアニメーション化されます。

 遷移:  [
     遷移 { 
         from:  "*" 
         to:  "moved" 
         NumberAnimation  {  properties:  "x,y" ; 期間:  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:  0

          yの SequentialAnimation { 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 から次の概念に直接アクセスできるようにします。

• QObject シグナル – JavaScript でコールバックをトリガーできます
• QObject スロット – JavaScript で呼び出す関数として利用可能
• QObjectプロパティ – JavaScriptの変数として、またバインディングとして利用可能
• QWindow – ウィンドウはウィンドウ内にQMLシーンを作成します
• Q*Model – データバインディングで直接使用される（例：QAbstractItemModel）^{[30] [31] [32]}

シグナル ハンドラは、イベントに応じて命令的なアクションを実行できるようにする JavaScript コールバックです。たとえば、MouseArea 要素には、マウスの押下、解放、クリックを処理するシグナル ハンドラがあります。

 MouseArea  { 
     onPressed:  console.log ( "マウスボタンが押されました" ) }
 

すべてのシグナル ハンドラーの名前は「on」で始まります。

QML と JavaScript は非常に似ているため、JavaScript をサポートするほぼすべてのコード エディターが機能します。ただし、構文の強調表示、コード補完、統合ヘルプ、WYSIWYG エディターの完全なサポートは、無料のクロスプラットフォーム IDE Qt Creatorバージョン 2.1 以降および他の多くの IDEで利用できます。

qml 実行可能ファイルを使用すると、QML ファイルをスクリプトとして実行できます。QML ファイルがシェバンで始まる場合は、直接実行可能にすることができます。ただし、アプリケーションを展開用にパッケージ化するには (特にモバイル プラットフォームの場合)、通常、単純な C++ ランチャーを作成し、必要な QML ファイルをリソースとしてパッケージ化する必要があります。

• QMLリファレンスドキュメント
• QML の最初のステップ
• QML の例とチュートリアル
• Qt ブログ
• QMLチュートリアル
• Qt 開発者ガイド
• Photoshop と GIMP から QML をエクスポートする
• QML での請求システム完全アプリケーション - Khitomer
• QMLブック

• QMLとC++の統合
• Qt QML モジュールが提供する重要な C++ クラス