ui 開発フレームワーク - ospn · – モジュール化したレポジトリ構造 ......

46
Qt : アプリケーション・ UI 開発フレームワーク 朝木卓見 Nokia, Qt

Upload: others

Post on 03-Oct-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

Qt : アプリケーション・ UI 開発フレームワーク

朝木卓見 Nokia, Qt

Page 2: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

2 / 46

自己紹介

•  朝木卓見 (Takumi Asaki) – Field Service Engineer

•  Qt, Developer Experience & Marketplace, Nokia – 1996 年 Qt に出会う –  (旧)Trolltech に 2006 年に入社 – 2008 年 Trolltech の買収により Nokia へ

Page 3: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

3 / 46

アジェンダ

•  Qt とは •  利用事例 •  Qt アプリケーション開発 •  Qt 5 •  リソース

Page 4: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

Qt とは

Page 5: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

5 / 46

Qt Framework

•  クロスプラットフォームのアプリケーション開発フレームワーク

•  Code less Create more – 直観的な C++ クラスライブラリ – 豊富なクラス群、ドキュメント等も整備されている – 学びやすく、使いやすい – 少ないソースコードで本格的なアプリケーションを

•  Deploy everywhere – 単一のソースで各プラットフォームに対応

http://qt.nokia.com/products-jp

Page 6: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

6 / 46

http://qt.nokia.com/products-jp/class-library-1

Qt アーキテクチャ

OpenGL

WebKit Scripting

Multimedia

GUI

XML

Database

Unit Test

Core

Network

Declarative

Page 7: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

7 / 46

Qt Mobility APIs

•  モバイル向けAPI •  クロスプラットフォーム(デスクトップ含む)

http://qt.nokia.com/products-jp/qt-addons/mobility

Bearer management Contacts Location Messaging Multimedia Publish and Subscribe Service Framework

Sensors Versit Camera Document Gallery Feedback Landmark Maps/Navigation

System Information Organizer

Page 8: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

8 / 46

Linux/X11

Qtのサポートプラットフォーム http://doc.qt.nokia.com/4.7/supported-platforms.html

MeeGo(Maemo)

Linux/QWS(w/o X11) Mac OS X

Windows

Windows CE/Mobile

Symbian

Page 9: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

9 / 46

Qt 開発ツール http://qt.nokia.com/products-jp/developer-tools

Qt Linguist - 翻訳ツール

Qt Creator - 統合開発環境

Qt Designer - GUI デザイナ

qmake - ビルドサポート

Qt Assistant - ヘルプリーダー

Qt Simulator - シミュレータ

Page 10: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

10 / 46

Qt SDK

•  Qt で開発を始めるためのパッケージ – Qt & Qt Creator + α – デスクトップとNokiaデバイス向けのSDK

– デスクトップ: ネイティブビルド – モバイル: クロス or リモートビルド

•  Symbian: Windows or リモートコンパイラ •  Maemo: Windows/X11/Mac or リモートコンパイラ • シミュレータによる開発

http://www.forum.nokia.com/Develop/Qt/Tools/

Page 11: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

11 / 46

Qt Creator

•  クロスプラットフォームの統合開発環境(IDE) – Qt のための開発環境

•  C++ , JavaScript コードエディタ(ハイライト、補完等) •  GUI デザイナ • プロジェクト&ビルドマネージメントツール • デバッガ対応(gdb, CDB) • バージョンコントロール管理システム対応 • モバイル端末のUIシミュレータ • デスクトップとモバイルの両対応

http://qt.nokia.com/products-jp/developer-tools/tools-flipper/cross-platform-ide

Page 12: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

12 / 46

Qt Creator

Page 13: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

13 / 46

Qtの歴史 •  1996年 Qt 1.0 リリース (X11 & Windows) •  1999年 Qt 2.0 リリース (X11 がオープンソース化) •  2001年 Qt 3.0 リリース (Mac OS X)

•  2005年 Qt 4.0 リリース (全OSでGPL採用) •  2010年 Qt 4.7 リリース (QML) •  2011年 Qt Creator 2.1 リリース (Qt Quick)

•  2011年 Qt 4.8 リリース(予定) •  2012年 Qt 5.0 リリース(予定)!?

Page 14: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

14 / 46

現在の最新バージョン

