Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Desktop Application

[Level 2] Qtを使ったPythonプログラミング:QML編

QMLは、Qtが提供するUIを作成するプログラミングインタプリタ言語です。 JSONに似ており、JavaScriptを使用できます。 QMLとPythonを組み合わせることで、モダンな高度なUIを簡単に開発できます。

  • qtdev
이론 실습 모두
pyqt
qt
Qt
QML
pyside6
Python
GUI

こんなことが学べます

  • QMLの基本的な文法とUIコンポーネントの活用:QMLの文法、構造、タイプを理解し、それに基づいて基本的なUIコンポーネントを活用してさまざまなユーザーインターフェースを設計する方法を学びます。

  • 高度なUI機能の実装:動的UI、アニメーション、状態遷移などにより、より鮮やかな高度なUIを実装し、アニメーションとイージングカーブを活用して、自然で滑らかなユーザーエクスペリエンスを提供する方法を学びます。

  • Pythonとの連携によるスケーラブルなアプリケーションの開発:QMLとPython間のデータ交換と相互運用性を理解し、Pythonを活用したQMLタイプの拡張と統合を通じて柔軟でスケーラブルなアプリケーションを構築する方法を学びます。

PythonでQML学習をより簡単に入門できるように
専門講義を提供します。

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

プログラミング言語QML?

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

QML(Qt Modeling Language)はQtフレームワークが提供する強力なプログラミング言語で、UI開発のための最適化されたソリューションを提供します。これにより、現代的でスタイリッシュな高度なユーザーインターフェイスを効率的に実装でき、直感的で柔軟なデザインとアニメーションを簡単にサポートし、ユーザーエクスペリエンスを最大限に高めることができます。


QtフレームワークでGUIを開発するときは、UIデザインロジック(QML)と機能ロジック(Python)を明確に区別して設計できます。特に、QMLはUIデザインロジックを専門とする言語として利用できます。 QMLを使用してUIを実装すると、デザインロジックと機能ロジック(Python)を完全に分離することができ、コードの再利用性を最大化し、メンテナンス性を向上させるのに役立ちます。

QMLを活用してデザインロジックを開発すると、はるかに簡単で迅速にUIを実装できます。さらに、Flickable、Gesture、Animation、3Dなどの最新の高度なGUI技術を簡単に適用することができ、スタイリッシュで直感的なユーザーエクスペリエンスを実現するための優れた選択肢となります。

簡単な文法、簡潔な読みやすさ
QMLの利点を体験してください。

プログラミング言語を初めて学ぶときに主にする「Hello World」出力の例を見てみましょう。 QMLがどれほど簡潔な言語であるかを簡単に知ることができます。

import QtQuick Window { : 300 height : 200 visible : true title : qsTr ( "QMLサンプルソースコード" ) Text { x : 80 y : 70 text : 「Hello World」 font. pixelSize : 25 } }

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

QMLは簡潔で直感的な言語で、非開発者も簡単に理解できるほどアクセスしやすいです。これにより、デザイナーと開発者はQMLコードに基づいてシームレスにコミュニケーションし、アイデアを効果的に共有し、協力することができます。

したがって、QMLを活用すると、デザイナーと開発者は同じ開発ツールに基づいてコラボレーションすることができ、以前よりも効率的に開発期間を短縮できます。

こんな方におすすめです🙋‍♀

高度なUI/UX実装

QtでQMLを利用して現代的な高度なUI/UXを簡単に実装したい方(開発者、デザイナー)

ソースコードの再利用性

設計ロジックと機能ロジックを分離することで、ソースコードのメンテナンス性と再利用性を向上させることができます。

望むコラボレーション

QMLと同じツールを使用すると、デザイナーと開発者が効果的にコミュニケーションをとり、協力することができます。

直感的でモダンなUI開発

QMLを通じて活気に満ちた滑らかなユーザーインターフェースを構築したい方におすすめです。

PythonとQMLによる柔軟なアプリケーション開発

さまざまなプラットフォームでスケーラブルなアプリケーションを構築したい開発者に適しています。

アニメーションとユーザーエクスペリエンス(UX)を最大化

UIをより自然で魅力的にする高級アニメーション技法を学びたい方におすすめです。

講義目標💡

  • QMLを使用して、最新の高度なUX/UIを開発する方法を学ぶことができます。

  • QMLを使用して、デザインロジック(QML)と機能ロジック(Python)を完全に分離する方法を学ぶことができます。

  • セクションごとに理論を勉強し、さまざまな実務例を中心にコードを直接書くことができるので、実務で必要なQML開発能力を自然に学ぶことができます。

この講義だけの特徴📖

実戦まで考えた講義

実践能力まで向上させるように講義を構成しました。 すべてのセクション別理論学習後は、実践例を講義に沿って直接実装していくことで学べる授業が用意され、実務能力を高めることができます。

