OpenSeadragon
- HTML5 APIs
- UI ライブラリ
- テスト支援
- ドキュメント
- コード品質ツール
- バリデータ
- キー入力支援
- テストダブル
- ハイブリッドアプリケーション
- 継続的インテグレーション
OpenSeadragon
OpenSeadragon について調査したことをまとめたページです。
- 調査時期
- 2013 年 12 月
- 調査対象
- OpenSeadragon 1.0.0
OpenSeadragon 概要
| 公式サイト | http://openseadragon.github.io/ |
|---|---|
| ライセンス | New BSD |
| 開発元 | OpenSeadragon contributors |
OpenSeadragon は画像の拡大縮小を Web 上でスムーズに行うための JavaScript のライブラリです。
OpenSeadragon は Silverlight の DeepZoom 機能 に相当するものを JavaScript で実装したもので
DeepZoom で利用される DZI 形式 のファイルをそのまま扱うことができます。DZI 形式以外にも IIIF 形式や TMS 形式などのファイルを扱うことができます。
参考リンク集
サンプルコード
OpenSeadragon をつかったページのサンプルコードを以下に載せておきます。
以下の HTML が '/index.html' にあり OpenSeadragon が '/lib/openseadragon-1.0.0'、DZI形式のファイルが '/dzi' にあるというディレクトリ構造になります。
DZI 形式のファイルを作る方法は OpenSeadragon 用の画像フォーマットを作成するためのツール群 を参考にしてください。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>OpenSeadragon Sample</title>
</head>
<body>
<div id="deepZoom" style="background-color: black;"></div>
<script src="lib/openseadragon-1.0.0/openseadragon.min.js"></script>
<script>
var viewer = OpenSeadragon({
// div 要素の id を指定
id: 'deepZoom',
// OpenSeadragon の images のパスを指定
prefixUrl: 'lib/openseadragon-1.0.0/images/',
// DZI の xml ファイルのパスを指定
tileSources: 'dzi/dzc_output.xml'
});
viewer.setFullPage(true);
</script>
</body>
</html>
OpenSeadragon 関数に渡すことができるオプションについては ここ を参照してください。
スマートデバイス上で OpenSeadragon を動かす際の問題
スマートデバイス上での利用を想定して OpenSeadragon を調査する中で見つけた問題を以下にまとめます。
ピンチの反応が悪い問題
OpenSeadragon を利用したページをスマートデバイスで閲覧したときに、
ピンチ操作で拡大縮小をしようとすると、操作に対する反応がにぶい（と感じる人が続出する）という問題がありました。
これに対して OpenSeadragon 1.0.0 の openseadragon.js の 3867-3868 行目には以下のようなコードがあります。
if ( Math.abs( THIS[ tracker.hash ].lastPinchDelta - pinchDelta ) > 75 ) {
コメントにもあるように 75 という値がピンチ判定の閾値として直接コードに記述されており、
試しにここの値を 25 と小さくしてみたところ、ピンチの動きがとてもスムーズになりました。
そのため、開発が進んでこの値が設定できるようになることで、将来的にはこの問題は解決する見込みです。
一部の Android の標準ブラウザでメモリリークする問題
OpenSeadragon を利用したページを Android 4.1.1 & Galaxy Nexus 上の標準ブラウザで閲覧した際に、
ページを何度もリロードしていると画像が一部表示できなくなる問題があります。
なぜこういった現象が起こるかを調べたところ、Android 標準ブラウザの canvas 利用時のメモリリーク が原因だとわかりました。
canvas を利用することによる問題となりますので、メモリリークが発生する環境では useCanvas オプションを false とすることでこの問題を回避することができます。
ただし useCanvas オプションに false を指定すると、以下のようなデメリットがあります。
- OpenSeadragon の debug モードを利用できなくなる
- canvas を利用していたときと比較してピンチで大きく拡大したいときや、拡大からすぐに縮小に移るときにスムーズに動作しないことがある