カテゴリー: AngularJS

AngularJS で YouTube 検索結果表示

#06 YouTube検索を完成させよう
http://dotinstall.com/lessons/youtube_search_angularjs/21706
を元に、検索結果を表示していく

とりあえずブラウザで開いて
chrome develoer tools でバグがないか確認
さっそくバグ発見

.join() が
,join()
というような , と .の間違い

[] を {} としているなどなど

これらを修正してリロードし
検索欄に入力してボタンをおすと
console に結果が階層として表示される

Object の中に feed があり
その中に
entry がある
max-results=10
と指定したので、
Array[１０]になっている

今回、必要なのは
さらにこの中にある
サムネイルなので、さらに階層を降りていくので
entry の中の数値から

media$group > media$thumbnail

の中にある url などを使う

また、タイトルに関しては
同じく entry の中の数字の中にある
title > $t を使って取得する

これらを使い

$http.jsonp(url).success(function(data){
});

の中に処理を書いていく

ちなみに、確認はできたので

console.dir(data);

はコメントアウト

$scope.results = data.feed.entry;

とする
これで、結果が格納される

データが取得できたので、次に
index.html で表示する

li要素のところへ
画像を表示したいので

<img ng-src="{{result.media$group.media$thumbnail[0].url}}">

タイトル取得には

{{result.media.title.$t}}

とすればOK

result は、取得した結果なので
あとは必要に応じて
階層を . で示して必要としているデータにアクセスして表示するようになる

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

とする

検索結果の有無で表示、非表示切り替え

#04 表示・非表示を切り替えよう
http://dotinstall.com/lessons/youtube_search_angularjs/21704
を元に
検索結果の有無で表示、非表示の切り替えを実装

li要素の中で、ng-repeat を使うことで
要素の分だけ繰り返し処理を行う

<li ng-repeat="result in results">

</li>

とする

そして、この ul li で作成されるリストの中に
データが入ってきたらリスト表示
データがないのなら
検索欄をつかって検索してください
というようなメッセージを表示する

まず、何も検索されていない状態なら

<p>↑から検索してください</p>

と表示する

これで、データがあるか判定するには

<ul style="list-style:none; padding:0">

を

<ul ng-show="results.length" style="list-style:none; padding:0">

というように

ng-show="results.length"

を
追加する

results.length があるということは
何らかの結果が返ってきているということなので
この値が true になり
リストが表示されるようになる

逆に、

<p>↑から検索してください</p>

の部分は
検索結果がある場合
つまり
results.length が true のときには消しておきたいので
ng-hide=”results.length” をつけて
かくすようにする

ng-show="results.length"

で表示

ng-hide="results.length"

で非表示

と覚えておく

なので

<p>↑から検索してください</p>

を

<p ng-hide="results.length">↑から検索してください</p>

とする

これでブラウザをリロードすると
まだ検索結果はないので
↑から検索してください
が表示される

検索フォームと結果表示領域の作成

#03 検索フォームを作ろう
http://dotinstall.com/lessons/youtube_search_angularjs/21703
をもとに
検索フォームと結果を表示する領域を作成

まずは index.html で
フォームを作成

<form ng-submit="doSearch()" name="myform">

としてフォーム領域を指定

この中に

<input type="text" ng-model="query" required>

として入力欄を作成
required をつけることで必須入力欄となる

<input type="submit" value="search">

で検索ボタン作成

また、入力欄になにも入力されていない場合
送信ボタンが無効になるようにしておく

これは

<input type="submit" value="search" ng-disabled="myform.$invalid">

とすればよい

ng-disabled="myform.$invalid"

これは
required になっている項目に入力されない限り
このフォーム自体が無効になる

続いて結果表示領域を作成
結果はリスト形式で表示する
このときに ul li で出る●はいらないので
スタイル設定で消す

<ul style="list-style:none; padding:0">
 </ul>

style=”list-style:none; を指定すると●が消える

AngularJSで Youtube検索

これは、検索すると
Youtube の動画の縮小画像とタイトルがでるというもの

必要な知識は
AngularJS

使うツールは
chrome
vim

AgularJS　については
http://dotinstall.com/lessons/basic_angularjs
を参照

まずは
#02 必要なファイルを揃えよう
http://dotinstall.com/lessons/youtube_search_angularjs/21702
を見ながら
index.html
myscript.js
を作成していく

最初に、あとで復習しやすくするため
mkdir angulajs-youtube
でディレクトリを作成して
この中で作っていく

まず、index.html の作成

ちょっと違うのは
angularjs を使うときには

<html lang="ja" ng-app>

というように
angularjs を使ったアプリの場合
ng-app をつけるようにするということ

そして、AngularJSを使うため
jQuery のときのようにライブラリを読み込むので

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

を追記する　

そして、後で処理を記述した myscript.js を読み込みたいので

<script src="myscript.js"></script>

としておく

body 部分には

        <div ng-controller="mainCtrl">

        </div>

を追記する

次に、myscript.js の作成

var mainCtrl = function($scope, $http){
}

とする
$http は youtube API アクセスに使う