簡単なIIIFビューワを作ってみよう（2）: IIIF Presentation APIの理解に向けて

さて、前回の続きです。

IIIFでの画像のURLをManifestから取り出す

先に見てきたように、画像の @id のJSONでの階層を確認しました。そこで、それを取り出して表示させてみましょう。$.ajaxで取得してmaniJsonに入れたmaniefstファイルで、「複数のsequenceの1つ目の複数のcanvasの一つ目の複数のimageの一つ目の下のresourceの下のserviceの下の@id」というのを取り出して、id: linkImageに表示させてみます。そこで、

     $.ajax({
        url:pUrl,
        dataType:'json'}).done(function(maniJson){
          $("#linkAttr").text('').text(maniJson["attribution"]);
          $("#linkLabel").text('').text(maniJson["label"]); 
          $("#linkImage").text(maniJson["sequences"][0]["canvases"][0]["images"][0]["resource"]["service"]["@id"]);
      });

以下、HTML部分で追加したもの

タイトル: <div id="linkLabel"></div>
帰属: <div id="linkAttr"></div>
Image URI のベース : <div id="linkImage"></div>

そうすると、たとえば https://gallica.bnf.fr/iiif/ark:/12148/btv1b10526547d/manifest.json おそらく、以下のように　Image URIのベースのURLが表示されるはずです。

タイトル:

BnF, département Estampes et photographie, BOITE FOL-DE-10

帰属:

Bibliothèque nationale de France

Image URI のベース URL:

https://gallica.bnf.fr/iiif/ark:/12148/btv1b10526547d/f1

サンプルはこちらに置いておきます。

OpenSeadragonに画像を読み込ませる

ここまで来たら、次はいよいよ、info.jsonのURLをOpenSeadragonに読み込ませてみましょう。

以下のものをそれぞれ追記してください。

    <script src="jquery-3.4.1.min.js"></script>
    <script src="openseadragon-bin-2.4.0/openseadragon.min.js"></script>  
  </head>

上記ではまず、OpenSeadragon のjavascriptファイルを読み込みます。

    <!--https://gallica.bnf.fr/iiif/ark:/12148/btv1b10526547d/manifest.json-->
    <div id="myViewer" class="openseadragon" style="width:600px;height:600px"></div>
    <script>

上記では、OpenSeadragonのviewerを作成した際に表示させる場所をdivで指定します。viewerの画面サイズもとりあえずここで style="width:600px;height:600px" という風に指定します。

             arIJsonUri = [];
          const iJonUri = maniJson["sequences"][0]["canvases"][0]["images"][0]["resource"]["service"]["@id"]+'/info.json';
              $("#linkImage").text(iJsonUri);
          arIJsonUri.push(iJsonUri);
          viewer.open(arIJsonUri);
      });

Javascriptのところでは、前のスクリプトで#linkImageに読み込ませていたところに、info.json というファイル名をつけておきましょう。これはOpenSeadragonに読み込ませるために必要になるものです。さらにそれを、arIJsonUriという配列変数を作って（ arIJsonUri = []; ）、その変数に配列の値として代入しましょう（ arIJsonUri.push(iJsonUri); ）。そして、その配列変数を読み込ませる形で viewer.openをしてみます。ここでの「viewer」は、次に設定します。

    });
    var viewer = OpenSeadragon({
    id: "myViewer",
    prefixUrl:     "openseadragon-bin-2.4.0/images/",
    visibilityRatio:    1,
    minZoomLevel:       0.3,
    defaultZoomLevel:   0.7,
    sequenceMode:  true,
      initialPage: 0,
      tileSources:   [  ]
    });
  });
    </script>

ここでは、OpenSeadragonのviewerのインスタンスを一つ作成して、それを変数viewerに入れています。これで、このプログラム（を含むWebページ）では、特に工夫しない限り、変数 viewer を用いることでこのOpenSeadragonのインスタンスを操作できることになります。OpenSedragon({ ... }) の括弧内に書かれているのは、このインスタンスの初期設定です。まず、myViewerというidを持つ要素のところに表示するという設定があります。これは、試した限りではdiv要素でないとうまく動作しないようです。prefixUrlはOpenSedragon用のアイコン画像等が置かれているディレクトリを設定します。たとえば、別のディレクトリにカスタマイズアイコンを置いてそれをprefixUrlの値として指定すれば、カスタマイズアイコンが表示されることになります。その他、zoomサイズの設定など色々あります。IIIF viewerのように連続する画像を表示させたい場合には、sequenceModeをtrueに設定した上で tileSourcesの値として配列を与えるといいようです。（ですので、上記の arIJsonUri では配列変数になっています）。また、最初に表示するページとして「0（＝1ページ目）」を指定しています。

サンプルはこちらです。

複数ページ（画像URL）を取り出してOpenSeadragonに渡してページめくり

さらに、複数ページを読み込めるようにしてみます。

先ほどの、画像のURLを取り出して /info.jsonを付記したところを、複数のcanvasを前提としてfor文で繰り返し、取得できたURLをすべて配列変数に入れて（arIJsonUri.push(iJsonUri);）、その配列変数をビューワのインスタンスに読み込ませます。（viewer.open(arIJsonUri); ）

          arIJsonUri = [];     
         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);      
         }
       }       
       viewer.open(arIJsonUri);