オンラインの壁を越えて

知識共有者の姿を講義画面にまとめました。

講義構成📖 - こんな内容を学ぶ

セクション1.講義を始める
このレッスンに先立って、全体の学習プロセスを概説するセクションです。このセクションでは、講師の紹介に加えて、各セクションで学習する主な内容をまとめて提供します。

セクション2.講義資料
このセクションではセクション3から本格的に開始されるレッスンで使用されるすべてのサンプルソースコードファイルが圧縮ファイルとして提供され、ファイルをダウンロードできます。

セクション3.開発環境の構築
このセクションでは、Qtを活用したPythonプログラミングのための開発環境を設定する方法を深く探索します。

セクション 4. What is QML
QMLはQt Frameworkが提供するインタプリタ言語です。

セクション5. QMLのSyntaxと構造
QMLの構造と文法を学びます。

セクション 6. Type
TypeとはQtのQWidgetのような概念です。このセクションでは、Typeが何かを学び、QMLが提供するTypeの中でよく使うTypeを中心に学びます。

セクション7. Event
タッチ、マウス、キーボードなど、ユーザーインターフェイスで発生するイベント処理をどのように実装するかを学ぶセクションです。QMLでSignalを実装する方法を学びます。

セクション 8. Loader タイプを使用した Dynamic UI の実装
UIでユーザーが特定の領域を動的に変更する方法を学びます。たとえば、AというGUI画面で特定の条件を満たす場合、B画面に切り替える方法を学びます。

セクション 9. Module Programming
ボタン、コンボボックスなど、GUI上でよく使用するモジュールをモジュール化するなど、ユーザーが定義したTypeをモジュールする方法について学びます。

セクション10. QMLでJavaScriptを使用する
QMLでJavaScript関数を使用する方法を学び、JavaScriptファイルをQMLでインポートする方法を学びます。

セクション 11. Type Positioning
Type Positioningとは、画面にTypeを表示する方法を学びます。たとえば、タイプを配置するときに、水平、垂直、または市松模様のような形でタイプを配置する方法を学びます。さらに、多くのTypeが順番に配置されたときに、特定のTypeの情報を取得する方法も学びます。

セクション 12. Anaimation
Animationは、GUI要素にAnimationを簡単に適用する方法を提供します。たとえば、ボタンが表示されて消えることがあります。この時点でアニメーションを使用できます。ボタンが消えると、1秒間消えることがあります。つまり、Opacity の値が 100% から 0% に変わり、特定の時間を与えることができます。

これらのアニメーションを使用すると、GUI上でEffectと同じ効果を発揮できます。また、画面切り替え時にスムーズに画面を切り替えることができるEffectを実装できます。したがって、このセクションでは、GUI要素でアニメーションを使用する方法について学びます。

セクション 13. Animation と Easing curve を使用した Ball Bounding の例の実装
Easing Curveとは、Animationに特定のオプションを使用することで、より洗練されたEffectを使用できます。たとえば、アニメーションが10秒間動作しているときに特定の時間帯に加速するようにすることで、さまざまな効果を実装できます。
このセクションでは、練習の例を通して、アニメーションでイージングカーブを使用する方法を学びます。

セクション 14. State と Transition
Stateは条件を指します。 Transitionは行動を指します。たとえば、オン/オフスイッチでオンとオフが条件であり、オンからオフに変わることをアクションとして定義できます。 StateとTransitionを使用すると、かなり複雑な行動をグループ化し、条件が変わったときに一括して変更することで、GUIの複雑な実装をより簡単に実装できる方法を学びます。

セクション 15. State と Transition を使用した Image Viewer の例の実装
このセクションでは、前のセクションで学んだStateとTransitionを使ってImage Viewerを実装してみるセクションです。

セクション 16. Model and View
ModelとViewは、GUI上に大量のデータを表示するために使用されます。たとえば、100 個のデータを表として表示する場合、データは Model に保存し、View は Model に保存されたデータを GUI に何らかの方法で表示する種類を指します。ビューはテーブルまたはツリーの形にすることができます。このセクションでは、ModelとViewの使い方について学びます。

セクション17. Model and Viewを使用したChess Gameの実装
ModelとViewを活用して、Chess GameのKnightを例として実装する方法について詳しく学習します。

セクション18. QMLとPython間の統合
QMLでPythonの特定のクラスで関数を呼び出す方法と、PythonでQMLで特定のJavaScript関数を呼び出す方法を学びます。そして、実践的な例では、QMLとPython間の関数呼び出しとデータのやり取りを実装することで学ぶことができます。

セクション19. QMLとPython間のリストデータ交換
Pythonで大量のリストデータをQMLに渡す方法を学びます。そして実習例として、PythonでListに保存されたデータを加工してQMLに渡してUI上に表示する方法について学びます。

