QML を用いたYouTube クライアントの作成

小川 純平 (Jumpei Ogawa / @phanect) 日本 KDE ユーザー会

Qt とは● C++ のフレームワーク● 最近 QML という UI 記述言語と、JavaScript を用いる方法が導入された

● デスクトップ (Windows / Mac / Linux) や モバイル系 OS (MeeGo / Android / Symbian) 、組み込み Linux などで動作

● Qt for Android は現在 alpha 版

QML でYouTube クライアントを作成

作るもの● YouTube の動画を検索して結果を一覧表示● 選択した動画を再生する

テキストボックスを配置● ウィンドウサイズを変更

● 左上の[ナビゲータ] で Rectangle を選択し、 右の [プロパティ] > [ジオメトリ] > [サイ

ズ] の値を変更● デザイナでテキストとテキストボックスを配置

● 左下の [ライブラリ] > [アイテム] タブ から[Text] と [Text Input] をドラッグアンドドロップ

– [Text Edit] は複数行用● 右上の ID を編集● 右下の [テキスト] を編集

ここまでのコードRectangle {

width: 600height: 400

Text {id: text1x: 14y: 15text: "検索キーワード:"font.pixelSize: 12

}

TextInput {id: in_keywordx: 124y: 13width: 137height: 20text: "キーワードをここに入力"font.pixelSize: 12

}}

QML のボタンコンポーネント● モバイル (Symbian/MeeGo) では Qt Quick

Components が既に利用可能● PC で利用したい場合は

git://gitorious.org/qt-components/desktop.git から落とす

QML のボタンコンポーネント● 面倒なので今回は自前で作成

ボタンを作成● Rectangle を新たに作成● その中に Text を入れる

● ナビゲータで Rectangle の下位に Text がき ていることを確認

– 来ていなければ、ナビゲータで Rectangle に Text をドラッグアンドドロップ

● コードエディタで anchor.centerIn: parent を追加

ここまでのコードRectangle {

...Text {...}TextInput {...}

Rectangle {id: buttonx: 286y: 13width: 72height: 20color: "#ffffff"

Text {id: buttontextanchors.centerIn: parenttext: "検索"font.pixelSize: 12

}}

}

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-layout.html

anchor で TextInput の位置指定

● TextInput で、● x: 286 → anchors.left: text1.right● y: 13 → anchors.verticalCenter:

text1.verticalCenterと変更

● anchors.margins: 10 を TextInput に追加● 周囲からの間隔を指定

● ボタンに対しても同様に行う

YouTube API● 動画の検索 API● http://gdata.youtube.com/feeds/api/vide

os?v=2&q=キーワード

で XML が返ってくる● v=2 は API のバージョン番号

<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>

YouTube タイトル・サムネイル<feed ...>

<entry>

<title type="text">My walk with Mr. Darcy</title>

</entry>

<entry>...

</entry></feed>

XPath は “/feed/entry/title”

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 namespace 'http://www.w3.org/2005/Atom';"

XmlRole { name: "title"; query: "title/string()" }}

ListView で解析結果を表示ListView {

id: videolist

model: ytlistdelegate: Text {text: title}

anchors.top: in_keyword.bottomanchors.margins: 10width: parent.width / 2height: parent.height

}

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から始まることに注意↑

XmlListModel で XML を解析XmlListModel {

id: ytlist

source: "http://gdata.youtube.com/feeds/api/videos?v=2&q=キーワード"

query: "/feed/entry"

namespaceDeclarations:"declare default element namespace 'http://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()"// 0ではなく1から始まることに注意↑

}}

ListView で解析結果を表示ListView {

id: videolist

model: ytlistdelegate: Column{

Image {source: thumbnail

}Text {text: title}

}

anchors.top: in_keyword.bottomanchors.margins: 10width: parent.width / 2height: parent.height

}

動画プレイヤー部分の作成● ブラウザコンポーネント (WebView) 上に

YouTube の Embedded player を貼り付け● http://www.youtube.com/embed/VIDEO_I

D // ?html5=1● ?html5=1 は Flash 版ではなく HTML5

Player を使いたい場合に付ける

本当はよくない方法ですが...● 本来は Video を用いるべきだが、デスクトップでの利用が面倒くさそうなので...

● モバイルならこちらの方が早いかも...

WebView を追加WebView {

url: "http://www.youtube.com/embed/"+ videoId"

// Flash Player を有効化settings.pluginsEnabled:true

anchors.top: in_keyword.bottomanchors.left: videolist.rightanchors.right: parent.rightanchors.bottom: parent.bottomanchors.margins: 10

}

YouTube 動画 ID<feed ...>

<entry><media:group>

<yt:videoid>CL-vIg4Ivqw</yt:videoid></media:group>

</entry></feed>

XPath は “/feed/entry/media:group/yt:videoid”

XmlListModel で XML を解析XmlListModel {

id: ytlist

source: "http://gdata.youtube.com/feeds/api/videos?v=2&q=キーワード"

query: "/feed/entry"

NamespaceDeclarations:"... declare namespace yt='http://gdata.youtube.com/schemas/2007';"

XmlRole { … } // 前の XmlRole は省略XmlRole {

name: "videoId"query: "media:group/yt:videoid/string()"

}}

ListView にクリックイベントを追加

ListView {id: videolist

model: ytlistdelegate: Column{

Image {source: thumbnail

}Text {text: title}MouseArea {

anchors.fill: parentonClicked: {

videoplayer.url = "http://www.youtube.com/embed/" + videoId

}}

}...

}

検索ボタンにクリックイベントを追加

Rectangle {id: rectangle1...

Text {id: text2text: "Search"

}

MouseArea {anchors.fill: parentonClicked: {

ytlist.source = "http://gdata.youtube.com/feeds/api/videos?v=2&q=" + text_input1.text

}}

}

End of Slides● 本日のスライド

● http://slidesha.re/obeI9k● 本日のコード

● http://bit.ly/oeuejD● zip: http://bit.ly/oJHauZ