Google Book APIを使って本のサムネイル画像を表示するJavaScriptを作る

ISBNコードを元に
本の表示の画像を表示したかったので
いろいろ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 に慣れてからにしようかな..