2015/04/15 STAFF BLOG
前回の更新からずいぶん時間が経ってしまいましたが、拡大縮小ソリューションの第２弾のご紹介です。
第２弾はマイクロソフトの提供する「DeepZoom」です。DeepZoom自体は2008年頃に公開された技術で、Silverlight2の機能として実装されました。名称からもわかるようにSilverlightはAdobeのFlashを意識したRIAアプリケーション開発用のフレームワークです。マイクロソフト製ということでVisualStudioとの親和性が非常に高く、おなじみの.NET系言語で開発できるところも大きな強みでした。ところが、その後の時代の流れはSilverlightでもFlashでもなく、汎用的なHtml5へとシフトしていったのは皆さんも御存知のとおりです。
DeepZoomについては、Silverlightから独立してHtml5版がマイクロソフト自身からリリースされています。Html5版は名称が変わりSeadragonAjax※1といいます。現在ではマイクロソフトの公式版はプロジェクトが終了していますが、その後継としてオープンソース版のOpenSeadragonが開発されています※2。
さて、DeepZoomの原理としては前述のGoogleMapsと同じく、ズーム率に応じてタイリングされた画像を動的に読み込む仕掛けです。ただ、元がSiverlightというリッチアプリケーションに由来するので動作は非常にスムーズで、GoogleMapsよりも操作感は滑らかです。またGoogleMapsが地図表示APIという前提があるのに対して、DeepZoomは画像表示のための汎用的な作りになっているので、扱いもシンプルです。以下が作成したサンプルになります（OpenSeadragonでの実装）。
DeepZoomで画像を読み込むには、元画像をタイルに分割する必要がありますが、分割についてはマイクロソフトから公式ツールが出ています。「Deep Zoom Composer」というこのソフトを使うと極めて簡単にタイリングができます。また、複数の画像を並べてひとつのイメージにすることもできますし、分割したイメージをSilverLightアプリケーションとして出力することもできます。
OpenSeadragonはJavaScriptライブラリで仕様が公開されているため、カスタマイズもしやすくなっています。弊社の担当したプロジェクトでは、このライブラリを使用して巨大な図面ファイルを表示し、その図面上に作画できるHtml5アプリケーションを開発しました※3。作画部分にSVGを使用することで、PhotoshopやIllustratorのようなアプリケーションをブラウザ上で実現することができます。
※１ 元々DeepZoomはSeadragon Software社が開発した技術だからです。
※2 OpenSeadragonはGitHubに登録されていて、JavaScript用のパッケージマネージャのbowerからインストールすることもできます。
※3 顧客案件のため画面をお見せすることができませんが、このような技術にご興味のある方は弊社までお問い合わせください。
