TEI用ビューワでローカルPC上の画像を表示するには（画像ビューワ組込み編）

「TEI用ビューワでローカルPC上の画像を表示するには」

の続編、今度は画像ビューワ組込み編です。この辺からちょっとややこしくなってきます。

まず、画像ビューワとして OpenSeadragon を組込みます。そのためには…

なんでもいいのでサンプル画像を用意して、sample.jpgというファイル名をつけておいてください。

それから、こちらのzipファイルをダウンロードして、前回作成したhtmlファイルと同じフォルダで展開してください。

そうすると、大体以下のような感じになっていると思います。zipファイルの展開は忘れずにやってください。

次に、以下のものをコピペしてHTMLファイルとして保存して、先ほどと同じように、なんらかのTEI/XMLファイルをアップロードしてみてください。そうすると、sample.jpgが表示されるはずですが、いかがでしょうか？

以下のものには、今回のために改良した箇所にコメントをつけていますので、それを読んで、何が行われているのかを把握してください。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Favicons -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="openseadragon-bin-4.0.0/openseadragon.min.js"></script> <!-- openseadragonのプログラムを読み込んだ-->
  </head>
  <body>
        <h1>TEIビューワ ver.0.1</h1>

<div style="display: flex;"><!-- 本文とビューワを横並びにするためにdivタグを両者の上位に追加してスタイル display:flexを付与-->
<div id="text_body" style="writing-mode: vertical-rl" >
    <div id="body_result" style="overflow-x: scroll;width:600px;height:600px;padding:10px;"><!-- 本文の幅を狭くした-->
    </div>
</div>
<div id="osd" style="width:400px;height:400px"></div><!-- openseadragonを表示させるための場所をid="osd"で指定して、さらに高さ・幅をスタイルで指定-->
</div>

<div id="input1" style="padding:10px">本文：<br/>
    <input class="file_input1" type="file" multiple="" class="btn btn-default">
</div>
<script>
$( function() {
    var viewer = '';
    $('.file_input1').change(function(){
        for (var i = 0; i < this.files.length; ++i){
            if (this.files[i].type == 'text/xml'){
                var reader = new FileReader();
                reader.onload = function(e){
                    var xmldata = $.parseXML(e.target.result); // TEI/XMLファイルの内容をXMLでパースしてxmldata変数に代入
                    $(xmldata).find('titleStmt').each(function(){
                        $(this).find('title').each(function(){ // TEI/XMLのデータからタイトルを取得
                            $('#body_result').append('<span style="font-weight:bold">'+$(this).html()+'</span>'); //タイトルを<span>タグに入れてid="body_resut"のエレメントに付与
                        });
                        $(this).find('author').each(function(){ // TEI/XMLのデータから著者名を取得
                            $('#body_result').append('<div class="author">'+$(this).html()+'</div>'); // 著者名を<div>タグに入れてid="body_resut"のエレメントに付与
                        });
                    });
                    $(xmldata).find('text').find('body').each(function(){
                        $('#body_result').append($(this).html());
                    });
                }
                reader.readAsText(this.files[i], "utf-8")
            }
        }
        viewer = OpenSeadragon({ // ここからはopenseadragonを起動させるための設定。ファイル読み込みの際に起動するようになっている。
        id: "osd", // id="osd"のdivタグのところにopenseadragonビューワを表示させることを指定。
        sequenceMode: false,   // 画像が1枚だけであることを指定（複数画像を頁遷移したい時はここをtrueにする）
        prefixUrl: "openseadragon-bin-4.0.0/images/", // openseadragonのアイコン画像等があるディレクトリ（フォルダ）を指定
        showNavigator: true, // ナビゲータの表示の有無（trueは表示）
        tileSources:  // 表示する画像の指定。今回は決め打ちでsample.jpg
               [{
                    type: 'image',
                   url:  'sample.jpg',
                   buildPyramid: false // 画像が1枚だけのピラミッド化されてないファイルであると指定
                }]
       });
    });

});
</script>
      
  </body>
</html>

うまくできていると、以下のキャプチャ画像のようになります。画像はホイールなどで拡大縮小できるはずです。ローカルPC上の画像なのでストレスなく拡大縮小できると思います。

というわけで、これで「TEI/XMLファイルを読み込ませると画像も読み込ませる」ことができました。JavascriptとXMLにある程度慣れている人ならあとは自力でできると思いますが、次は、TEI/XMLファイル中の画像ファイルを読み出してそれをビューワ上に表示させる、ことを目指します。次回の掲載はちょっと時間がかかってしまうかもしれませんが、しばしお待ちください…