JSONP+JavaScript by ブクログ

ブクログの本棚パーツが見づらくて仕方なかったので自作しようとした記録。結論から言うと、、、俺にデザインセンスはありません。。。知ってたけどね


とりあえず、JSONPがなんなのかという話から
JSON((JavaScript Object Notation)というのはデータ交換フォーマットで、要はCSVのパワーアップバージョン的なやつ。（詳しくはJSON の紹介をご覧ください。）
JSONP(JSON with padding)は「JSON形式のデータにコールバック関数の呼び出しのためのコードを付加することで、クロスドメインでデータの受け渡しを実現するためのデータ形式」らしい。

JSONPのAPIを用意してくれてるとこはあちこちあるらしいが、たとえばブクロブの場合
http://api.booklog.jp/json/yosilove?category=0&count=1&callback=my_booklog
にアクセスすると

my_booklog({"tana":{"id":"285297","account":"yosilove","name":"yosilove\u306e\u672c\u68da"},"category":[],"books":[{"id":"25159478","asin":"409451192X","url":"http:\/\/booklog.jp\/users\/yosilove\/archives\/409451192X","title":"GJ\u90e8(\u30b0\u30c3\u30b8\u30e7\u3076) (\u30ac\u30ac\u30ac\u6587\u5eab)","author":"\u65b0\u6728 \u4f38","image":"http:\/\/ecx.images-amazon.com\/images\/I\/41oTx5v7n%2BL._SL75_.jpg","width":"52","height":"75","catalog":"Books"}]})

みたいなデータが帰ってくる訳です。このとき、「callback=my_booklog」になってることを覚えといてね。
ちなみに取得できるデータは「本棚の名前」「アカウント名」「本棚ID」「カテゴリ名」「本のID」「本のタイトル」「本のASIN」「本の画像のURL（小さいのしかない）」とからしい。レビューはとれないのか、、、

というわけで、自分のJavaScriptに”my_booklog”という名前のコールバック関数を定義すれば、このデータが第一引数に代入され扱うことができるようになると、そういうことらいい。だいたい下のような感じ。

function my_booklog(obj) {
  var tana     = obj.tana;
  var category = obj.category;
  var books    = obj.books;

  alert('shelf name:'+tana.name);
  alert('Book name:'+books[1].title);
}

このJSONPを利用してブクログの本棚を表示するブログパーツを作ってみた訳だよ。
ブクログを使うにはどうすりゃいいかというと、とりあえず自作スクリプトを用意してどっかにあげておき、あとはサイトの好きな場所に以下のようなHTMLコードを書けばよいとそういうわけ。

<script type="text/javascript" src="スクリプトのURL" id="コールバック名"></script>
< script type="text/javascript" src="http://api.booklog.jp/json/ブクロブユーザID?category=カテゴリID&count=欲しいデータ数&callback=コールバック名"></script>

というわけで作ったスクリプトがこちら


HTMLコードのほうで行数と列数を指定可能、読み込むタイミングによって同じ本棚でも一番上に来る本が変わる、そんなスクリプト。ちなみにブクログの公式のやつを改変（改悪）したものだったりする。
HTMLコード

<script type="text/javascript" src="http://blog.cnobi.jp/v1/blog/user/687792f228a20a7e0a744140d7ae415b/1274537350?default?5?3" id="my_booklog"></script>
 <script type="text/javascript" src="http://api.booklog.jp/json/yosilove?category=0&count=25&callback=my_booklog"></script>

my_booklog.js

//-- 関数定義 --//
//bookinfoに本の情報を表示
function info(id) {
	document.getElementById('bookinfo').innerHTML = document.getElementById(id+'info').innerHTML;
}

//bookinfoに本棚のタイトルを表示
function link() {
	document.getElementById('bookinfo').innerHTML = document.getElementById('info').innerHTML;
}

function my_booklog(obj) {
//objにはBookLogからのデータが入ってる（たぶん）

	function dispBook(book,top,left,width,height){
/*本のデータの例
//{"id":"25161189","asin":"4757509499","url":"http:\/\/booklog.jp\/users\/yosilove\/archives\/4757509499","title":"ZOMBIE-LOAN 1 (\u30ac\u30f3\u30ac\u30f3\u30d5\u30a1\u30f3\u30bf\u30b8\u30fc\u30b3\u30df\u30c3\u30af\u30b9)","author":"PEACH-PIT","image":"http:\/\/ecx.images-amazon.com\/images\/I\/51pfjYeYjxL._SL75_.jpg","width":"53","height":"75","catalog":"Books"}
*/
		var contents = '<span class="book" ';
		contents += 'style="position:relative;margin:10px;" onmouseover="info(\''+book.asin+'\')" onmouseout="link()" ';
		contents += 'top:' + top + 'px;left:' + left + 'px;">';
		contents += '<a href="' + book.url + '" target="_blank" title="' + book.title + '">';
		contents += '<img src="' + book.image + '" border="0" width="' + width + '" height="' 
		+ height + '" style="border-width:0;margin:0;padding:0;vertical-align:bottom;display:inline;"/>';
		contents += '</a>';
		contents += '</span>';
		
		contents += '<span id="'+book.asin+'info" style="display:none">';
		
		contents += "["+book.author+"] "+book.title;
		
		contents += '</span>';
		
		return contents;
	}
	
	/* 棚一段分を表示 */
	function dispShelf(books,shelf_no,book_num){
		//画像データのURLを取得
		var no_image = 'http://widget.booklog.jp/blogparts/images/common/noimage.gif';
		
		var top = 10;
		var left = 10;
		var width = 60;
		var height = 86;
		
		var contents='';
		contents+='<div class="shelf" id="self'+shelf_no+'">';
		
		//取得した本のデータを処理する
		for (var i = shelf_no*book_num; i < shelf_no*book_num+book_num; i++) {
	
			if(!books[i]){ break ; }
			if (books[i].catalog == 'Music') {
				top = 20;
				height = 60;
			}
 
			if (!books[i].image) { books[i].image = no_image;}

			//本一冊ずつの処理
			if (books[i].url) {
				contents += dispBook(books[i],top,left,width,height);
			}
		}
		contents+='</div>';
		return contents;
	}
		
	/**
		ここからスクリプト
	*/
		
	//id=booklog_minishelfなところにアクセス
	if (document.getElementById('my_booklog') != null) {
		var src      = document.getElementById('my_booklog').src;
		var query    = src.split("?");
		var template = query[1];
		
		var book_num = parseInt(query[2]);//一段あたりの冊数
		var shelf_num = parseInt(query[3]);//棚の段数
		
		//alert('book'+book_num+' shelf'+shelf_num);
    }
	
	
    var tana     = obj.tana;
    var category = obj.category;
    var books    = obj.books;
    
	var html = '';
	
	// - ここから本棚表示
	html+='<div class="bookshelf">';
	
	// -- ここからタイトルの表示
	var booklog_title = '<a href="http://booklog.jp/users/'+tana.account+'" style="text-decoration:none;">'
	+'<font color="black">'+tana.name+'</a></a>';
	html += '<span id="info" style="display:none" >'+booklog_title+'</span>';
	html+='<div id="bookinfo">';
	html+=booklog_title;
	html+='</div>';
	// -- ここまでタイトルの表示
	
	// -- ここから棚の表示
	var max_shelf = Math.floor(books.length/book_num);
	//棚の表示順は時間ごとにかわる
	var today = new Date();	
	var shelf_no = Math.floor(today.getMinutes()%(max_shelf+1));
	
	for(var shelf_count=0;shelf_count < shelf_num;shelf_count++){
		html+= dispShelf(books,shelf_no,book_num);
		shelf_no++;
		if(shelf_no == max_shelf){shelf_no=0;}
	}
	// -- ここまで棚の表示
	
	html+='</div>';
	// - ここまで本棚表示
	
    document.write(html);
}