SIGMANIAページのために、超完全自己満足で300dpiの等倍画像の写真を載せることにしました。ダウンロードや静的リンクも冴えないので、Google Map等で使われていて、タイル型のDeep Zoomを使えるZoomifyを使いました。一般的にはLightboxを使うことが普通ですが、広告系等のサイトに利用できると思います。

出所：MSDN – Deep Zoomファイル形式の概要

用意するもの

  • 高解像度データ（SIGMANIAページ用に用意したものでは最大60MBくらいの写真がありました）
  • Zoomify Zoomify ExpressもしくはPro
  • Zoomify embed for WP

手順

1. Zoomify embed for WPをインストール・有効化する

2で作成するZIFファイルのMIMEはimage/ZIFという専用形式なので、Wordpressのデフォルトではメディアにアップロードしようとしても不正な形式だと、弾かれてしまうので、function.phpにメディアへのアップロード対応を追加しなければならないのですが、プラグイン側で対応してくれるので、本当にインストールするだけです。

ちなみに、このプラグイン、404 Errorを吐いて動作しなかったので、ソースファイルまでチェックした所、コーディングミスを見つけたので作者のSanderにここ間違ってるよとメールした所、早速バグフィックスで新しいバージョンをリリースしてくれました。ありがとうSander。

2. Zoomify ExpressやPro付属のZoomify Converterを使って、高解像度ファイルをZIFファイルに変換する

※そんなに高精細じゃなくても良いよという人はZoomify Free版にもZoomify FreeというConverterが付いています。

Zoomify Converter

ZIFファイルはTIFFコンテナを使い、タイル画像やxmlスキーマを1ファイルにまとめたZoomify専用ファイル形式です。OpenSeadragonはDZI形式というxmlスキーマとフォルダに入ったタイルファイルが形式ができるので、Wordpressに静的ファイルをアップロードするという所がとても使いづらいので、メディアで管理できるZoomifyはとても使い勝手がよいです。

3.WordpressにZIFファイルをアップロードして、投稿ページにショートコードを記載する

ショートコードのfileのURLは、メディアにアップロードされた先のURLです。

zoomify file="http://example.com/wp-content/uploads/2017/04/xxxxxxxx.zif" skin="Dark"

4.CSSをカスタマイズして、#zoomifyContainerクラスのCSSをカスタマイズする（オプション）

何もしなくてもデフォルトで動きますが、投稿ページのデザインに合わせて修正した方が良いですね。

#zoomifyContainer {
 margin:0 auto;
 width: 800px;
 height: 600px;
 border: none;
 background-color:#FFFFFF;
 box-shadow: none;
 }

Deep Zoomについて

Deep ZoomをGoogleについで実装することを目指していた、Microsoftが書いたMSDNの解説が分かりやすいので詳細はそちらに。ざっくりと記載すると、単一イメージの高精細イメージをタイル化・分割。拡大して見る前は低解像度の画像。ズームをするとその部分だけ解像度の高いデータを表示するものです。MicrosoftはDeep ZoomをSilverlightで推し進めていたので、HTML5/CSS3が標準になってしまったので撤退。現在、まだメンテナンスされている所は、Microsoftを引き継いだ、Openseadragonと、商用のZoomifyくらいしか見当たりませんでした。後、使い方が本来とは違いますがGoogle Map APIを使っても同じような事ができるようです。

よもやまばなし

今のモバイルの時代で、Googleが言うところのAMP（Accelarated Mobile Page）対応と真逆の方向性です。そもそも、高解像度データを高精細で見せたいというニーズがニッチなのかもしれませんが。

調べてみたところ、digitalNagasakiさんが書かれていた、Web用の画像ビューワを探してが、どのソフトを採用するのかという点で参考になりました。そういえば、国立情報学研究所の高野先生に連想検索での書籍のデジタル化の話を伺った時にデジタル・アーカイブの話もでていたな、と少し懐かしく。そもそも、等倍で高精細に見たいという人自体、写真関係者かデジタル・アーカイブ回りの人かもしれません。

OpenSeadragon Tips Wordpress Zoomify ズーム 等倍