1. QML を用いた
YouTube クライアントの作成
小川 純平 (Jumpei Ogawa / @phanect)
日本 KDE ユーザー会

2. Qt とは
● C++ のフレームワーク
● 最近 QML という UI 記述言語と、JavaScript
を用いる方法が導入された
● デスクトップ (Windows / Mac / Linux) や
モバイル系 OS (MeeGo / Android /
Symbian)、組み込み Linux などで動作
● Qt for Android は現在 alpha 版

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

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

5. テキストボックスを配置
● ウィンドウサイズを変更
● 左上の[ナビゲータ] で Rectangle を選択し、
右の [プロパティ] > [ジオメトリ] > [サイ
ズ] の値を変更
● デザイナでテキストとテキストボックスを配
置
● 左下の [ライブラリ] > [アイテム] タブ から
[Text] と [Text Input] をドラッグアンドド
ロップ
– [Text Edit] は複数行用
● 右上の ID を編集
● 右下の [テキスト] を編集

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. QML のボタンコンポーネント
● モバイル (Symbian/MeeGo) では Qt Quick
Components が既に利用可能
● PC で利用したい場合は
git://gitorious.org/qt-
components/desktop.git から落とす

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

9. ボタンを作成
● Rectangle を新たに作成
● その中に Text を入れる
● ナビゲータで Rectangle の下位に Text がき
ていることを確認
– 来ていなければ、ナビゲータで Rectangle に
Text をドラッグアンドドロップ
● コードエディタで anchor.centerIn: parent
を追加

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. 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. anchor で TextInput の
位置指定
● TextInput で、
● x: 286 → anchors.left: text1.right
● y: 13 → anchors.verticalCenter:
text1.verticalCenter
と変更
● anchors.margins: 10 を TextInput に追加
● 周囲からの間隔を指定
● ボタンに対しても同様に行う

13. YouTube API
● 動画の検索 API
● http://gdata.youtube.com/feeds/api/vide
os?v=2&q=キーワード
で XML が返ってくる
● v=2 は API のバージョン番号

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. YouTube タイトル・サムネイル
<feed ...>
<entry>
<title type="text">My walk with Mr. Darcy</title>
</entry>
<entry>
...
</entry>
</feed>
XPath は “/feed/entry/title”

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 namespace
'http://www.w3.org/2005/Atom';"
XmlRole { name: "title"; query: "title/string()" }
}

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. 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. 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()"

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. 動画プレイヤー部分の作成
● ブラウザコンポーネント (WebView) 上に
YouTube の Embedded player を貼り付け
● http://www.youtube.com/embed/VIDEO_I
D // ?html5=1
● ?html5=1 は Flash 版ではなく HTML5
Player を使いたい場合に付ける

22. 本当はよくない方法ですが...
● 本来は Video を用いるべきだが、デスクトッ
プでの利用が面倒くさそうなので...
● モバイルならこちらの方が早いかも...

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. YouTube 動画 ID
<feed ...>
<entry>
<media:group>
<yt:videoid>CL-vIg4Ivqw</yt:videoid>
</media:group>
</entry>
</feed>
XPath は “/feed/entry/media:group/yt:videoid”

25. 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()"
}

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. 検索ボタンにクリックイベントを
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. End of Slides
● 本日のスライド
● http://slidesha.re/obeI9k
● 本日のコード
● http://bit.ly/oeuejD
● zip: http://bit.ly/oJHauZ