　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ファイルを作成します。

test.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のexample.js

    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フォーマットに書いてある通りに入れました。

test.html

<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でも解決されないまま放置されているものなので、解決できたのはある種のお役立ち情報かもしれません。

参考にさせていただいたサイトたち