강의

멘토링

커뮤니티

Programming

/

Desktop Application

[初級] QMLプログラミング2編

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

難易度 初級

受講期間 4か月

  • qtdev
Qt
Qt
QML
QML
C++
C++
Qt
Qt
QML
QML
C++
C++

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

White

32% 受講後に作成

現在唯一1から全て教えてくれるQt講義です

5.0

Son

83% 受講後に作成

ロードマップに沿って講義をよく見ています。 QtとQMLについて全体的に理解するのに大きな助けになりました。そして資料もフラッグハブに共有していただきます。 後で部分的な実習ではなく、全体を活用できるプロジェクト(複数の画面で動作するプログラム)があれば本当に良いようです。 Web講義を見れば、序盤には文法やネットワーク授業をして実習プロジェクトでCRUD掲示板を作るように学んだことを活用して一つのプロジェクトを作っていく過程があれば、部分的に頭に残っている概念が一つにつながって完成しそうです。 。 今後出てくる組込み講義もお待ちしております。ありがとうございます。

5.0

JunHwan Song

100% 受講後に作成

良い講義でした。 次に深化過程もしていただきたいです。 Python-QMLお願いします。

受講後に得られること

  • QMLを使用した近代的なUIの開発

  • QMLとC ++を使用したUIの開発

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 { : 300 height : 200 visible : true title : qsTr ( "QMLサンプルソースコード" ) Text { x : 80 y : 70 text : 「Hello World」 font. pixelSize : 25 } }

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

QMLは簡単で簡単です。開発者でなくても簡単に理解できます。そのため、デザイナーと開発者はQMLコードを使用して互いに対話することができ、互いにアイデアを共有できます。

そのため、QMLを利用すると、デザイナーと開発者が互いに同じ開発ツールを持って協力することで、以前より開発期間を短縮できるようになります。

QMLプログラミング入門

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

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

  • デザインロジックと機能ロジックを分離することで、ソースコードのメンテナンス性、再利用性を高めたい方

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

講義目標💡

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

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

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

この講義だけの特徴
確認してください
📖

理論と実践を一度に

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

オンラインの壁を越えて

知識共有者の姿を講義画面にまとめました。生き生きとしたライブコーディングで進行する授業で、まるでオフラインの授業を聴く感じでいつでもどこでも学習してみてください。

講義構成📖

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

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

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

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

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

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

セクション 6. Model and View を使用した Chess Game の実装
Model と View を使って Chess の Knight を実装する例を実装する方法について学びます。

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

セクション8. C ++を使用した新しいQMLタイプの実装
QMLが提供するTypeなど、直接必要なTypeを実装する方法を学びます。そして、実習例では、Timer Typeを直接実装してみる方法について学びます。

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

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

セクション 11. C++ からの QML Object と変数のマッピング
このセクションでは、C ++とQMLの間のデータ交渉と、C ++とQMLの間の変数型をどのようにマッピングするかを学びます。

セクション12. C ++とQMLを使用したチャットの例の実装
この例では、C++でチャットの機能を実装し、QMLで画面を実装して簡単なチャットの例を実装するセクションです。このセクションでは、C ++とQMLを使用してアプリケーションを実装する方法について学びます。

Q&A 💬

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

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

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

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

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

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

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

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

C++とQtの基礎知識がなければ受講できる講義です。 Qtの経験がない方は、過去の「Qtプログラミング」講義を事前に聞いて、この講義を受講することをお勧めします。

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

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

💾注意事項

  • 詳細については、プレビューで公開されているセクション1 [QML参考資料とQML学習のための推奨Qtバージョンの説明]クラスを確認してください。

こんな方へ
お勧めします!

学習対象は誰ですか?

  • QMLを使ってUIを開発したい人

  • QtフレームワークでQMLを使用してUIを開発したい人

選手知識、必要ですか?

  • C++の基礎

  • Qt基礎

こんな方に
おすすめです

学習対象は
誰でしょう?

  • QMLを使ってUIを開発したい人

  • QtフレームワークでQMLを使用してUIを開発したい人

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

  • C++基礎

  • Qt

こんにちは
です。

1,079

受講生

109

受講レビュー

107

回答

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 )

カリキュラム

全体

47件 ∙ (8時間 56分)

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

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

  • sungilham6205님의 프로필 이미지
    sungilham6205

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    • qtdev
      知識共有者

      함성일さん、良い評価をいただき、本当にありがとうございます。:)

  • siroimono님의 프로필 이미지
    siroimono

    受講レビュー 26

    平均評価 5.0

    5

    32% 受講後に作成

    現在唯一1から全て教えてくれるQt講義です

    • qtdev
      知識共有者

      Whiteさん、良い評価をいただき本当にありがとうございます。良い評価は良いコンテンツを提供する上で大きな力になります。今後もより一層頑張ります :)

  • yoonsojin006502님의 프로필 이미지
    yoonsojin006502

    受講レビュー 1

    平均評価 5.0

    5

    32% 受講後に作成

    • qtdev
      知識共有者

      良いコンチ様、良い評価ありがとうございます。良いお年をお迎えください。^^

  • fortex660224님의 프로필 이미지
    fortex660224

    受講レビュー 2

    平均評価 5.0

    5

    83% 受講後に作成

    ロードマップに沿って講義をよく見ています。 QtとQMLについて全体的に理解するのに大きな助けになりました。そして資料もフラッグハブに共有していただきます。 後で部分的な実習ではなく、全体を活用できるプロジェクト(複数の画面で動作するプログラム)があれば本当に良いようです。 Web講義を見れば、序盤には文法やネットワーク授業をして実習プロジェクトでCRUD掲示板を作るように学んだことを活用して一つのプロジェクトを作っていく過程があれば、部分的に頭に残っている概念が一つにつながって完成しそうです。 。 今後出てくる組込み講義もお待ちしております。ありがとうございます。

    • qtdev
      知識共有者

      こんにちは。 Sonさん、 こんなDetailな受講評ありがとうございます。何を改善すべきか教えてくれてありがとう。 本当にあまりにも貴重なフィードバックありがとうございます。いつか機会になれば私はコーヒー一杯買います。 ^^; そして、プロジェクト形式の講義で "臨時タイトル:リアルタイム個人局実施プロジェクトを実装"という講義を準備しています。次に、"Qtを使用した組み込みLinuxプログラミング"講義と"Qt for MCU"講義を進める計画があります。 最後に良いフィードバックに感謝します。

  • psjhsi122824님의 프로필 이미지
    psjhsi122824

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義でした。 次に深化過程もしていただきたいです。 Python-QMLお願いします。

    • qtdev
      知識共有者

      こんにちは。 JunHwan Songさん 良い評価はとても感謝しています。 Qt Python関連の映像も用意しています。 :)

¥4,708

qtdevの他の講座

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

似ている講座

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