KC3 2013 懇談会LT 「QML + C++で楽しい！」

2013/9/8のKC3 2013の懇談会のLTで使ったものです
LaTeX Beamerで作りました(ﾄﾞﾔｧ

Transcript

1. QML + C++ Ͱ ָ͍͠ʂ ಙӬ ༤ే OUCC Sep 8th ಙӬ ༤ే QML + C++ 1/13
2. Qtͱ͸ Qt ͱ͸ΫϩεϓϥοτϑΥʔϜͷΞϓϦέʔγϣϯ։ ൃϑϨʔϜϫʔΫͰ͢ɻ؆୯ʹ͍͑͹ Qt Ͱ࡞੒ͨ͠ι ϑτ͸ଟ͘ͷػثͰಈ͘ͱ͍͏͜ͱͰ͢ɻ ୅දతͳϓϥοτϑΥʔϜͱͯ͠͸ Windows, Mac OS X, Unix Linux(X Window System) ͜ΕΒΛΧόʔͯ͠ ͓Γ࣮࣭తʹύιίϯͳΒ͢΂ͯಈ͖·͢ɻϞόΠϧ୺ ຤΋ରԠ͍ͯ͠·͕͢ Android ͱ iOSɺWindows Phone ͸ࢼݧతͳஈ֊Ͱਖ਼ࣜʹରԠ͢Δͷ͸͍ۙকདྷ Ͱ͢ɻ ೔ຊ Qt ϢʔβʔձϗʔϜϖʔδΑΓ ಙӬ ༤ే QML + C++ 2/13
3. ࠾༻ࣄྫ Qt ͸ VirtualBox, Google Earth, Skype, Handbreak, KDE ͳͲͳ Ͳʹ࠾༻͞Ε͍ͯΔ ಙӬ ༤ే QML + C++ 3/13
4. ࠾༻ࣄྫ Qt ͸ VirtualBox, Google Earth, Skype, Handbreak, KDE ͳͲͳ Ͳʹ࠾༻͞Ε͍ͯΔ ࠷ۙ࿩୊ͷΞϓϦʮ؋ϝϞʯ΋ Qt Λ࢖ͬͯ࡞ΒΕ͍ͯ·͢ʂ ʂ ʂ http://relog.xii.jp/mt5r/2013/08/post-349.html ಙӬ ༤ే QML + C++ 3/13
5. Qt Quickͱ͸ • QML(Qt Meta-Object Language) Qt Quick Ͱ৽ͨʹಋೖ͞Εͨ,UI Λهड़͢ΔͨΊͷϓϩάϥ ϛϯάݴޠ. એݴܕݴޠʹ෼ྨ͞ΕΔ. ϩδοΫͷهड़ʹ͸ JavaScript ͕࢖͑Δ. • Qt Creator IDE QML/JS ʹରԠͨ͠ IDE • QtDeclarative Ϟδϡʔϧ QML Λ࣮ߦ͢ΔͨΊͷΤϯδϯ Ҏ্ͷ 3 ͔ͭΒߏ੒͞ΕΔ UI ςΫϊϩδʔͷϑϨʔϜϫʔΫ. Qt Japanese Blog ΑΓ ಙӬ ༤ే QML + C++ 4/13
6. Qt Quickͱ͸ • QML(Qt Meta-Object Language) Qt Quick Ͱ৽ͨʹಋೖ͞Εͨ,UI Λهड़͢ΔͨΊͷϓϩάϥ ϛϯάݴޠ. એݴܕݴޠʹ෼ྨ͞ΕΔ. ϩδοΫͷهड़ʹ͸ JavaScript ͕࢖͑Δ. • Qt Creator IDE QML/JS ʹରԠͨ͠ IDE • QtDeclarative Ϟδϡʔϧ QML Λ࣮ߦ͢ΔͨΊͷΤϯδϯ Ҏ্ͷ 3 ͔ͭΒߏ੒͞ΕΔ UI ςΫϊϩδʔͷϑϨʔϜϫʔΫ. Qt Japanese Blog ΑΓ QML ͱ JS Λ࢖ͬͯΞϓϦΛ࡞Δ = Qt Quick ͱݺΜͰ͍͍Μ ͡Όͳ͍͔ͱ ಙӬ ༤ే QML + C++ 4/13
7. QMLͬͯͲΜͳݴޠʁ ެ͔ࣜΒαϯϓϧͱͯ͠ग़͍ͯΔ ΋ͷΛ঺հ͠·͢ ಙӬ ༤ే QML + C++ 5/13
8. Ͳ͜Ͱ΋ಈ͘Α ಙӬ ༤ే QML + C++ 6/13
9. Ͳ͜Ͱ΋ಈ͘Α ָ͍͠ʂ ʂ ಙӬ ༤ే QML + C++ 7/13
10. ΋͏ͪΐ ͬͱ࣮༻తͳ΋ͷΛ Qt Λ࢖ͬͯͳʹ͔࣮༻తͳ΋ͷΛ࡞Γ͍ͨͳʙ . . 1 JavaScript Λ஌Βͳ͍ (͓͍͍͠ͷʁ) . . 2 QML + JS Ͱશͯͷ Qt ͷϞδϡʔϧ͕࢖͑Δ Θ͚Ͱ͸ͳ͍ . . 3 C++Ͱॻ͔Εͨ Qt ϥΠϒϥϦ͸ͦͷ··Ͱ͸ QML ͔Β࢖͑ͳ͍ . . 4 ษڧதͷ C++ Λ࢖͍͍ͨ ಙӬ ༤ే QML + C++ 8/13
11. ΋͏ͪΐ ͬͱ࣮༻తͳ΋ͷΛ Qt Λ࢖ͬͯͳʹ͔࣮༻తͳ΋ͷΛ࡞Γ͍ͨͳʙ . . 1 JavaScript Λ஌Βͳ͍ (͓͍͍͠ͷʁ) . . 2 QML + JS Ͱશͯͷ Qt ͷϞδϡʔϧ͕࢖͑Δ Θ͚Ͱ͸ͳ͍ . . 3 C++Ͱॻ͔Εͨ Qt ϥΠϒϥϦ͸ͦͷ··Ͱ͸ QML ͔Β࢖͑ͳ͍ . . 4 ษڧதͷ C++ Λ࢖͍͍ͨ C++ Ͱ QML Module Λ࡞ͬͯͦΕΛ QML ͔Β࢖ ͏͜ͱʹ͠Α͏ʂ ಙӬ ༤ే QML + C++ 8/13
12. QML Moduleͱ͸ UI ෦඼΍ػೳΛఆٛͨ͠΋ͷ QML ͔ΒಡΈࠐΜͰ࢖͑Δ QML Ͱ΋ C++ Ͱ΋࡞ΕΔʂ ಙӬ ༤ే QML + C++ 9/13
13. QML Moduleͱ͸ UI ෦඼΍ػೳΛఆٛͨ͠΋ͷ QML ͔ΒಡΈࠐΜͰ࢖͑Δ QML Ͱ΋ C++ Ͱ΋࡞ΕΔʂ UI Λ QML Ͱ, ϩδοΫΛ C++Ͱ࣮૷͢Δ͜ͱ Ͱ,UI ͷίʔυͱϩδοΫͷίʔυΛ෼͚ΒΕΔ! ಙӬ ༤ే QML + C++ 9/13
14. ͦ͏ͩ,twitterΫϥΠΞϯτΛ࡞Ζ͏ OAuth ೝূͷͨΊͷϥΠϒϥϦʹ kQOAuth Λ࢖༻ ೝূը໘, λΠϜϥΠϯͳͲ UI ͸ QML Ͱ࣮૷͠,OAuth ೝ ূ,twitter ͱͷ௨৴, औಘͨ͠σʔλͷ؅ཧͳͲ͸ C++Ͱ࣮૷ ࠓճ͸ Ubuntu SDK ΋࢖͍·ͨ͠ ಙӬ ༤ే QML + C++ 10/13
15. . . . . . . aztterhometlhelper.h 1 #include <QObject> 2 #include "aztteruserstream.h" 3 4 class AztterHomeTLHelper : public QObject 5 { 6 Q_OBJECT 7 Q_PROPERTY(QVariantMap tweet READ tweet) 8 9 public: 10 explicit AztterHomeTLHelper(QObject *parent = 0); 11 Q_INVOKABLE void startFetching(); 12 Q_INVOKABLE void streamDisconnect(); 13 QVariantMap tweet() const; 14 15 signals: 16 void tweetReceived(); 17 18 private slots: 19 void parseStream(const QByteArray&); 20 private: 21 void parseTweet(const QJsonObject&); 22 23 AztterUserStream *m_stream; 24 QVariantMap m_tweet; 25 }; Yuuto Tokunaga QML + C++
16. . . . . . . Timeline.qml 1 import QtQuick 2.0 2 import Ubuntu.Components 0.1 3 import Ubuntu.Components.ListItems 0.1 as ListItem 4 import "aztterplugin" 1.0 5 6 ListView { 7 id: homeTLView 8 9 Component.onCompleted: helper.startFetching() 10 11 AztterHomeTLHelper { 12 id: helper 13 onTweetReceived: listModel.prepend(tweet) 14 } 15 AztterTweetListModel { 16 id: listModel 17 } 18 model: listModel 19 delegate: TweetItem { 20 text: tweetText 21 name: userName 22 screenName: "@" + userScreenName 23 iconSource: userProfileImageUrl 24 } 25 } Yuuto Tokunaga QML + C++
17. ͜Μͳ͔Μ͡ʹ ಙӬ ༤ే QML + C++ 11/13
18. ͜Μͳ͔Μ͡ʹ ָ͍͠ʂ ʂ ಙӬ ༤ే QML + C++ 12/13
19. ͍͞͝ʹ ߴ଎ʹಈ࡞͠, ͔ͭ Write once, run anywhere Λ໨ࢦ͢ Qt ಙӬ ༤ే QML + C++ 13/13
20. ͍͞͝ʹ ߴ଎ʹಈ࡞͠, ͔ͭ Write once, run anywhere Λ໨ࢦ͢ Qt ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ಙӬ ༤ే QML + C++ 13/13