Google Mapなどで使われているDeep Zoom Imageフォーマット（.dziファイル）を作成しようと思ったところ、意外と苦労したので書いておきます。
どれほどの人が私的に（趣味として）Deep Zoom Imageフォーマットを作ろうとしているのか、どれだけ需要があるのかわかりませんが、誰かの役に立てば幸いです。
deepzoom.pyが使えない、request.pyでエラーが出る。
デジタルコレクションを作成する際に便利なビューワーの一つであり、みんなで翻刻などでも採用されているOpenseadragonではCreating Zooming ImagesとしてDZIフォーマットの作成方法が何種類も紹介されています。
私はPythonしか使えない（一番手っ取り早いのがPythonだった）ので、Creating Zooming Imagesにあるdeepzoom.pyから作成しようとしたらハマってしまいました。どうも、request.pyがうまく動いてくれません。
libvipsを使ってDeepZoomフォーマット（DZI）を作成する。
最終的にはlibvipsというライブラリを使って作成することができました。しかしこのライブラリの日本語での解説がないので、少し苦労しました。
インストールにも書いてある通り、インストール方法は（おそらく）MacでもWindowsでもいたって簡単です。私はWindowsユーザーなので、GitHubからファイルをダウンロードして解凍しました。
解凍後はコマンドプロンプトを起動して、解凍したフォルダの中にあるbinフォルダに移動します。binフォルダに移動した後は、以下のコードを打ち込んだら出来上がります。
vips dzsave huge.tif mydz
前者のhuge.tid（jpgでも変換できます）にはdziフォーマットに変換したいファイルを、後者のmydzには出力先のフォルダ名を書きます。
これでhuge.tifと同じディレクトリにdziフォーマットのファイルoutput.dziが、outputフォルダの中にいくつかのフォルダ（中には画像ファイル）とxmlファイルが出力されます。
Openseadragonで表示させる。
ここまで来ても、表示させるための前段階にすぎません。Openseadragonで表示させないと、ここまでの準備の意味もありません。
解説通りに書いてみる。
Openseadragonのインストールは簡単で、Openseadragonからダウンロードして解凍すればおしまいです。こちらにも説明が書いてあります。
同じディレクトリに先程作ったDZIフォーマットのファイルとフォルダの中身一式をコピーします。
同じディレクトリに表示用のHTMLファイルを作成します。
<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="/openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "/openseadragon/images/",
tileSources: "/path/to/my/image.dzi"
});
</script>
Openseadragonでは必ずwidthとheightを設定しないと表示されませんので、注意してください。
「Unbale to open [object Object]: Unable to load TileSource」と表示される
上のHTMLファイルをブラウザで開いてみてください。たぶん何も見えないか、「Unbale to open [object Object]: Unable to load TileSource」と表示されるはずです。（Chromeの場合）以下の手順に従って、ローカルファイルが読める設定にしておきましょう。
- Google Chromeのショートカットを新規作成
- 新規作成したショートカットを右クリック→プロパティを開く
- 「リンク先」のパスのあとに空白を開けて「–allow-file-access-from-files」と入力
私の場合、これでも開くことができませんでした。そこでOpenseadragonのexampleと私のローカルにあるファイルを見比べてみたところ、URLの記載がないことに気づきました。
OpenSeadragon({
id: "example-inline-configuration-for-dzi",
prefixUrl: "/openseadragon/images/",
showNavigator: true,
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
}
});
1行ずつ読んでいくと、参照先が書かれていない点が気になります。そこで、参照先が含まれているImageの箇所をコピペして、自らの環境に合わせてURLの値を入れ、その他はDZIフォーマットに書いてある通りに入れました。
<html>
<head>
<title>テスト</title>
</head>
<body>
<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="openseadragon-bin-4.1.1/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon-bin-4.1.1/images/",
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "mvdz_files/",
Format: "jpeg",
Overlap: "1",
TileSize: "256",
Size: {
Height: "7008",
Width: "4960"
}
}
}
});
</script>
</body>
</html>
すると、表示されました！
この問題はGitHubでも解決されないまま放置されているものなので、解決できたのはある種のお役立ち情報かもしれません。
参考にさせていただいたサイトたち