backyard.weblog

Main Contents

ブクログのAPI(非公式)を使って本の情報をjQueryで取得してみた

/ jQuery, Service, Web / , , ,

Post

Booklog
web本棚サービス「ブクログ」

読んだ本とか読みたい本とか(DVDやゲームも)管理出来るweb本棚サービス「ブクログ」
iPhoneアプリでバーコードから検索できる機能がお気に入りです。
買った本を登録する時とは勿論ですが「この本買ったっけ?」って時にも役立つので!

そんなブクログのブログパーツ用 API を使って、自分の本棚に登録している本を取得して表示してみたときのメモです。

ブクログApp
カテゴリ: ライフスタイル
価格: 無料

JSONP形式で本棚の登録情報を取得する

ブクログが提供してくれているブログパーツの埋め込みコードを見てみると、データ自体を JSONP で取得しているみたい。
※非公式APIです!

<script type="text/javascript" src="http://widget.booklog.jp/blogparts/js/booklog_minishelf.js?default" id="booklog_minishelf"></script>
<script type="text/javascript" src="http://api.booklog.jp/json/urakey?category=0&count=15&callback=booklog_minishelf"></script>

2行目にhttp://api.booklog.jp/json/urakeyってあるので、下の xxxxxxxx の部分を任意のアカウントに変更するとそのアカウントの本棚情報が取得できます。

http://api.booklog.jp/json/xxxxxxxx

取得して表示してみたページがこれです。 → Booklog

var userID = 'xxxxxxxx'; // アカウント
var amazonID = 'xxxxxxxx'; // AmazonアソシエイトID(Amazonへのリンクに書き換えるときに使用)
$(function(){
    $.ajax({
        type : 'GET',
        url : 'http://api.booklog.jp/json/' + userID,
        data : {
            category : '0', // カテゴリー
            status : '0', // 読書状況
            rank : '0', // 評価
            count : '100' // 1回のリクエストで取得するtweetの数
        },
        dataType : 'jsonp',
        success : _getTargetBooklog
    });
});

function _getTargetBooklog(data){
    var datas  = data;
    var dataLength  = datas.books.length;
    if(dataLength > 0){
            // ★情報ががあれば
    }else{
            // 情報がなければ
    }
}

特定ユーザー(わたし)のデータを取得結果
使用できるパラメータについては下記にまとめました。

category

取得するカテゴリー。IDを指定します。
※すべてのカテゴリーを取得する場合は、パラメータを付けない、もしくは「0」を指定。

  • category=0 「すべて」
  • category=XXXXXX 「指定したIDのカテゴリーを取得」
status

読書状況を指定できます。
※すべての読書状況を取得する場合は、パラメータを付けない、もしくは「0」を指定。

  • status=0 「すべて」
  • status=1 「読みたい」
  • status=2 「いま読んでる」
  • status=3 「読み終わった」
  • status=4 「積読」
rank

★評価。本棚登録の時につけた星の数を指定できます。
※評価に関係なくすべてを取得する場合は、パラメータを付けない、もしくは「0」を指定。

  • rank=0 「すべて」
  • rank=1 「★」
  • rank=2 「★★」
  • rank=3 「★★★」
  • rank=4 「★★★★」
  • rank=5 「★★★★★」
count 取得する件数。

JSONP形式で取得した情報を表示する

取得した値を使って、本のタイトル・著者・画像とついでに取得できる ASIN からAmazonへの直リンクを作ってをマークアップし、適当に append しました。
先述したソースの★のところに任意の処理を書けば表示されます。

function _getTargetBooklog(data){
    var datas  = data;
    var dataLength  = datas.books.length;
    var targetElement = $('#TargetBooklog');
    targetElement.append('<ul></ul>').css('display','none');
    if(dataLength > 0){
        $.each(datas.books, function(i, item){
            var booksAsin = item.asin;
            var booksTitle = item.title;
            var booksAuthor = item.author;
            var booksImage = item.image;
            var imageW = item.width;
            var imageH = item.height;
            var amazonURL = 'http://amazon.jp/exec/obidos/ASIN/' + booksAsin + '/' + amazonID + '/';
            var htmlSrc;
                htmlSrc = '<li>';
                if( booksImage ){
                    htmlSrc += '<p class="img" style="width:' + imageW + 'px"><a href="' + amazonURL + '" target="_blank"><img src="' + booksImage + '" alt="' + booksTitle + '" width="' + imageW + '" height="' + imageH + '"></a></p>';
                }
                htmlSrc += '<p style="margin-left:' + (Number(imageW) + 10) + 'px"><a href="' + amazonURL + '" target="_blank">'+ booksTitle +'<br>';
                htmlSrc += booksAuthor + '</a></p>';
                htmlSrc += '</li>';
            targetElement.find('ul').append(htmlSrc);
        });
        targetElement.append('<p class="taR">powered by <a href="http://booklog.jp/widget" target="_blank">ブクログ API</a></p>');
        targetElement.fadeIn("slow").slideDown("slow");
    }else{
        var htmlSrc = '<li>No Books :(</li>';
        targetElement.find('ul').append(htmlSrc);
        targetElement.append('<p class="taR">powered by <a href="http://booklog.jp/widget" target="_blank">ブクログ API</a></p>');
        targetElement.fadeIn("slow").slideDown("slow");
    }
}
  • Check
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

Similar Posts

Add Comment

WP-SpamFree by Pole Position Marketing

Comments

From:tomoworks
June 28, 2012 (Thu)

試してみたい♪(個人ブログ作成のあかつきには)

From:wjsnews
June 28, 2012 (Thu)

ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog http://t.co/GVsQXPpl

From:sessan
July 19, 2012 (Thu)

ブクログ API

From:kimihito_
July 27, 2012 (Fri)

“ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/uGxe8x2Y

From:infoeproduction
July 27, 2012 (Fri)

“ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/uGxe8x2Y

From:beginnerprogram
July 27, 2012 (Fri)

RT @kimihito_: “ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/OXf5RA4d

From:shotaatago
July 27, 2012 (Fri)

RT @kimihito_: “ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/OXf5RA4d

From:replica_plus
October 14, 2012 (Sun)

ぶくま: ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog: http://t.co/dWCXKPfM #bookmark

From:motch1cm
December 22, 2012 (Sat)

ブクログ

From:yutaono
May 08, 2013 (Wed)

http://t.co/maE8gZ7i2xアカウント名 で本棚情報をJSONP形式で取得 – ブクログのAPI(非公式)を使って本の情報をjQueryで取得してみた :: backyard.weblog http://t.co/TEGPIhHJBB @urakeyさんから

From:山本雄大
May 20, 2013 (Mon)

“ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/oIffu7rQ7O

From:イープ
May 20, 2013 (Mon)

RT @tuki0918: “ブクログのAPIを使って本の情報をjQueryで取得してみた :: backyard.weblog” http://t.co/oIffu7rQ7O

From:pgmy
September 23, 2013 (Mon)

【ブックマーク】ブクログのAPI(非公式)を使って本の情報をjQueryで取得してみた :: backyard.weblog http://t.co/i05DwPk44q

From:ogata
December 24, 2013 (Tue)

JSONPでやりとりしているのね。

Trackbacks

Trackback URL

From:【Python】ブクログのAPIを利用して自分の本棚の情報を取得する | 年年歳歳花相似たり
December 02, 2012 (Sun)

[…] ブクログのAPIを使って本の情報をjQueryで取得してみた http://backyard.chocolateboard.net/201204/booklog-jquery […]