QML
QML
パラダイムマルチパラダイム：宣言型、リアクティブ、スクリプト
家族ECMAスクリプト
開発者Qtプロジェクト
初登場2009 （2009年）
安定版リリース
6.8 [ 1 ] / 2024年10月8日 ( 2024-10-08 )
タイピングの規律ダイナミック、力強い
Webサイトドキュメント.qt .io /qt /qmlapplications .html
影響を受けた
XAML、[ 2 ] JSON、JavaScript、Qt
影響を受けた
Qt、リング[ 3 ]
QML
ファイル名拡張子
.qml
インターネットメディアの種類テキスト/x-qml
開発者Qtプロジェクト
フォーマットの種類スクリプト言語
Webサイトドキュメント.qt .io /qt /qmlapplications .html

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

Qt/C++ 統合

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ファイルをリソースとしてパッケージ化する必要があります。

参考文献

  1. ^ 「Qt 6.8 リリース」。
  2. ^ 「最新のアプリケーションに適したインターフェースはどれか?」scriptol .
  3. ^ Ring Team (2017年12月5日). 「Ringプログラミング言語とその他の言語」 . ring-lang.net . ring-lang . 2018年12月25日時点のオリジナルよりアーカイブ。2017年12月5日閲覧。
  4. ^ 「Qtクイックチュートリアル」 . 2020年8月7日. 2025年3月9日閲覧。
  5. ^「Qt 3D 概要: Qt 3D 5.13.1」 . doc.qt.io.
  6. ^ 「すべてのQMLタイプ：Qt 5.13」 . doc.qt.io. 2019年9月7日閲覧。
  7. ^ Knoll, Lars (2013年4月15日). 「QMLエンジンの進化、パート1」 . 2018年5月11日閲覧。
  8. ^ 「Qt 5.2の新機能」 。 2018年5月11日閲覧。
  9. ^ 「Qt Quick Compiler」 . 2019年9月7日閲覧。
  10. ^ 「QMLアプリケーションのデプロイ：Qt 5.13」 . doc.qt.io. 2019年9月7日閲覧。
  11. ^ "開発/チュートリアル/Plasma4/QML/入門" . KDE TechBase。 KDE。
  12. ^ Dragly, Svenn-Arne (2017年12月). 「reMarkableタブレット向けの開発」 . dragly . 2018年9月14日時点のオリジナルよりアーカイブ。2018年1月3日閲覧。
  13. ^ 「reMarkable Paper TabletのQMLデモ」。GitHub 。 2022年3月9日。
  14. ^ 「Ubuntu の Unity は、Unity Next 向けに Qt/QML で書かれています」「 。マイケル・ララベル。」
  15. ^ 「Sailfish OS アプリケーションで C++ と QML を組み合わせる」。
  16. ^ 「チュートリアル - Qt QmlLive を使用した QML ライブコーディング」。
  17. ^ 「QMLからC++へ、そしてC++からQMLへ」。Jolla。
  18. ^ 「QMLの基礎」。Blackberry。
  19. ^ 「Meego向けQML入門」 Nokia. 2018年1月4日時点のオリジナルよりアーカイブ。2018年1月3日閲覧。
  20. ^ 「MeeGoとQt-QMLのデモがMWCを席巻」 IoT Gadgets、2011年2月23日。
  21. ^ “QML on N900” . maemo.org . Maemoコミュニティ. 2023年3月24日時点のオリジナルよりアーカイブ。2018年1月3日閲覧。
  22. ^ 「Qt が標準的なルックアンドフィールで Tizen に登場」 2013 年 5 月 20 日。
  23. ^ 「メル」。
  24. ^ 「Mer wiki」。
  25. ^ 「MeeGo CE / Mer上のLipstick QML UI」。IoTガジェット。2011年10月6日。
  26. ^ 「QML - あなたの創造性を解き放つ最高のツール」。Ubuntu。
  27. ^ 「Lumina Desktop 2.0を見て」 TrueOS、2020年8月19日。
  28. ^ Alpert, Alan. 「The Qt/QML User Story」 . Incorrigible Imaginings . 2019年6月17日時点のオリジナルよりアーカイブ。 2019年6月17日閲覧。
  29. ^ Alpert, Alan. 「QMLとC++を統合する様々な方法」 . Qt Developer Days . BlackBerry. 2019年6月17日時点のオリジナルよりアーカイブ。 2019年6月17日閲覧。
  30. ^ Dahlbom, J. (2010年4月22日). 「QMLビューにおけるQAbstractItemModels」 .欠けている部分.
  31. ^ 「TableViewの並べ替えとフィルタリング」 The Qt Company。
  32. ^ van der Laan, Brad (2014年7月11日). 「QtのQSortFilterProxyModelの使い方」 . ImaginativeThinking .

ハウツー

「 https://en.wikipedia.org/w/index.php?title=QML&oldid=1319646676」から取得