LoginSignup
79
86

More than 5 years have passed since last update.

Google Books API からJSONデータを取得してjQueryで処理する

Last updated at Posted at 2017-01-13

Google Books API + Movable Type で書籍管理システムを作る その4です。今回は、Google Books API について、簡単に解説します。

サンプルコードでは、以下のようなことをやっています。

  • 登録フォームから入力されたISBNコードを利用して、Google Books API からデータを取得
  • 取得したJSONデータを、jQueryで取得
  • 取得した書籍データを、登録画面に表示

Google Books API とは

Google が提供するAPIの一つです。

Google が提供するサービスの一つに「Google ブックス」があります。
https://books.google.com/?hl=ja

世界中の書籍情報を収め、検索することによって詳細情報が取得できるサービスです。
(ただし、登録状況にはばらつきがあり、日本のベストセラーでも収録されていないケースが散見されます)

Google ブックスについては、Wikipedia に詳細が記述されています。
https://ja.wikipedia.org/wiki/Google_%E3%83%96%E3%83%83%E3%82%AF%E3%82%B9

Google Books API は、この「Google ブックス」に登録されているデータを、API経由で取得できるサービスとなります。開発者向けのドキュメントはこちらです。
https://developers.google.com/books/

余談ですが、Googleブックスに登録されている書籍は、必ずしも一般発売されている書籍ばかりではありません。中には、著作権が切れた書籍や、研究文献などの収録されています。
以下は、夏目漱石の「こころ」に関するページと、Google Books API から取得できるJSONデータです。

https://books.google.co.jp/books?id=Jb3GNmCzcIoC
https://www.googleapis.com/books/v1/volumes?q=id:Jb3GNmCzcIoC

このデータには、ISBNがありません。書籍販売サービスであるAmazon や楽天ブックスなどとは、ちょっと異なるデータベースとなっています。

Google Books API の使い方

Google Books API のエンドポイントは、以下に記載があります。
https://developers.google.com/books/docs/v1/reference/

これとは別に、検索エンジンを使うように、検索クエリをエンドポイントに投げることでデータを取得することもできます。この使用方法の場合、APIキーを使わずに、書籍情報を取得することができるため、気軽に利用できます。

書き方は、以下のように、
https://www.googleapis.com/books/v1/volumes?q=search+terms

として、q以降に [検索したい項目:検索語] としてURIを叩きます。検索できる項目は、下記に一覧があります。

利用上限は1000件/1日のようです。
http://qiita.com/minodisk/items/934903a937813fcf1e30

ISBNを利用して、Google Books APIからJSONデータを取得する

実際に、Google Books API からデータを取得してみます。
今回は、ISBNを使って検索することにしました。

例として、古川日出男さんの小説「アラビアの夜の種族」を、ISBNで検索してみます。

アラビアの夜の種族 文庫版第1巻は、以下に詳細情報があります。

ISBNは

  • ISBN13
    • 9784043636037
  • ISBN10
    • 4043636032

となっています。

Google Books APIでは、ISBN13、ISBN10どちらでも検索が可能です。
ここでは、ISBN13で検索してみます。

上記URLにアクセスすると、「アラビアの夜の種族」のJSONデータが表示されるので、jQueryを使って各値を取得します。

// フォームID [isbn] に入力があった場合、jQueryの関数 [change] を使ってISBNコードを取得。
// Google Books APIへ問い合わせを行う。
// もしGoogle Books APIに書籍が存在しない(totalItemsが0の場合)、入力欄に表示されたデータをすべて消去し、該当書籍がないとメッセージを表示する

    $("#isbn").change(function() {
      const isbn = $("#isbn").val();
      const url = "https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn;

      $.getJSON(url, function(data) {
        if(!data.totalItems) {
          $("#isbn").val("");
          $("#BookTitle").text("");
          $("#BookAuthor").text("");
          $("#isbn10").text("");
          $("#isbn13").text("");
          $("#PublishedDate").text("");
          $("#BookThumbnail").text("");
          $("#BookDescription").text("");
          $("#BookMemo").val("");

          $("#message").html('<p class="bg-warning" id="warning">該当する書籍がありません。</p>');
          $('#message > p').fadeOut(3000);

        } else {

// 該当書籍が存在した場合、JSONから値を取得して入力項目のデータを取得する

          $("#BookTitle").text(data.items[0].volumeInfo.title);
          $("#isbn13").text(data.items[0].volumeInfo.industryIdentifiers[0].identifier);
          $("#isbn10").text(data.items[0].volumeInfo.industryIdentifiers[1].identifier);
          $("#BookAuthor").text(data.items[0].volumeInfo.authors[0]);
          $("#PublishedDate").text(data.items[0].volumeInfo.publishedDate);
          $("#BookDescription").text(data.items[0].volumeInfo.description);
          $("#BookThumbnail").html('<img src=\"' + data.items[0].volumeInfo.imageLinks.smallThumbnail + '\" />');

        }

      });
    });

ISBNで検索した場合、書籍データは必ず1件のみになります。このため、配列の1件目にあたる、data.items[0]に格納されているデータ = ISBNに対応した書籍データとみなしました。

data.items[0] の中にある各JSONデータを、それぞれ取得して、登録画面を書き換え表示しています。

全体のコードは以下です。

79
86
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
79
86