【初級】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. QMLとは
QMLはQt Frameworkが提供するインタープリタ言語です。今回は、QMLの特徴とメリットについて見ていきます。

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

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

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

セクション6. Canvas 
ペイントソフトのように、画面上に画像、線、図形、テキストを表示する方法について学びます。例として、Colorを選択してペイントソフトに絵を描けるサンプルを扱ってみましょう。

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

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

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

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

セクション 11. Layout
QMLではAnchors以外にも、RowLayout、ColumnLayout、GridLayout、LayoutなどのLayoutを使用できます。今回はさまざまな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 💬

Q. 講義を受講する前に、学んでおくべきことはありますか？

C++とQtに関する基礎知識が必要な講義です。Qtの経験がない方は、以前の「Qtプログラミング」講義をあらかじめ受講してから、この講義を受講することをおすすめします。

[入門] Qt 6プログラミング1編

qtdev

￥13,721

29%

￥9,622

入門 / GUI, Qt

4.5

(50)

400+

Qtを使用すると、さまざまなオペレーティングシステムで互換性のあるSWを開発できます。つまり、一度Qtで開発したソースコードで、さまざまなプラットフォームで動作するSWを開発できます。

入門

GUI, Qt

[入門] Qt 6プログラミング1編

qtdev

￥13,721

29%

￥9,622

入門 / GUI, Qt

4.5

(50)

400+

[入門] Qt 6プログラミング2編

qtdev

￥13,721

29%

￥9,622

入門 / Qt, GUI

4.9

(21)

200+

今回の講義はQtプログラミング1編に続いて2編講義です。 Qtを初めてご利用の方は、まず1編を学習し、2編を学習することをお勧めします。

入門

Qt, GUI

[入門] Qt 6プログラミング2編

qtdev

￥13,721

29%

￥9,622

入門 / Qt, GUI

4.9

(21)

200+