Home - jQuery - jQuery : Napsterのブログパーツを作る

jQuery : Napsterのブログパーツを作る

  • posted on 2009年6月19日 18:12 / update 2011年8月26日 19:11 / by hoehoe3

090618_napster1.gif

Google AJAX Feed APIとjQuaryを使って、Napsterのニューリリースティッカーのブログパーツぽいものを作ってみたよ。

前にもFlexだったり、Progressionで作ってみようとしたりしたんだけど、飽きて放ったらかし。情報見るだけだったら、RSSをブラウザで見るだけでも十分。でもまーブログパーツにしたいじゃない。そいやGoogle AJAX Feed APIって使ってみたいし、動きも画一なんでいいし、凝らないんだったらJSで、というかjQueryでいいんじゃね?。と思ったわけです。。えーと。ネタものをさっぱり作ってないんで穴うめ。。

データを取ってくるよ

前回同様ニューリリースのRSSを使います。RSSのパースはめんどくさいんでー、他ドメインのRSSやAtomのフィードをJSで簡単に取得するためのAPI、Google AJAX Feed APIてのを使ってみます。画像は、Flashだとクロスドメイン制限のためプロキシ通してましたが、今回はブラウザで表示させるんで必要ないです。

Google AJAX Feed APIの準備

まずGoogle AJAX Feed APIを使えるようにしときます。登録にはGoogleアカウントが必要なので、無い人は作っておきましょう。APIの登録ページに行き、使用するサイトのURLを登録して、APIキーを生成します。生成されたAPIキー、登録したURLとサンプルのコードが表示されるんで、まずサンプルコードをコピペしてちゃんとフィードが取れているかテストしてみましょう。

サンプルコード中の

var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");

で取ってくるフィードのURL指定しているので、読みたいフィードのURLに変えておくといいです。読み込んだデータは、

feed.title
feed.link
feed.content

みたいな感じで取り出せます。かんたんですねー。
RSS以外にも使えるので、詳しくはドキュメントを読むとよいです。

jQueryで実装するよ。

もう後はJS使えば大体の事はできますねー。jQueryでいじっていきましょう。

表示させるデータはアルバムタイトル/アーティスト、Napsterサイト内のアルバム情報へのURL、ジャケット画像ぐらいでいいでしょう。ジャケットの画像のURLはcontentの中のHTMLからセレクタを使って抜き出してきます。

ブログパーツぽくしたいんで、ジャケット画像は1枚だけ見せて、送りボタンで順にスクロールさせる感じにします。

オートプレイも付けてみます。タイマーをしかけて、一定時間毎に順送りボタンのクリックイベントを発生させます。タイマーを扱うためには、jQueryのプラグインjQuery timersを使います。あと、カーソルがボタン上にある時には、オートプレイは動いてほしくないんで、ロールオーバー時にタイマーを止める処理を加えておきます。

var sleevWidth;

jQuery(function($){

 // ボタンをロールオーバー/アウトした時
 $("div.nextButton, div.prevButton").hover(function(){
  $(this).css({cursor:"pointer", background:"#B3DFF2", color:"#FFFFFF"});
  $(document).stopTime("autoPlay");
 },function(){
  $(this).css({cursor:"default", background:"#FFFFFF", color:"#333333"});
  $(document).everyTime(5000, "autoPlay", autoPlay);
 });
 
 // ボタンを押した時
 $("div.nextButton").click(function(){
  if($("div#cdSleeve").position().left >= -(sleevWidth-300)) {
   $("div#cdSleeve").animate({left: "-=150"}, 300);
  } else {
   $("div#cdSleeve").animate({left: 0}, 1000);
  }
 });
 $("div.prevButton").click(function(){
  if ($("div#cdSleeve").position().left < 0) {
   $("div#cdSleeve").animate({left: "+=150"}, 300);
  }
 });
 
 // オートプレイ
 $(document).everyTime(5000, "autoPlay", autoPlay);
 function autoPlay() {
  $("div.nextButton").click();
 }

});

// Google AJAX Feed API からFeedを取得
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("http://www.napster.jp/xml/newrelease_all.xml");
 feed.setNumEntries(99);
 feed.load(function(result) {
  if (!result.error) {
   var container = document.getElementById("cdSleeve");
   var temp = "";
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var thum = $("img" ,$(entry.content)).attr("src");
    temp += '<div class="cdCase">';
    temp += '<div class="cdImg"><a href="' + entry.link + '"><img src="' + thum + '"></a></div>';
    temp += '<div class="cdTitle"><a href="' + entry.link + '">' + entry.title + '</a></div>';
    temp += '</div>';    
   }
   container.innerHTML = temp;
   sleevWidth = result.feed.entries.length*150;
   $("#cdSleeve").css("width",sleevWidth);
  }
 });
}
google.setOnLoadCallback(initialize);

ジャケット一覧表示も追加

何十枚も見るのに、延々ボタンをクリックなんてがめんどくさい。なもんで、パっと全部のジャケットが見れるような一覧も追加します。むしろコレがやりたかった。。チマチマ組むのもイヤなんで、またThickBoxを改造して、レイヤー上にジャケットが並んでるような感じにします。

ThickBoxのインラインモードを使うと、指定したIDのブロックの中身を勝手にレイヤー上に表示してくれます。この場合ジャケット表示部を囲っているブロックを指定してやればいいわけです。そのままだと指定された幅の中でしか出せないんで、フルスクリーンで出せるようにポジション調整周りを修正していきます。

 if(url.indexOf('TB_inline') != -1){	
  $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
  $("#TB_window").unload(function () {
    $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
   });
  tb_position(); ←ここを変える
  $("#TB_load").remove();
  $("#TB_window").css({display:"block"}); 
 }else if(url.indexOf('TB_iframe') != -1){

thickbox.jsの224行目を、下のようにに変更。

if(params['fullscreen'] != "true"){ // 全画面のとき(暫定対応)
 tb_position();
} else {
 $("#TB_window").css({top:"0", left:"0", position:"absolute", width:"100%", height:"100%",background:"none", border:"none"});
 $("#TB_ajaxContent").css({width:"100%", height:"100%"});
 tbContainer = document.getElementById("cdSleeve");
 $("#TB_window").addClass('TB_inline');
}

できたできた。

090618_napster2

CSSとかち合うんでサイドバーに置いてます。ジャケットの横のボタン(見えないけど。。)を押すと順送り、逆送り。ほっとくとオートプレイして、タイトルのLISTをクリックすると一覧がどばっと見えます。ThickBoxなんで領域外をクリックするかESCキーで元の画面に戻ります。

ま、こんなもんでいいんじゃないかなw。

これ。ITMSのも作っとくといいなぁ。後でアフェリエイトも足しとこう。

COMMENT

Auther
hoehoe: おおさか方面でWebとかやってますよ。
Search
Feeds