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