jQueryで本の表紙画像を表示してみる

動くものが、とりあえずできた。

何をやっているかというと、<td>ISBN||*****<td>と書かれたHTML文を<td><img></td>に置き換える処理をやってます。

で、*****の部分は書籍ISBN番号の10桁または13桁を書く。

そうすると、画像を用意しなくても、楽天Web Serviceから表紙画像を取得できるようになる。

 

じゃぁ、スクリプト部分ね。
ちなみにISBNの桁変換は、観測気球さんのHPを参考にしています。

 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//セレクター部 
$("document").ready(function(){
  $("td:contains('ISBN||')").each( function(i){
   var code = this.innerText;
   booksearch( code.slice(6,code.length), this);
  });
 });

//ISBNの10桁を13桁に変換する関数
function convISBN10toISBN13(str)
 {
  var c;
  var checkDigit = 0;
  var result = "";
  c = '9';
  result += c;
  checkDigit += (c - 0) * 1;
  c = '7';
  result += c;
  checkDigit += (c - 0) * 3;
  c = '8';
  result += c;
  checkDigit += (c - 0) * 1;
  for ( i = 0; i < 9; i++ ) {
   c = str.charAt(i);
   if ( i % 2 == 0 )
    checkDigit += (c - 0) * 3;
   else
    checkDigit += (c - 0) * 1;
   result += c;
  }
  checkDigit = (10 - (checkDigit % 10)) % 10;
  result += (checkDigit + "");
  return ( result );
 }

//実際に検索して画像に置き換える関数 
function booksearch(ISBN,Output)
 {
  if(ISBN.length == 10){
   ISBN13 = convISBN10toISBN13(ISBN);
   } else {
   ISBN13 = ISBN;
   }
  $.ajax({ type: "GET",
    url: "http://api.rakuten.co.jp/rws/3.0/json?callBack=?",
    data: { "developerId":"楽天から取得してね",
     "operation" :"BooksTotalSearch",
     "version": "2011-07-07",
     "isbnjan" : ISBN13},
    dataType: "jsonp",
    success: function(data){
     switch (data.Header.Status){
      case "Success":
       var Items = data.Body.BooksTotalSearch.Items.Item;
       $(Output).html("<img src=" + Items[0].mediumImageUrl + ">");
       break;
      case "NotFound":
       $(Output).append("検索結果が存在しない");
       break;
      case "ServerError":
       $(Output).append("サーバエラー");
       break;
      case "ClientError":
       $(Output).append("クライアントエラー");
       break;
      case "Maintenance":
       $(Output).append("メンテナンス中");
       break;
     };
     },
    error: function(data){
     $(Output).append("リクエストエラー");
     $(Output).append(data.Header.StatusMsg);
    }
  });
 };
</script>

でHTML文は適当に・・・

<table border=1>
  <tr>
   <td>978-4822294625 </td>
   <td>ISBN||9784822294625</td>
  </tr>
  <tr>
   <td>4873113903</td>
   <td>ISBN||4873113903</td>
  </tr>
</table>

こんな感じで書きます。
すると、ISBN||*****の部分が置き換わるって感じです。

とりあえず動いたって感じなので、うまくいかないところとかあると思いますが、自由に使ってやってください。 

あと、無駄に関数化している部分はjsファイルとWebパーツ部に分割してSharePointで使う予定なので気にしないでください。