•  Qt 4.7.3 – 4.8 Technology Preview

•  Qt Creator 2.2.1 – 2.3 β

•  Qt Mobility 1.2.0 •  Qt SDK 1.1.2

– Qt Simulator 1.1

2011/7/13

Page 15: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

15 / 46

Qt のライセンスモデル

商用(*1) LGPL v. 2.1 GPL v. 3

ライセンス料金 有料 無料 無料

Qt変更時の公開義務 無し 有り 有り

アプリケーションの ソース公開義務

無し 無し 有り

有償サポート ライセンス料金に含む 別途購入可 別途購入可

ランタイム料金 必要(*2) 無し 無し

*1: 現在は Digia (http://qt.digia.com) に移管 *2: ランタイム料金はハードウェアにメインUIがQtであるソフトウェアを組み込んで出荷する際に必要となります。

http://qt.nokia.com/products/licensing/

Page 16: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

利用事例

Page 17: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

17 / 46

利用事例(OSS)

•  KDE Software Compilation – KOffice – Amarok – Marble

•  MeeGo •  Ubuntu Unity 2D •  VLC •  MuseScore

http://qt.nokia.com/qt-in-use-jp

Page 18: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

18 / 46

利用事例(商用)

•  Google Earth •  Adobe Photoshop Elements •  Autodesk Maya 2011 •  Skype •  etc.

http://qt.nokia.com/qt-in-use-jp

Page 19: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

Qt アプリケーション開発

Page 20: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

20 / 46

C++ アプリケーション •  伝統的な開発方法 •  大規模、静的UI、高速なアプリ向け

#include <QApplication> #include <QLabel> int main(int argc, char **argv) { QApplication app(argc, argv); QLabel label(“Hello World”); label.show(); return app.exec(); }

http://labs.qt.nokia.co.jp/getting-started-with-qt

Page 21: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

21 / 46

Qt Quick

•  Qt が提案する新しい UI 作成フレームワーク •  開発者とデザイナーが共同作業を

よりスムーズにできる環境を目指して •  Qt 4.7 + Qt Creator 2.1 から導入 •  三つの要素により構成

– QML: 宣言型UI記述言語 – Declarative モジュール: QML のランタイム – 開発ツール: Qt Creator の QML 用デザイナ等

http://qt.nokia.com/qtquick/

Page 22: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

22 / 46

Qt Quick - QML

•  Qt Meta-object Language •  JSON を参考にした UI 記述言語 •  JavaScript を拡張 •  ネットワーク透過性 •  簡単に

– 学べ – 作り – 動かせる

import QtQuick 1.0Rectangle { width: 200 height: 200 Text { text: "Hello World" anchors.centerIn: parent }}

http://labs.qt.nokia.co.jp/category/qt-quick-tutorial

Page 23: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

23 / 46

Qt Quick – Declarative module

•  QML の基本となる要素を実装 –  Item, Rectangle, MouseArea, Image, etc…

•  QML のランタイム – QDeclarativeView (GUI部) – QDeclarativeEngine (非GUI部)

•  QML と C++ の連携 – QML のオブジェクトに C++ からアクセス – C++ のオブジェクトに QML からアクセス – C++ で QML のカスタム要素を作成

http://doc.qt.nokia.com/4.7/qtdeclarative.html

Page 24: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

24 / 46

Qt Quick – Tools

•  Qt Creator 2.1 で QML の GUI デザイナやデバッグ機能を追加

http://doc.qt.nokia.com/qtcreator-snapshot/creator-visual-editor.html

Page 25: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

Qt 5

Page 26: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

26 / 46

Qt 5 について

•  現在は提案であり、確定ではありません •  コミュニティとの議論を経て確定へ

•  議論は Qt5-feedback メーリングリストで –  http://lists.qt.nokia.com/mailman/listinfo/qt5-feedback

•  提案の詳細は Qt Labs にて – http://labs.qt.nokia.com – http://labs.qt.nokia.co.jp

Page 27: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

27 / 46

Qt 5: なぜ?

•  2005年の Qt 4.0 リリースから6年 – アプリケーション開発のトレンドがモバイルへ – グラフィックの更なるパフォーマンスが必要

•  QML/Qt Quick をより活用する • バイナリコンパチビリティがネックに

•  リサーチプロジェクトをベースにQtを再構成

•  2011年末β、2012年正式リリースを目標

Page 28: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

28 / 46

Qt 5 のコンセプト

•  QML を UI のメイン言語に – QML は JavaScript ベース – QWidget も別モジュールとして残す – UI 以外は C++ のまま

•  OpenGL活用による高速化 – グラフィック関連の内部構造を大きく変更 – 描画パフォーマンスの向上 – シェーダと組み合わせてリッチなUIを

Page 29: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

29 / 46

Qt 5 の変化

•  主に内部アーキテクチャ – Qt 4 とのバイナリコンパチビリティはない – ソースコンパティビリティは出来るだけ確保

•  Obsolete なクラスは削除(ex. QHttp, Qt3Support) – ユーザは今までと同じように利用可能

•  開発モデルをオープンに – 今までは Trolltech/Nokia が中心となって開発 – 今後はコミュニティで意志決定・開発 – http://qt-labs.org/index.php/Main_Page

Page 30: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

30 / 46

Qt 5 のアーキテクチャ(案)

•  四つのアーキテクチャ変更 – グラフィックスタックを QML Scenegraph ベースに – ウィンドウシステムを Lighthouse で抽象化 – モジュール化したレポジトリ構造 – QWidget を QtGui モジュールから分離

•  QtScript を V8 JavaScript エンジンベースに •  QtWebKit を WebKit2 ベースに

Page 31: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

31 / 46

Qt 5 のアーキテクチャ図(案) !"#$%&'($)&$*)$+$

!

$,'-#$+$&.$/$

!!

!"#$!"#$!%&!"'!()*!+,-,!"./012%3,4%-5!0,!%',!/-&6-/%&7!8039-&6)!:;;!6/05%&7!2011-&,!'2/<+72!%=1-/0'%>-!6/05%&7!3<==0&6,!=09%&7!,+8<1'%=0;!+,-!<?!'2-!.@A!0&6!=09%&7!3-/'0%&!'2%&7,!0,!,206-/!-??-3',!<&!,+8'/--,!<?!%'-=,!>-/B!20/6!'<!%=1;-=-&')!!C</!'20'!/-0,<&!5-!5%;;!8-!=<>%&7!<>-/!'<!'2-!,3-&-!7/012!'20'!20,!8--&!6->-;<1-6!5%'2!"#$!%&!=%&6!<>-/!'2-!;0,'!B-0/)!D2%,!&-5!,3-&-!7/012!80,-6!>-/,%<&!<?!"#$!5%;;!8-!803950/6,!3<=10'%8;-!<&!'2-!"#$!,%6-E!8+'!"#$!%'-=,!%=1;-=-&'-6!%&!FGG!H8B!%&2-/%'%&7!"I-3;0/0'%>-J'-=K!5%;;!&--6!'<!8-!,;%72';B!320&7-6)!L-!5%;;!0%=!0'!1/<>%6%&7!0&!%'-=!%&!'2-!,3-&-!7/012!'20'!%,!0,!H,<+/3-K!3<=10'%8;-!0,!1<,,%8;-!'<!"I-3;0/0'%>-J'-=!'<!-0,-!'/0&,%'%<&)!!D2-!-M%,'%&7!"./012%3,4%-5!80,-6!"#$!5%;;!3<&'%&+-!'<!8-!,+11</'-6!?</!0!'/0&,%'%<&0/B!1-/%<6E!8+'!5%;;!&<'!8-!6->-;<1-6!0&B!?+/'2-/)!C+/'2-/=</-!%'!5%;;!6-1-&6!<&!"L%67-'!0&6!'2+,!8-!&<'!/-3<==-&6-6!H</!0>0%;08;-K!?</!+,07-!<&!6->%3-,)!!!

QML 3D

SceneGraph

Qt Components

QML WebKit Qt 3D

Lighthouse

OpenGL Enabled WindowSurface

Win Mac Linux/Wayland Symbian X11 Android !

QtGuiCore module Composition of all UI will go through SceneGraph. WebKit, Qt Components and QML will create content nodes for the scene graph and the scenegraph will compose / render all content through and OpenGL surface provided by the Lighthouse layer. 2D API's will primarily serve as a content feeder into the scenegraph, typically layers that need to be composed.

2D API (QPainter)

Raster Engine

GL Engine

QBackingstore

QWidget

Page 32: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

32 / 46

QML Scene Graph

•  QML をより速く、より滑らかに – 現在の Declarative モジュールは

QGraphicsView 上でソフトウェアによる描画 – QML Scene Graph では

OpenGL をフル活用して高速化 •  Front-to-Back で最小限の描画 • シーングラフでコンテキストの切り替えを最小化 • シェーダの活用

http://labs.qt.nokia.co.jp/2011/06/10/qml-scene-graph-in-master.html

Page 33: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

33 / 46

QML Scene Graph

•  従来は背景から順に描画 – 子要素で隠れるところも描画

Text 1

Text 2

Page 34: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

34 / 46

QML Scene Graph

•  Scene Graph では – 無駄な描画を減らし、コンテキスト変更も最小限

Text 1

Text 2

Page 35: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

35 / 46

QML Scene Graph: Demo http://labs.qt.nokia.co.jp/2011/03/24/the-convenient-power-of-qml-scene-

graph.html

Page 36: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

36 / 46

Lighthouse

•  Qt のウィンドウシステムを抽象化 – 今までは個別にウィンドウシステム対応 – 抽象化することによって移植性を向上 – アクセラレーションとの相性も向上

•  Qt 4.8 から正式リリース予定

http://labs.qt.nokia.com/category/labs/lighthouse/

Page 37: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

37 / 46

Qt Quick Components •  Qt Quick 向けのウィジェットセット

http://labs.qt.nokia.co.jp/2010/09/27/building-the-future-reintroducing-the-qt-quick-components.html

Page 38: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

リソース

Page 39: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

39 / 46

Qt Labs Japan

•  Qt の情報を日本語で発信 – Qt をはじめよう! – Qt Quick 入門 – 英語版 Labs の翻訳

•  http://labs.qt.nokia.com – Qt in depth – etc.

•  Twitter: @qtjapan

http://labs.qt.nokia.co.jp

Page 40: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

40 / 46

Qt をはじめよう!

•  Qt Labs Japan にて 「Qt をはじめよう!」と題した連載を掲載中

– Qt Creator を使った Qt アプリの作成方法 – Qt の基本

• オブジェクトモデル • シグナル・スロット •  レイアウト •  GUI デザイナ

http://labs.qt.nokia.co.jp/getting-started-with-qt

Page 41: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

41 / 46

ML、IRC、バグトラッカー

•  メーリングリスト – http://lists.qt.nokia.com – Qt 関連の各種メーリングリスト(英語)

•  IRC –  irc.freenode.net

•  #qt-labs, #qt-creator, #qt-qml, etc.

•  バグトラッカー – http://bugreports.qt.nokia.com/ – バグを見つけたら報告お願いします(英語)

Page 42: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

42 / 46

Qt Developer Network – wiki, フォーラム, etc. – 翻訳など、ドキュメント置き場に

•  http://developer.qt.nokia.com/wiki/Wiki_Home_Japanese •  http://developer.qt.nokia.com/search/tag/language:ja

http://developer.qt.nokia.com/

Page 43: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

43 / 46

書籍

•  入門Qt4プログラミング ISBN978-4-87311-344-9

Page 44: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

44 / 46

コミュニティ

•  Qt@福岡 –  https://groups.google.com/group/qtFukuoka

•  関東Qt勉強会 –  https://sites.google.com/site/qtkanto/

•  qt-nagoya –  http://groups.google.com/group/qt-nagoya

•  Qt Users Forum Japan –  http://qtusersforum.s2.zmx.jp/forum/index.php

•  Twitter Hash Tag: #qtjp

Page 45: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

45 / 46

イベント

•  Qt Developer Days –  ミュンヘン & サンフランシスコ –  http://qt.nokia.com/qtdevdays2011

•  Qt Contributors’ Summit – ベルリン –  http://labs.qt.nokia.co.jp/2011/07/06/qt-

contributors-summit-report.html

•  Qt Conference Tokyo –  http://qt.nokia.com/about-jp/events/

12月開催予定!!

Page 46: UI 開発フレームワーク - OSPN · – モジュール化したレポジトリ構造 ... Symbian X11 Android ! QtGuiCore module Composition of all UI will go through SceneGraph

46 / 46

Thank you!