セクション20. Pythonを使用した新しいQMLタイプの実装
QWidget で QPainter を使って 2D グラフィック要素を QWidget 上に表示したように Python で提供する QQuickPaintedItem クラスを利用して QPainter を使って 2D グラフィック要素を QML の Type 上に表示できる方法について学びます。

セクション21. 入れ子構造のQMLタイプの実装
単にTypeを実装する場合は、階層などのTypeを実装する必要があります。たとえば、Type 内に子に複数の Types を実装する必要がある場合があります。このセクションでは、Chartというトピックを通じて階層のTypeを実装する方法について学びます。

👉学習後変わった皆さんの姿に会いましょう。

  • 講義を聞いたら、QMLを自由自在に活用できます。また、本番プロジェクトでQMLを使用する場合と、既存のPython / Qt方式であるQWidgetを使用する場合、どのような違いがあるのか、長所と短所が何であるかを把握できます。

  • また、QMLを使用してプロジェクトを実装する場合、実装したソースコードのデザインロジック(QML部分)と機能ロジック(Python)を完全に分離でき、作成したコードの再利用性を高めることができます。

Q&A 💬

受講前の予備受講生が気になる質問と回答を3つ以上作成してみてください。
明らかな形式的な答えではなく、知識共有者の個性が明らかになる答えをお勧めします。

Q. 理論、文法以外に実際に使われる様々な例も触れることができますか?

はい。可能です。各セクションごとの理論授業後の例では、直接講師とコーディングする過程が用意されており、現業でQMLで実戦プログラミングを行う際のノウハウを一緒に学ぶことができます。

Q. 学習する講義内容を参考にする資料や教材がありますか?

現在、Qt開発者コミュニティ( qt-dev.com )でオペレータとして活動しています。 QtおよびQMLに関する追加資料は、このサイトから入手できます。

Q. 講義を聞く前に学ぶべきことはありますか?

Python と Qt の基礎知識がなければ受講できる講義です。 Qtの経験がない方は、過去の「 [Level 1] Qtを使用したPythonプログラミング:入門編」の講義を事前に聞いて、この講義を受講することをお勧めします。

Q. 授業内容はどのレベルまで扱いますか?

QMLの基礎から様々な活用分野に対応する高度な内容まで取り上げます。

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):このレッスンはWindowsオペレーティングシステムで行われ、macOS、Linux、Ubuntuなどのさまざまな環境でも利用できます。ただし、Windowsを使用することをお勧めします。


  • 開発環境の構築に必要なソフトウェアは、授業中に一緒にインストールする時間を設けたので、コンピュータとオペレーティングシステムだけを準備してください。

学習資料

  • 受講後の学習参考資料として、セクション2からこのレッスンのすべてのサンプルソースコードをダウンロードできます。

質問する

  • 授業中に理解できない部分や気になる点が生じたら躊躇しないで質問してください。一緒に話し合い、解決するプロセスが学習に大いに役立ちます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 直感的でモダンなUI開発に興味がある方

  • PythonとQMLの統合を通じて柔軟なアプリケーションを作成したい人

  • アニメーションと動的UIの実装を通じてユーザーエクスペリエンスを最大化したい方

前提知識、
必要でしょうか?

  • 基本的なPythonプログラミングの知識:Pythonの基本的な文法とデータ構造(リスト、辞書など)、関数の定義と呼び出しの理解が必要です。これらの基礎知識があれば、Qtを活用したプログラミングに簡単にアクセスできます。

こんにちは
です。

992

受講生

85

受講レビュー

100

回答

4.7

講座評価

9

講座

지식공유자 소개 ✒️


근무경력
: Embedded 분야 SW Team leader
LG전자, VS사업부 IVI선행플랫폼/모듈개발
SW마에스트로, SW 멘토

강의경력
삼성전자, Qt & QML 강의
LG전자, Qt & QML 분야 사내 강사
한컴아카데미 Qt 강의 출강
다수의 IT기업 Qt 강의 출강


저서
Qt 프로그래밍
Qt Quick 프로그래밍
Qt5 프로그래밍 가이드
MeeGo 프로그래밍 완벽 가이드
Qt 실전 프로그래밍

SW커뮤니티 운영
Qt 개발자 커뮤니티 운영자 ( www.qt-dev.com )

カリキュラム

全体

80件 ∙ (11時間 55分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • mo4818729334님의 프로필 이미지
    mo4818729334

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    • qtdev
      知識共有者

      Cảm ơn anh/chị HJ K (바른진생) rất nhiều vì đánh giá tốt. Chúng tôi sẽ cố gắng cung cấp nội dung khóa học tốt hơn trong tương lai.

¥9,093

qtdevの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!