デジタルアーカイブ公開システム(9)
今まで開発していたプラグインの新しいバージョンとして、MLA(博物館・美術館、図書館、公文書館)などで利用できるように、今まで文書用プラグインで用いていたopenseadragonを用いて表示すること(書籍のように画面の拡大が可能なモード)及び、IIIF対応マニフェストによる画像などを表示できるようにした。
openseadragonの利用のためjQueryは以下のようにした。
jQuery(window).load(function () { wH=wW * .56; var iw = jQuery('#sp-thumbnail').width(); jQuery('#contentDiv').css('left', iw + 'px'); jQuery('#contentDiv').css('height', wH + 'px'); jQuery('#sp-thumbnail').css('height', wH + 'px'); jQuery("#pageNum").html(1); //画面サイズ変更時に呼ばれる clearTimeout( checkResize ); var checkResize; jQuery(window).resize(function(){ if (!(jQuery('#contentDiv').hasClass('fullpage'))){ checkResize = setTimeout( resizing, 100 ); } }); //リサイズ完了時に実行する処理 function resizing() { var wW=jQuery('#bookcontents').width(); wH=wW * .56; var iw = jQuery('#sp-thumbnail').width(); jQuery('#contentDiv').css('left', iw + 'px'); jQuery('#contentDiv').css('height', wH + 'px'); jQuery('#sp-thumbnail').css('height', wH + 'px'); } //load-imageクラスのクリック jQuery(".load-image").click(function () { var spage = jQuery('li.load-image').index(this); var ipage = parseInt(spage); viewer.goToPage(ipage); OpenSeadragon.cancelEvent(event); }); //OpenSeadragonで設定 viewer = OpenSeadragon({ id: "contentDiv", prefixUrl: "images/", visibilityRatio: 1, defaultZoomLevel: 1, minZoomLevel: 1, maxZoomLevel: 3, sequenceMode: true, initialPage: 0, showNavigator: true, toolbar: "toolbarDiv", fullPageButton: "full-page", rotateLeftButton: "rotate-left", rotateRightButton: "rotate-right", zoomInButton: "zoom-in", zoomOutButton: "zoom-out", homeButton: "reset", nextButton: "next", previousButton: "previous", tileSources: [ ] }); //OpenSeadragonで表示 viewer.open(idata); //ページ変更時イベント viewer.addHandler("page", function (data) { if (!(jQuery('#contentDiv').hasClass('fullpage'))) { jQuery('#pageNum').value = (data.page +1); jQuery('#sp-thumbnail ul li').css('background-color', 'transparent'); var target = jQuery('#sp-thumbnail ul li').eq(data.page); jQuery("#pageNum").html(data.page+1); target.css('background-color', '#f8f4e6'); var box = jQuery('#sp-thumbnail'); var top = box.scrollTop(); var dif = 0; var pad = box.offset().top; dif = target.offset().top; box.scrollTop(top + dif - pad); } }); });
プラグインでは以下に赤字で示した部分でスクリプトにデータを設定している。
// openseadragonで表示する function da_book_hyouji($attachments){ ?> <div id="bookcontainer"> <header> <div id="toolbarDiv"> <span id="button-panel"> <a id="full-page" href="#full-page">全画面表示</a> | <a id="reset" href="#reset">リセット</a> | <a id="zoom-out" href="#zoom-out">縮小</a> | <a id="zoom-in" href="#zoom-in">拡大</a> </span> </div> </header> <div id="bookcontents"> <div id="sp-thumbnail" > <ul> <?php $bno = 0; foreach ($attachments as $attachment) { $bno = $bno + 1; ?> <li class="load-image" id=<?php echo $bno; ?> > <img src=<?php echo(wp_get_attachment_image_url($attachment->ID,'thumbnail')); ?> /> <br /> </li> <?php } ?> <li></li> </ul> </div> <div id="contentDiv" style="background-color:transparent; "></div> </div> <footer> <div id="footerDiv" > <a id="previous" href="#previous-page">前頁</a> | <a id="next" href="#next-page">次頁</a> | 画像番号:<div id="pageNum"></div> </div> </footer> </div> </div> <script type="text/javascript"> var viewer; var idata = [ <?php foreach ($attachments as $attachment) { ?> { type: 'image', url:' <?php echo(wp_get_attachment_image_url($attachment->ID,'full')); ?>', }, <?php } ?> ]; </script> <?php }
IIIF対応マニフェストによる画像などを表示は以下のようにiframeに該当マニフェストを変数とし、miradorを用いたIIIF対応画像表示ページを呼び出している。
/* IIIF 表示 */ function da_iiif_hyouji($iiifurl){ ?> <div id="layout" class="pure-g"> <div class="pure-u-1 pure-u-md-3-5"> <div class="l-box" > <?php $plugin_url = plugin_dir_url( __FILE__ ); ?> <div class="iframe-iiif" style="padding-top:66.66%;"> <iframe src="<?php echo $plugin_url."iiifm.html?manifest=".$iiifurl; ?>" width="800px" height="530px" frameborder="0" id="frame" allow="fullscreen"> You need an iFrame capable browser to view this. </iframe> </div> </div></div> <div class="pure-u-1 pure-u-md-2-5"> <div class="l-box"> <?php echo da_mdlist(); ?> </div> </div> <?php }
これで今回開発したプラグインは一様完成とする。
テーマはこのプラグイン用に作成したものを標準としているが、WordPress標準テーマTwnty Twentyの子テーマを作成したのでダウンロードして利用ください。