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で使う予定なので気にしないでください。



IEでF12を押せ!!

SharePointでjQueryやCSSで画面カスタマイズを行うときは、目的のタグを指定することが重要です。
これができないと、的確な場所を制御できないので、いらんところまで変化してしまうので、カッコ悪い状態になってしまいます。
ってことでどうやってその目的のタグを指定するかってことですが、Internet Explorerには管理者ツールってのが用意されてまして、これを起動するのがF12なんですね。
まぁ、とりあえず、F12を押してみてください。

あとは、マウスカーソルのアイコンをクリックして、目的のタグがあると思う場所をクリックすれば、HTMLソースの該当部分を開いてくれます。
その前後を見て、タグの構造やClassやIDを調べ、それしかない組み合わせをセレクターとして指定すれば成功。
うまくいくまで頑張れば、目的の場所だけ装飾したりすることができます。
まぁ、これが面倒なんですけどね。
ちなみにトップリンクバーは .menu-horizontalでサイドリンクバーは.menu-verticalの中に記述されています。
本文部?は#MSO_ContentTableあたりで囲めばいいのかな?
この辺は目的によって異なりますけど・・・
頑張って探してください。



サイドメニューをアコーディオン化する

SharePoint2010のサイドメニューをアコーディオン化してしまうスクリプトを作ってみた。

基本的には使わないほうがいいと思うけど、管理されたメタデータのツリーが画面からはみ出てしまう場合、ちょっと小っちゃくなってくれると使いやすくなります。
 
2012/02/15 追記
SP改 by ANK(@SharePoint_X)さんからアドバイスツイートがありましたので、変更しました。
jQuery(document).Ready(~)では動かないことがあるので、_spBodyOnLoadFunctionNames.push("~");を使うほうがいいらしいです。
このコマンドの仕様が見当たらなかったのですが、みなさんこの記述にしていますね。
それにしても、セレクターが美しくない・・・

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  _spBodyOnLoadFunctionNames.push("AccordionMenu");
  function AccordionMenu(){
    jQuery('div.menu-vertical ul >li > ul').hide();
    jQuery('DIV.menu-vertical UL.root > LI').hover(
      function(){jQuery('ul:not(:animated)',this).slideDown(500)},
      function(){jQuery('ul',this).slideUp(1000)}
    );
  };
</script>
 
 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  jQuery(function(){
    jQuery('div.menu-vertical ul >li > ul').hide();
    jQuery('DIV.menu-vertical UL.root > LI').hover(
      function(){jQuery('ul:not(:animated)',this).slideDown()},
      function(){jQuery('ul',this).slideUp()}
    );
  });
</script>


オフラインでSharePoint


未読、既読やオフラインでSharePointを利用するにはSharePoint WorkspaceやOutlookとの接続機能を使いますが、リストやライブラリのテンプレートによって使えるアプリが異なります。

ってことで実際に調べてみました。


機能に違いがあるのは分かりますが、分担しなくてもいいのにって思います。




SharePoint Usersカンファレンスがあるぞ~

2012年3月23日は六本木アカデミーヒルズに集合だ!!
SharePoint Usersカンファレンス Japanが開催されますよ!!

って宣伝してみます。私が参加するかは未定ですけどね。

 

昨日はJapan SharePoint Groupの記念すべき第一回目の勉強会が開催されましたが、
今度はAvePointさん主催で350人規模のユーザーカンファレンスが開催されます。

もちろん、講演者はSharePoint MVPや第一線で活躍されている方ばかり。
とっても濃い内容になることは間違いなし!!

しかも参加費はタダ。

さぁ、今すぐエントリーだ!!

 

午後からのセッションはTech系と非Tech系に分かれて行われるので、一人で迷うもよし!二人で分担するもよし! どれを受講しても損はないと思います。
個人的には前半は非Techで後半2つはTechかな~でもEUC業務についても聞きたいし~2回公演とかありませんかねぇ~

 



Japan Sharepoint group勉強会

Sharepointを愛する方々が集結した大阪。
それぞれ立場は違えどSharePointをキーワードに集まった勉強会。こんなに集まったんだ?という驚き、仲間がいるって実感でき、とっても嬉しかった。
素晴らしいスピーカーと協賛者、そして主催者に感謝です。

SharePointに栄光あれ!

Viva ラーニングのSharePointコンテンツで既定の言語がまじめに動き出した?

相変わらず挙動が安定しないVivaラーニングさん。 既定の言語設定がまじめに仕事を始めたのかもしれません。 ちょっと確認したいことがあってラーニングを開くとコンテンツが一つだけになってしまいました。すべてのコンテンツが表示された状態から何も操作していないのに表示コンテンツ数が変わ...