QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会

2,944 views

Published on

  • Be the first to comment

  • Be the first to like this

QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会

  1. 1. QML を用いたYouTube クライアントの作成小川 純平 (Jumpei Ogawa / @phanect) 日本 KDE ユーザー会
  2. 2. Qt とは● C++ のフレームワーク● 最近 QML という UI 記述言語と、JavaScript を用いる方法が導入された● デスクトップ (Windows / Mac / Linux) や モバイル系 OS (MeeGo / Android / Symbian)、組み込み Linux などで動作 ● Qt for Android は現在 alpha 版
  3. 3. QML でYouTube クライアントを作成
  4. 4. 作るもの● YouTube の動画を検索して結果を一覧表示● 選択した動画を再生する
  5. 5. テキストボックスを配置● ウィンドウサイズを変更 ● 左上の[ナビゲータ] で Rectangle を選択し、 右の [プロパティ] > [ジオメトリ] > [サイ ズ] の値を変更● デザイナでテキストとテキストボックスを配 置 ● 左下の [ライブラリ] > [アイテム] タブ から [Text] と [Text Input] をドラッグアンドド ロップ – [Text Edit] は複数行用 ● 右上の ID を編集 ● 右下の [テキスト] を編集
  6. 6. ここまでのコードRectangle { width: 600 height: 400 Text { id: text1 x: 14 y: 15 text: "検索キーワード:" font.pixelSize: 12 } TextInput { id: in_keyword x: 124 y: 13 width: 137 height: 20 text: "キーワードをここに入力" font.pixelSize: 12
  7. 7. QML のボタンコンポーネント● モバイル (Symbian/MeeGo) では Qt Quick Components が既に利用可能● PC で利用したい場合は git://gitorious.org/qt- components/desktop.git から落とす
  8. 8. QML のボタンコンポーネント● 面倒なので今回は自前で作成
  9. 9. ボタンを作成● Rectangle を新たに作成● その中に Text を入れる ● ナビゲータで Rectangle の下位に Text がき ていることを確認 – 来ていなければ、ナビゲータで Rectangle に Text をドラッグアンドドロップ ● コードエディタで anchor.centerIn: parent を追加
  10. 10. ここまでのコードRectangle { ... Text {...} TextInput {...} Rectangle { id: button x: 286 y: 13 width: 72 height: 20 color: "#ffffff" Text { id: buttontext anchors.centerIn: parent text: "検索" font.pixelSize: 12 }
  11. 11. anchor の設定● anchors で他のコンポーネントに対しての位 置を指定 ● anchors.top / bottom / left / right ● anchors.verticalCenter: 縦方向の中心点 ● anchors.fill: 上下左右の端 ● anchors.centerIn: 中心点● 詳細 > Qt Quick 入門 第7回: レイアウト ● http://labs.qt.nokia.co.jp/2011/01/06/qml-lay
  12. 12. anchor で TextInput の 位置指定● TextInput で、 ● x: 286 → anchors.left: text1.right ● y: 13 → anchors.verticalCenter: text1.verticalCenter と変更● anchors.margins: 10 を TextInput に追加 ● 周囲からの間隔を指定● ボタンに対しても同様に行う
  13. 13. YouTube API● 動画の検索 API● http://gdata.youtube.com/feeds/api/vide os?v=2&q=キーワード で XML が返ってくる ● v=2 は API のバージョン番号
  14. 14. <feed ...> ... <entry> <title type="text">My walk with Mr. Darcy</title> <media:group> <media:thumbnail url="http://img.youtube.com/.../2.jpg" /> <yt:videoid>EXS0BFS6QT4</yt:videoid> </media:group> </entry> ...</feed>
  15. 15. YouTube タイトル・サムネイル<feed ...> <entry> <title type="text">My walk with Mr. Darcy</title> </entry> <entry> ... </entry></feed>XPath は “/feed/entry/title”
  16. 16. XmlListModel で XML を解析XmlListModel { id: ytlist source: "http://gdata.youtube.com/feeds/api/videos?v=2&q=キーワード" query: "/feed/entry" // XPath で <entry> タグを繰り返し読込 namespaceDeclarations:"declare default element namespacehttp://www.w3.org/2005/Atom;" XmlRole { name: "title"; query: "title/string()" }}
  17. 17. ListView で解析結果を表示ListView { id: videolist model: ytlist delegate: Text {text: title} anchors.top: in_keyword.bottom anchors.margins: 10 width: parent.width / 2 height: parent.height}
  18. 18. YouTube タイトル・サムネイル<feed> <entry> <media:group> <media:thumbnail url=http://i.ytimg.com/.../0.jpg .../> <media:thumbnail url=http://i.ytimg.com/.../1.jpg .../> <media:thumbnail url=http://i.ytimg.com/.../2.jpg .../> <media:thumbnail url=http://i.ytimg.com/.../3.jpg .../> </media:group> </entry></feed>XPath は “/feed/entry/media:group/media:thumbnail[1]/@url” 0ではなく1から始まることに注意↑
  19. 19. XmlListModel で XML を解析XmlListModel { id: ytlist source: "http://gdata.youtube.com/feeds/api/videos?v=2&q=キーワード" query: "/feed/entry" namespaceDeclarations:"declare default element namespacehttp://www.w3.org/2005/Atom;declare namespace media=http://search.yahoo.com/mrss/;" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "thumbnail" query: "media:group/media:thumbnail[1]/@url/string()"
  20. 20. ListView で解析結果を表示ListView { id: videolist model: ytlist delegate: Column{ Image { source: thumbnail } Text {text: title} } anchors.top: in_keyword.bottom anchors.margins: 10 width: parent.width / 2 height: parent.height
  21. 21. 動画プレイヤー部分の作成● ブラウザコンポーネント (WebView) 上に YouTube の Embedded player を貼り付け● http://www.youtube.com/embed/VIDEO_I D // ?html5=1 ● ?html5=1 は Flash 版ではなく HTML5 Player を使いたい場合に付ける
  22. 22. 本当はよくない方法ですが...● 本来は Video を用いるべきだが、デスクトッ プでの利用が面倒くさそうなので... ● モバイルならこちらの方が早いかも...
  23. 23. WebView を追加WebView { url: "http://www.youtube.com/embed/" + videoId" // Flash Player を有効化 settings.pluginsEnabled:true anchors.top: in_keyword.bottom anchors.left: videolist.right anchors.right: parent.right anchors.bottom: parent.bottom anchors.margins: 10}
  24. 24. YouTube 動画 ID<feed ...> <entry> <media:group> <yt:videoid>CL-vIg4Ivqw</yt:videoid> </media:group> </entry></feed>XPath は “/feed/entry/media:group/yt:videoid”
  25. 25. XmlListModel で XML を解析XmlListModel { id: ytlist source: "http://gdata.youtube.com/feeds/api/videos?v=2&q=キーワード" query: "/feed/entry" NamespaceDeclarations:"... declare namespaceyt=http://gdata.youtube.com/schemas/2007;" XmlRole { … } // 前の XmlRole は省略 XmlRole { name: "videoId" query: "media:group/yt:videoid/string()" }
  26. 26. ListView にクリックイベントをListView { 追加 id: videolist model: ytlist delegate: Column{ Image { source: thumbnail } Text {text: title} MouseArea { anchors.fill: parent onClicked: { videoplayer.url = "http://www.youtube.com/embed/" + videoId } } } ...}
  27. 27. 検索ボタンにクリックイベントを Rectangle { 追加 id: rectangle1 ... Text { id: text2 text: "Search" } MouseArea { anchors.fill: parent onClicked: { ytlist.source ="http://gdata.youtube.com/feeds/api/videos?v=2&q=" + text_input1.text } } }
  28. 28. End of Slides● 本日のスライド ● http://slidesha.re/obeI9k● 本日のコード ● http://bit.ly/oeuejD ● zip: http://bit.ly/oJHauZ

×