Google API 第19回

投稿者: | 2015年10月20日
0件のコメント

今回はGoogle Books APIsのEmbedded Viewer APIを紹介します。
Embedded Viewer APIはウェブサイトに本の内容を表示することができるAPIです。

ウェブサイトで本を紹介するとき、本の説明と共に本の内容を一緒に紹介したいと思ったことがあると思います。そういうとき時Embedded Viewer APIを使用すれば、ウェブサイトに本の内容を表示することができます。

そんなEmbedded Viewer APIの特徴、使用方法について説明していきます。

■Embedded Viewer APIの特徴
・ウェブサイトに本の内容を表示させることができる
・本の内容を検索することや本の縮尺を変えることができる
・本の詳細が知りたいときや購買したいときはリンクから参照できる
・Internet Explorer、Firefox、Safari、Google Chromeのブラウザに互換性がある
などの特徴があります。

■Embedded Viewer APIの使用方法
・まずGoogleの共通ライブラリをロードします。
スクリプトタグで「https://www.google.com/jsapi」を読み込ませす。

<script src="https://www.google.com/jsapi"></script>

・次にEmbedded Viewer APIをロードします。
google.loadメソッドを用いてAPIをロードします。
第1引数にはEmbedded Viewer APIであることを示す文字列「books」を指定します。
第2引数にはEmbedded Viewer APIのバージョンを指定します。

<script>
  google.load("books", "0");
</script>

・本の内容を表示するキャンバスを作成します。
ここではキャンバスを幅を500px、高さを500pxに設定しています。

<div id="viewerCanvas" style="width: 500px; height: 500px;"></div>

・本の内容を表示します。 下記のようなinitialize関数を作成します。 loadメソッドには本のコードを指定します。 本のコードにはISBN、OCLC番号、LCCN、Google BooksのボリュームID、Google BooksのプレビューURLが対応しています。 ISBNは10桁または13桁で表される国際標準図書番号です。 OCLC番号はWorldCatのデータベースに登録されている本の固有番号です。 LCCNはアメリカ議会図書館管理番号です。 Google BooksのボリュームIDはGoogle Booksで管理されている本の固有IDです。 Google BooksのプレビューURLはGoogle Booksで本のプレビューを表示するためのURLです。 google.setOnLoadCallbackメソッドにinitialize関数を 読み込ませることで本の内容が表示されます。

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0000000000');
}
google.setOnLoadCallback(initialize);

実際に、本の内容を表示してみます。
下記に表示しているのは「ITパスポートスーパー合格本」の内容です。
※付録に完全なコードがあるので参考にしてください。


ここで本の内容をスライドショーにする方法を紹介します。
まず下記のようなnext関数を作成します。
next関数内ではsetTimeout関数を用いてnext関数を再帰的に呼び出し2000ミリ秒ごとにページを自動遷移させる処理を行わせています。
※setTimeout関数では第一引数には実行したい関数、第二引数には次の処理までの待機時間を指定します。
そして作成したnext関数はinitialize関数内のload関数の後に記述します。
実行すると、本の内容をスライドショーにすることができます。

function next(viewer) {
  window.setTimeout(function() {
    viewer.nextPage();
    next(viewer);
  }, 2000);
}
function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0000000000');
  next(viewer);
}
google.setOnLoadCallback(initialize);

上記の方法を用いて、本の内容のスライドショーを表示します。
※付録に完全なコードがあるので参考にしてください。


以上がEmbedded Viewer APIの説明になります。

上記の通り、Embedded Viewer APIを使用すると簡単に本の内容を表示することができます。
ウェブサイトに本の内容を表示させるだけでなく、本の内容をスライドショーにすることができます。
またBooks APIと連携させてGoogle Booksのような検索サイトを作成することができます。

興味を持って頂けたならEmbedded Viewer APIを是非試していただきたいです。

＜参考サイト＞
・Embedded Viewer API

＜付録＞
・本の内容を表示するサンプルコードです。

<html>
  <head>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("books", "0");

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('xxxxxxxxxxxxx');
      }

      google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width:500px; height:500px"></div>
  </body>
</html>

・本の内容をスライドショーにするサンプルコードです。

<html>
  <head>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("books", "0");

      function next(viewer) {
        window.setTimeout(function() {
          viewer.nextPage();
          next(viewer);
        }, 3000);
      }

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('xxxxxxxxxxxxx');
        next(viewer);
      }

      google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width:500px; height:500px"></div>
  </body>
</html>