簡単なIIIFビューワを作ってみよう（3）: おまけの機能を少し

前回までで、とりあえず、IIIF manifestを指定するとそこに含まれる画像を順番に表示して拡大縮小もできるようになりました。ここまでで、IIIFビューワのごく基本的な機能は作れたと言ってよいのではないかと思います。

ここからは、もう少し便利にするための小技をいくつか試してみましょう。

ページ番号をリストして直接アクセスできるように

いちいちページをめくっていくと、ページ数が増えてきたときにちょっと不便です。そこで、ページ番号をリストして、クリックするとそのページに飛べるようにしてみましょう。

そうすると、必要になるのは

Manifestからのページ番号の取り出し
取り出したページ番号のリスト化
リスト化したページ番号の表示
ページ番号をクリックするとその番号を呼び出せるように
呼び出したページ番号のページをOpenSeadragonで表示
クリックされるべきページ番号に色をつけたりカーソルをあわせると色が変わったりさせる

といったところでしょうか。これらを一通り書いてみましょう。

まず、Manifestからのページ番号の(1)取り出しと(2)リスト化です。前回のスクリプトにてcanvasごとに処理していた箇所で、その番号をタグ化して変数に格納します。

 var pageNumbers = '';
 // 変数 pageNumbers を初期化する
      for(var e=0;e<maniJson["sequences"].length;e++){
         for(var ec=0; ec<maniJson["sequences"][e]["canvases"].length;ec++){
           var ece =  maniJson["sequences"][e]["canvases"][ec];
           var iJsonUri = ece["images"][0]["resource"]["service"]["@id"]+'/info.json';
           arIJsonUri.push(iJsonUri);
           pageNumbers += '<span class="pNum">'+ec+'</span>';
// canvasを一つずつ処理する際に、その番号をページ番号としてタグ化して
// 変数 pageNumbers に追記してリスト化

次に、リスト化したページ番号を(3)表示させましょう。まず、リスト化したページ番号を表示する場所（要素/エレメント）を作ります。

<div id="pageNum"></div>
<!-- OpenSeadragonビューワの直上にエレメントを作っておきましょう。idはpageNumとしておきます。-->
<div id="myViewer" class="openseadragon" style="width:600px;height:600px"></div>

そして、id: pageNumのエレメントに変数 pageNumbersを表示させます。

       viewer.open(arIJsonUri);
       $("#pageNum").html(pageNumbers);
           // viewer.open()の次の行で、id:pageNumに対してpageNumbersをhtmlとして表示させます。

ここまでで、ページ番号リストは表示できるようになったはずです。次に、このリストで(4)個別のページ番号をクリックするとその番号を呼び出せるようにした上で、(5)呼び出したページ番号のcanvas上の画像をOpenSeadragonに表示させます。

$(function(){
    // この行の次に以下の処理を追記します。
    $("body").on("click", ".pNum", function(){
   // 最初から用意されたタグではなく後からJavascriptで追記したものを処理する場合
   // .on() を使います。ここでは、body要素中に用意されたクラスpNum ( .pNum ) を
   // click した場合、function(){ ... } の中を実行することになります。
      var pNum = parseInt($(this).text());
      // クリックした要素におけるテクストを取り出し（ $(this).text() ）て、
      // 数値として扱えるように（ parseInt( ... ) ）して、変数 pNumに入れます。
      viewer.goToPage(pNum);
       // OpenSeadragonのインスタンスviewerに pNumページの画像を表示する
       // ように（ .goToPage(pNum) ）指示します。
    });
    // $("body").on("click", ".pNum", function(){の処理を閉じています。

これで、IIIF Manifestを読み込ませるとページ番号をリストして、いずれかのページ番号をクリックするとそのページの画像が表示されるようになります。ただ、これだけでは、ページ番号をクリックすると何かが起きるということをユーザに示すことができていません。一般に、テキストが青色で下線がついていたり、カーソルをテキストにあわせるとカーソルの形状が変わったり、テキストの色が変わったりすると、クリックした時に何かが起きるとユーザに理解させやすくなります。そこで、クラス.pNumの要素に上記のようなスタイルを割り当てるべく、head要素中にstyle要素を設定します。

    <title>私の簡易IIIFビューワ</title>
    <!-- titleタグの次あたりに以下のものを追記します。-->
    <style>
     .pNum{color:blue;cursor:pointer}
     .pNum:hover{color:red}
    </style>

これで、ページ番号をクリックする意味があるとユーザに伝えやすくなるはずです。

今回のサンプルはこちらです。

ページ番号を1から始める

前回作ったものは、機能としては十分なのですが、ページ番号が0から始まっていて、ちょっとわかりにくいです。そこで、ページ番号を1から始まるようにしてみましょう。

やり方としてはいくつかありますが、とりあえずここでは、HTMLにおける属性をjavascriptで処理するという方法を学ぶべく、以下のような改良をしてみます。

表示用のページ番号を作って呼び出し用ページ番号の要素に属性として与える
リストされたページ番号をクリックすると属性値の呼び出し用ページ番号を呼び出してOpenSeadragonに読み込ませる

ということで、やってみましょう。まずは、以下のように、変数pecを作って表示用に1を足した数値を代入し、それを表示用数値とする一方で、本来の呼び出し用ページ番号が入っているecの方は属性値としてクラスpNumの要素の属性data-nに与えます。

          var pec = ec+1;
           pageNumbers += '<span class="pNum" data-n="'+ec+'">'+pec+'</span>';

（上記では、 var pec = ec+1;を追記するとともに、pageNumbers += ...のところを書き換えています。）

次に、リストされたページ番号をクリックするとその属性値を呼び出してOpenSeadragonに読み込ませるようにするには以下のようにしてみます。

    $("body").on("click", ".pNum", function(){
      var pNum = parseInt($(this).attr("data-n"));
      // 属性data-nの値を取り出して（$(this).attr("data-n")）、
      // 数値として扱えるようにして（ parseInt(...)）から変数pNumに入れます。
      viewer.goToPage(pNum);
     //ここは前回と同じです。

これで、ここでの目標は達成できるはずです。今回のサンプルはこちらです。