Git講座を見てからドットインストールさんのファンになったので結構な数の講義動画を拝見させていただきました。
Web関係はからきしで、JavaScriptとかもほぼ触ったことないのですが、短時間で焦点を絞った勉強ができるのでとても重宝してます。
ただ、やっぱり自分で手を動かさなきゃならんだろうということで、
http://dotinstall.com/lessons/youtube_jukebox_js
で作成したYouTubeの連続再生アプリをよりいい感じにしようと四苦八苦しています。
まず、検索しても結果は最初の10件までしか表示しませんってのじゃ使えないのでここを改善していきます。
$.get(url, options, function(rs) { ...
のoptionsに"start-index"というオプションを渡せますので11件目から表示したかったら
var options = {
...
"start-index": navigation_index * 10 + 1,
"max-results": 10,
...
};的な修正をしてやればいいと思います。
んで、navigation_indexという変数に今何ページ目なのかを保存しておけば"次へ"とか"前へ"とかで動画を探していけるという寸法ですな。
そいでもって、Twitter Bootstrap講座で扱われてたページナビゲーションがいい感じなのでそれでもってページを切り替えたりできたら素敵やん
http://dotinstall.com/lessons/basic_twitter_bootstrap_v2/4020
ということで
<div> class="pagination"> <ul id="navigation"> </ul> </div> <ul id="list"> ...
みたいにページ切り替えを入れるためのdiv要素を作って置きます。
ついでに、ページ切り替えの際にも検索するわけだから、講座では
$('#search').click( ...の中に直接かかれていた検索の処理を使いまわせるようにsearch()関数として切り出します。
function search() {
// キーワードからYouTubeを検索
var url = "https://gdata.youtube.com/feeds/api/videos";
var options = {
"q": search_string,
"alt": "json",
"start-index": navigation_index * 10 + 1,
"max-results": 10,
"v": 2
};
// 検索した結果を#listに追加
$.get(url, options, function(rs) {
$('#list').empty();
console.log(rs);
for(var i = 0; i < rs.feed.entry.length; i++) {
var f = rs.feed.entry[i];
$('#list').append(
$('<li class="movie">').append(
$('<img>').attr('src', f['media$group']['media$thumbnail'][0]['url'])
).data('video-id', f['media$group']['yt$videoid']['$t'])
);
}
$('#navigation').empty();
$('#navigation').append($('<li><a id="prev">前へ</a></li>'));
if(navigation_index > 2)
$('#navigation').append($('<li class="disabled"><a>...</a></li>'));
$('#navigation').append($('<li><a id="'+ (navigation_index) +'">' + (navigation_index) + '</a></li>'));
$('#navigation').append($('<li><a id="'+ (navigation_index+1) +'">' + (navigation_index+1) + '</a></li>'));
$('#navigation').append($('<li><a id="'+ (navigation_index+2) +'">' + (navigation_index+2) + '</a></li>'));
$('#navigation').append($('<li class="disabled"><a>...</a></li>'));
$('#navigation').append($('<li><a id="next">次へ</a></li>'));
}, "json");
};ついでにページナビゲーションボタンもここで表示しておきます。
javascriptは本当に初心者なのであっという間にコードがぐちゃぐちゃしていくのを強く感じますね。
そして、とりあえず"次へ"と"前へ"だけは動くようにします。
ここら辺は特に無理やり感がひどいので後々勉強していこうと思います。
何が問題だったかというと、上記リンクのTwitterBootstrapのページナビゲーションのサンプルで
<li><a href="">前へ</a></li>
ってやってたんだけどこれだとクリックすると現在のページへの遷移が起こっちゃって再生中の動画とか選択したやつとか全部クリアされちゃうっていう問題です。
でも
<a href="">
ってのを消すとボタンとしてではなくただ"前へ"って文字だけが表示されちゃう。
そんで、YouTubeジュークボックスの講座で
$(document).on('click' ...ってのをやってたのを思い出して、
・href=""を消してページ遷移を起こさなくした
<li><a>前へ</a></li>
・idをつけてそれをクリックしたときのイベントを書いた
<li><a id="prev">前へ</a></li>
$(document).on('click', 'a#prev', function() {
navigation_index--;
if(navigation_index < 0)
navigation_index = 0;
search();
});これだとautopagerizer的なのよりはだるいですけど普通に公式のYoutubeで"次へ"ってクリックして進よりサクサクいくのでいいですね
まだまだ問題は山積みですがとりあえず今日は眠いのでここまでー
