本の表示の画像を表示したかったので
いろいろREST APIを公開しているサービスをみてみた。
ほとんどがアカウントを作成しないと取得できないタイプだったので
半分あきらめかけていたのだけど、
Google Book API ならセキュリティキーとか作成せずにできそうだったので
ためしてみた。
Google Book APIはISBNコードをハイフン無しのコード部分だけ
数字部13桁をGETのパラメータとして渡してやれば
JSONで情報がもどってくるしくみだ。
なのでjQuery1.11.1 (IEも対応する必要があったので..) を使って
JavaScript関数をつくり、
<script type="text/javascript">
function loadBookImage(){
var isbnCode = $("#isbn").val();
isbnCode = isbnCode.trim().toUpperCase().replace(/[^\dX]/gi, '');
var googleUrl ="https://www.googleapis.com/books/v1/volumes?q=" + isbnCode;
$.ajax({
type: "GET",
url: googleUrl,
dataType: "json"
}).done(function(json){
var thumb = json.items[0].volumeInfo.imageLinks.thumbnail;
if(thumb){
$("#bookImage").empty();
$("#bookImage").prepend("<img src='" + thumb + "'/>");
};
});
};
</script>
bodyタグ内に
- id値がisbnのinputタグ（onBlurにloadBookImage()を定義）
- id値がbookImageのdivタグ
でも、たまにISBNコードと同じでないサムネイル画像が出る..
上記関数で１件目のサムネイル画像のみ使用しているのだけど、
候補が複数帰ってくる場合もあって
それでたまに違う画像が出てくる..
そのあたりは、もうすこし jQuery のAjax に慣れてからにしようかな..
