DeepZoomフォーマット（DZI）を無料で作りOpenseadragonで表示させる

　Google Mapなどで使われているDeep Zoom Imageフォーマット（.dziファイル）を作成しようと思ったところ、意外と苦労したので書いておきます。

　どれほどの人が私的に（趣味として）Deep Zoom Imageフォーマットを作ろうとしているのか、どれだけ需要があるのかわかりませんが、誰かの役に立てば幸いです。

# deepzoom.pyが使えない、request.pyでエラーが出る。

　デジタルコレクションを作成する際に便利なビューワーの一つであり、[みんなで翻刻](https://honkoku.org/)などでも採用されている[Openseadragon](https://openseadragon.github.io/)では[Creating Zooming Images](https://openseadragon.github.io/examples/creating-zooming-images/)としてDZIフォーマットの作成方法が何種類も紹介されています。

　私はPythonしか使えない（一番手っ取り早いのがPythonだった）ので、[Creating Zooming Images](https://openseadragon.github.io/examples/creating-zooming-images/)にある[deepzoom.py](https://github.com/openzoom/deepzoom.py)から作成しようとしたらハマってしまいました。どうも、request.pyがうまく動いてくれません。

# libvipsを使ってDeepZoomフォーマット（DZI）を作成する。

　最終的には[libvips](https://www.libvips.org/)というライブラリを使って作成することができました。しかしこのライブラリの日本語での解説がないので、少し苦労しました。

　[インストール](https://www.libvips.org/install.html)にも書いてある通り、インストール方法は（おそらく）MacでもWindowsでもいたって簡単です。私はWindowsユーザーなので、[GitHub](https://github.com/libvips/libvips/releases)からファイルをダウンロードして解凍しました。

　解凍後はコマンドプロンプトを起動して、解凍したフォルダの中にあるbinフォルダに移動します。binフォルダに移動した後は、以下のコードを打ち込んだら出来上がります。

```
vips dzsave huge.tif mydz
```

前者のhuge.tid（jpgでも変換できます）にはdziフォーマットに変換したいファイルを、後者のmydzには出力先のフォルダ名を書きます。

　これでhuge.tifと同じディレクトリにdziフォーマットのファイルoutput.dziが、outputフォルダの中にいくつかのフォルダ（中には画像ファイル）とxmlファイルが出力されます。

# Openseadragonで表示させる。

　ここまで来ても、表示させるための前段階にすぎません。Openseadragonで表示させないと、ここまでの準備の意味もありません。

## 解説通りに書いてみる。

　Openseadragonのインストールは簡単で、[Openseadragon](https://openseadragon.github.io/)からダウンロードして解凍すればおしまいです。[こちら](https://openseadragon.github.io/docs/)にも説明が書いてあります。

　同じディレクトリに先程作った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](https://openseadragon.github.io/examples/tilesource-dzi/)と私のローカルにあるファイルを見比べてみたところ、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](https://github.com/openseadragon/openseadragon/issues/1924)でも解決されないまま放置されているものなので、解決できたのはある種のお役立ち情報かもしれません。

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

https://tenderfeel.xsrv.jp/javascript/5746/

https://mag.switch-science.com/2021/08/11/m5stack-core2-image/

https://qiita.com/yusukeasari/items/0eec43bafc09eaf97380

https://www.libvips.org/API/current/Making-image-pyramids.html

https://www.keyton-co.jp/blog/pc/windows/445/