youtube api で検索結果組み立て
#05 YouTubeのAPIを使ってみよう
http://dotinstall.com/lessons/youtube_search_angularjs/21705
を元に
YouTube API を使い、検索結果を組み立てる
YouTube API に関しては
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
のリファレンスを参考にする
今回、編集するのは
myscript.js になる
まず、
$scope.doSearch = function(){
}
でユーザ関数作成
今回、YouTube API ver 2.0 を使用している
まず、
var url ='https://gdata.youtube.com/feeds/api/videos?'
というようにベースURLを
変数に格納
さらに、オプションを指定していきたいので
+{
}.join('&');
として
join() を使って配列をつないで文字列にしている
join() の解説は
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
を参考
今回は
.join('&')
なので、オプションが＆で連結され
リクエストURLができあがる
つぎに。
オプションを指定していく
'q='+encodeURIComponent($scope.query)
これは、検索欄で入力したキーワード
URIに適用するためにエンコードするので
encodeURIComponent() を使っている
encodeURIComponent()に関しては
http://www.m-bsys.com/code/javascripr-encodeuri
を参考にするとわかりやすい
'alt=json',
としてJSON形式を指定
'max-results=10'
として、検索結果を10件にする
'v=2'
として、使用するバージョンを2 に指定
angularJS を使うにはコールバックが必要なので
'callbak=JSON_CALLBACK'
を指定
コールバックは、読んだあとにどんな処理をするか書いたもの
結果を取得するには
$http.jsonp(url).success(function(data){
});
とする
まずは、どのようなデータが返ってきているか調べたいので、この中で
console.dir(data);
とする