qml を用いた youtube クライアントの作成 - 関東 qt 勉強会
DESCRIPTION
TRANSCRIPT
![Page 1: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/1.jpg)
QML を用いたYouTube クライアントの作成
小川 純平 (Jumpei Ogawa / @phanect) 日本 KDE ユーザー会
![Page 2: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/2.jpg)
Qt とは● C++ のフレームワーク● 最近 QML という UI 記述言語と、JavaScript を用いる方法が導入された
● デスクトップ (Windows / Mac / Linux) や モバイル系 OS (MeeGo / Android / Symbian) 、組み込み Linux などで動作
● Qt for Android は現在 alpha 版
![Page 3: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/3.jpg)
QML でYouTube クライアントを作成
![Page 4: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/4.jpg)
作るもの● YouTube の動画を検索して結果を一覧表示● 選択した動画を再生する
![Page 5: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/5.jpg)
テキストボックスを配置● ウィンドウサイズを変更
● 左上の[ナビゲータ] で Rectangle を選択し、 右の [プロパティ] > [ジオメトリ] > [サイ
ズ] の値を変更● デザイナでテキストとテキストボックスを配置
● 左下の [ライブラリ] > [アイテム] タブ から[Text] と [Text Input] をドラッグアンドドロップ
– [Text Edit] は複数行用● 右上の ID を編集● 右下の [テキスト] を編集
![Page 6: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/6.jpg)
ここまでのコードRectangle {
width: 600height: 400
Text {id: text1x: 14y: 15text: "検索キーワード:"font.pixelSize: 12
}
TextInput {id: in_keywordx: 124y: 13width: 137height: 20text: "キーワードをここに入力"font.pixelSize: 12
}}
![Page 7: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/7.jpg)
QML のボタンコンポーネント● モバイル (Symbian/MeeGo) では Qt Quick
Components が既に利用可能● PC で利用したい場合は
git://gitorious.org/qt-components/desktop.git から落とす
![Page 8: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/8.jpg)
QML のボタンコンポーネント● 面倒なので今回は自前で作成
![Page 9: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/9.jpg)
ボタンを作成● Rectangle を新たに作成● その中に Text を入れる
● ナビゲータで Rectangle の下位に Text がき ていることを確認
– 来ていなければ、ナビゲータで Rectangle に Text をドラッグアンドドロップ
● コードエディタで anchor.centerIn: parent を追加
![Page 10: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/10.jpg)
ここまでのコードRectangle {
...Text {...}TextInput {...}
Rectangle {id: buttonx: 286y: 13width: 72height: 20color: "#ffffff"
Text {id: buttontextanchors.centerIn: parenttext: "検索"font.pixelSize: 12
}}
}
![Page 11: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/11.jpg)
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
![Page 12: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/12.jpg)
anchor で TextInput の位置指定
● TextInput で、● x: 286 → anchors.left: text1.right● y: 13 → anchors.verticalCenter:
text1.verticalCenterと変更
● anchors.margins: 10 を TextInput に追加● 周囲からの間隔を指定
● ボタンに対しても同様に行う
![Page 13: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/13.jpg)
YouTube API● 動画の検索 API● http://gdata.youtube.com/feeds/api/vide
os?v=2&q=キーワード
で XML が返ってくる● v=2 は API のバージョン番号
![Page 14: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/14.jpg)
<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>
![Page 15: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/15.jpg)
YouTube タイトル・サムネイル<feed ...>
<entry>
<title type="text">My walk with Mr. Darcy</title>
</entry>
<entry>...
</entry></feed>
XPath は “/feed/entry/title”
![Page 16: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/16.jpg)
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()" }}
![Page 17: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/17.jpg)
ListView で解析結果を表示ListView {
id: videolist
model: ytlistdelegate: Text {text: title}
anchors.top: in_keyword.bottomanchors.margins: 10width: parent.width / 2height: parent.height
}
![Page 18: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/18.jpg)
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から始まることに注意↑
![Page 19: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/19.jpg)
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から始まることに注意↑
}}
![Page 20: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/20.jpg)
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
}
![Page 21: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/21.jpg)
動画プレイヤー部分の作成● ブラウザコンポーネント (WebView) 上に
YouTube の Embedded player を貼り付け● http://www.youtube.com/embed/VIDEO_I
D // ?html5=1● ?html5=1 は Flash 版ではなく HTML5
Player を使いたい場合に付ける
![Page 22: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/22.jpg)
本当はよくない方法ですが...● 本来は Video を用いるべきだが、デスクトップでの利用が面倒くさそうなので...
● モバイルならこちらの方が早いかも...
![Page 23: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/23.jpg)
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
}
![Page 24: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/24.jpg)
YouTube 動画 ID<feed ...>
<entry><media:group>
<yt:videoid>CL-vIg4Ivqw</yt:videoid></media:group>
</entry></feed>
XPath は “/feed/entry/media:group/yt:videoid”
![Page 25: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/25.jpg)
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()"
}}
![Page 26: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/26.jpg)
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
}}
}...
}
![Page 27: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/27.jpg)
検索ボタンにクリックイベントを追加
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
}}
}
![Page 28: QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会](https://reader034.vdocuments.net/reader034/viewer/2022052206/549a388bac7959412e8b5a5d/html5/thumbnails/28.jpg)
End of Slides● 本日のスライド
● http://slidesha.re/obeI9k● 本日のコード
● http://bit.ly/oeuejD● zip: http://bit.ly/oJHauZ