[初級] QMLプログラミング 1

Qt UI開発のためのQML、
入門から実習まで詳しくお教えします。

QtフレームワークのUI実装、
QMLでより強力に！

プログラミング言語 QML?

Qtフレームワークでモダンで高度なUIを
簡単に開発できるプログラミング言語です。

QML(Qt Modeling Language)は、Qtフレームワークで提供されるプログラミング言語です。QMLは、QtフレームワークでUI開発のために使用できるプログラミング言語であり、現代的で高度なUIを容易に実装することを目的として使用できます。

Qtフレームワークを利用してGUIプログラムを開発する際、UI部分のデザインロジックと機能部分の機能ロジックを分けて考えることができます。その中でもQMLは、デザインロジックに該当するUIを開発する際に、C++の代替として選択できる言語です。特にQMLでUIを開発すると、デザインロジックと機能ロジックを完全に分離できるため、ソースコードの再利用性を高めることができます。

QMLを使用してデザインロジックを開発すると、C++を使用して開発するよりもはるかに簡単かつ迅速にUIを実装できます。また、Flickable、Gesture、Animation、3Dなど、現代的な高度なGUI技術を簡単に適用できます。

簡単な文法、簡潔な可読性
QMLのメリットを体験してみてください。

プログラミング言語を初めて学ぶ際によく作成する「Hello World」の出力例を見てみましょう。QMLがいかに簡潔な言語であるかがよく分かります。

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: qsTr("QMLサンプルソースコード")

    Text {
        x: 80
        y: 70
        text: "Hello World"
        font.pixelSize: 25
    }
}

_{QMLサンプルソースコード}

_{QMLサンプルソースコード実行画面}

QMLは簡単でシンプルです。 開発者でなくても簡単に理解できます。そのため、デザイナーと開発者はQMLコードを通じて互いに対話が可能であり、お互いのアイデアを共有することができます。

したがって、QMLを利用すれば、デザイナーと開発者が同じ開発ツールを共有して協力することで、以前よりも開発期間を短縮できるようになります。

QMLプログラミング入門
このような方におすすめします 🙋‍♀️

講義の目標 💡

• QMLを用いて、モダンで高度なUX/UIを開発する方法を学ぶことができます。
• QMLを使用して、デザインロジックと機能ロジックを完全に分離する方法について学ぶことができます。
• セクションごとに理論を学び、多様な実践的な例題を中心に直接コードを書いてみることができるため、実務で必要なQML開発スキルを自然に身につけることができます。

この講座ならではの特徴を
確認してみてください 📖 📖

理論と実践を一度に

QMLの文法だけでなく、実践力まで身につけられるようカリキュラムを構成しました。各セクションの理論学習の後には、実践的な例題を講義に合わせて自ら実装しながら学べる授業を用意しており、実務能力を向上させることができます。

オンラインの壁を越えて

講師の姿を講義画面に収めました。臨場感あふれるライブコーディングとともに行われる授業を通じて、まるでオフライン授業を受けているような感覚で、いつでもどこでも学習してみてください。

講義構成📖

セクション1. What is QML
QMLはQt Frameworkで提供されるインタープリタ言語です。今回のセクションでは、QMLにどのような特徴と長所があるのかを見ていきます。

セクション2. QMLの構文と構造
QMLの構造と文法を学びます。そして、実習例題を通じてQMLを使用する方法について学ぶセクションです
セクション3. Type
TypeとはQtのQWidgetと同じような概念です。今回のセクションでは、Typeとは何かを学び、QMLで提供されるTypeの中からよく使われるTypeを中心に学びます。そして、実習例題としてAccessibleタイプを利用してボタンTypeを実装してみる時間です。

セクション4. Events 
タッチ、マウス、キーボードなどのように、ユーザーインターフェース上で発生するイベント処理をどのように実装すべきかを学ぶセクションです。そして、QMLでSignalを実装する方法について学びます。実習例題では、SignalとMethod（関数）を接続する例題を通して、Signalを扱う方法を詳しく学びます。 

セクション 5. Loaderタイプを利用したダイナミックUIの実装
UIでユーザーが特定の領域を動的に変化させる方法を学びます。例えば、AというGUI画面から特定の条件を満たす場合にB画面に切り替える方法を学びます。したがって、このセクションを通じて動的に画面を実装する方法について学びます。最後の実習例題では、Loaderタイプを利用して動的に画面を切り替える方法を例題として扱う時間です。

セクション 6. Canvas 
ペイントソフトのように画面上に画像、線、図形、テキストを表示するための方法について学びます。例として、色を選択してペイントソフトに絵を描くことができる例題について扱っていきます。

セクション 7. Graphic Effects 
Blur、Blend、Colorなどのエフェクトを画像上で使用する方法について学びます。 

セクション 8. Module Programming 
ボタンやコンボボックスのようにGUI上で頻繁に使用されるモジュールをモジュール化するのと同様に、ユーザーが定義したTypeをモジュール化する方法について学びます。そして、実際の演習例を通してQMLをモジュール化して実装する方法について学びます。 

セクション 9. QMLでのJavaScriptの使用 
QMLでのJavaScript関数の使用方法について学びます。そして、JavaScriptファイルをQMLにインポートする方法について学びます。演習例では、計算機の実装を通してJavaScriptの使用方法について詳しく学ぶことができます。 

セクション 10. Dialog
QMLでダイアログを使用する方法について学びます。そして、実習例題としてColorを選択するダイアログを直接実装してみることで、ダイアログの使用方法について学ぶことができます。

セクション 11. Layout 
QMLではAnchors以外にも、RowLayout、ColumnLayout、GridLayout、Layoutなどのレイアウトを使用できます。今回は、さまざまなレイアウトの使用方法について学びます。

セクション 12. Type Positioning
Type Positioningとは、画面上にTypeを表示するための方法を学びます。例えば、タイプを配置する際に、横、縦、または格子状のような形でTypeを配置する方法について学びます。

セクション 13. Qt Quick Controls
Qt Quick Controlsは、Button、Dial、CheckBox、BusyIndicatorなど、画面を構成するために必要なGUIインターフェースを提供します。このセクションでは、Qt Quick Controlsを使用する方法について学びます。

Q&A 💬