弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

高速 LAN で可能となる教育用 Web サイトの開発に関する研究
高速 LAN～高解像度生物標本画像アーカイブの制作～で可能となる教育用 Web サイトの開発に関する研究～高解像度生物標本画像アーカイブの制作～

畠山 幸紀（農学生命科学部分子生命科学科）
畠山 幸紀 (農学生命科学部分子生命科学科)
hatakeya@cc.hirosaki-u.ac.jp
hatakeya@cc.hirosaki-u.ac.jp

１．はじめに１．はじめにMicrosoft 社の Silverlight は動画・音声・アニメーションの再生プラットフォームであるだけ

Microsoft 社の Silverlight は動画・音声・アニメーションの再生プラットフォームであるだけでなく、RIA：Richでなく、RIA：Rich Internet Applications の実行プラットフォームである。（1,2）クロスプラット

Internet Applications の実行プラットフォームである。（1,2） クロスプラットフォーム(Win、Mac、Linux)対応、（LinuxMac、Linux）対応、（Linuxは Moonlightという名称）で、主要なブラウザ（IE,はフォーム（Win、Moonlight という名称）で、主要なブラウザ（IE,Firefox,Safari など）に対応している。再生用に
Web ブラウザ

Firefox, Safari など）に対応している。再生用に
Web ブラウザ用プラグインが無償で配布されて（3）用プラグインが無償で配布されており、2011年 12 月末の時点で普及率（インストール率）は約７５％である。
（3）

おり、201112 月末の時点で普及率（インストール率）は約75％である。 その Silverlight
そのSilverlight 年に標準に対応しているのが、DeepZoom という高解像度の画像をインタラクティブ（対話的）にに標準に対応しているのが、DeepZoomという高解像度の画像をインタラクティブ（対話的）表示することのできる機能である。DeepZoom
は Microsoft社が開発した画像表示プログラムで、シームレス（つに表示することのできる機能である。Deep Zoom は Microsoft 社が開発した画像表示プログラム
なぎ目のない連続した）拡大・縮小表示、複数画像を結合し３６０度のパノラマとして表示する機能などが含ま（４）で、シームレス（つなぎ目のない連続した）拡大・縮小表示、複数画像を結合し360 度のパノラれる。
２００８年１０月に発表された Silverlight 2 から標準対応となっている。

（4）

マとして表示する機能などが含まれる。
2008 年 10 月に発表された Silverlight 2 から標準対応
本研究ではこのDeep Zoom の技術を利用して、農学生命科学部動物標本展示室で保管されている標本をとなっている。
撮影した高解像度画像を用い、自由に拡大・縮小表示（ズームイン・ズームアウト）することが可能な教育用
Deep Zoom の技術を利用して、農学生命科学部動物標本展示室で保管されてWeb 本研究ではこのサイトを作製し公開することを目的とした。
いる標本を撮影した高解像度画像を用い、自由に拡大・縮小表示（ズームイン・ズームアウト）することが可能な教育用
Web サイトを作製し公開することを目的とした。
２．DeepZoom の原理
撮影対象物（今回は動物標本）の細部まで表現するためには、高解像度で撮影する必要がある。当然、ファイルサイズは動画ファイル並みに大きくなる。数十MB の静止画像を Web ブラウザ上でダウンロードして表示し２．Deep Zoom の原理
ようとすると、高速回線を使用した場合でも数秒から数分時間がかかり、パソコンの性能によってはスクロールも撮影対象物（今回は動物標本）の細部まで表現するためには、高解像度で撮影する必要があ非常に重く感じる場合がある。
る。当然、ファイルサイズは動画ファイル並みに大きくなる。数十 MB の静止画像を Web ブラ
Deep Zoom は図１．に示し
ウザ上でダウンロードして表たように元の大きな画像を段示しようとすると、高速回線階的に縮小し、さらに 256×を使用した場合でも数秒から256 ピクセルのタイル状に分数分時間がかかり、パソコン割したものから、表示に必要の性能によってはスクロールな部分を再構成することによも非常に重く感じる場合があり、表示させるものである。図る。の左側に示したように例えばDeep Zoom は図 1．に示
2 倍サイズの画像では 4 枚、4したように元の大きな画像を倍では 16 枚の画像ファイル段階的に縮小し、さらに 256から構成されるピラミッド様の× 256 ピ ク セ ル の タ イ ル 状構造となる。ファイル名は画に分割したものから、表示に像の座標を示している。

必要な部分を再構成すること
図１．Deep Zoom の原理 （分割画像のピラミッド構造）－ 47 －により、表示させるものであ弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

る。図の左側に示したように例えば 2 倍サイズの画像では 4 枚、4 倍では 16 枚の画像ファイルから構成されるピラミッド様の構造となる。ファイル名は画像の座標を示している。
３．動物標本画像について
３．動物標本画像について
３．動物標本画像について

2008 年発足した「弘前大学サイエンス・パーク」のひとつとして、農学生命科学部１階に動２００８年発足した「弘前大学サイエンス・パーク」のひとつとして、農学生命科学部１階に動物標本展示室が２００８年発足した「弘前大学サイエンス・パーク」のひとつとして、農学生命科学部１階に動物標本展示室が（5）（５）
物標本展示室が設置され、旧文理学部、理学部、農学部から現在の農学生命科学部に至る時設置され設置され（５）、旧文理学部、理学部、農学部から現在の農学生命科学部に至る時代に収集および作製された、旧文理学部、理学部、農学部から現在の農学生命科学部に至る時代に収集および作製された代に収集および作製された標本が多数保管されており、総合文化祭（大学祭）やオープンキャン
標本が多数保管されており、総合文化祭（大学祭）やオープンキャンパス等で公開され、毎回多数の入場者が標本が多数保管されており、総合文化祭（大学祭）やオープンキャンパス等で公開され、毎回多数の入場者がパス等で公開され、毎回多数の入場者が訪れている。
（図 2・左 .）訪れている。（図２・左.）
訪れている。（図２・左.）図２.動物標本展示室（右：平成２３年度大学祭）および標本撮影のようす（右：平成２２年３月）
図２.動物標本展示室（右：平成２３年度大学祭）および標本撮影のようす（右：平成２２年３月）

収蔵されている標本の中には収蔵されている標本の中には大収蔵されている標本の中には大大正時代に作製されたものや、正時代に作製されたものや、絶滅正時代に作製されたものや、絶滅絶滅危惧種、希少生物など、貴危惧種、希少生物など、貴重な標危惧種、希少生物など、貴重な標本が多数含まれている。今回はこ重な標本が多数含まれている。
本が多数含まれている。今回はこれらの標本を広告写真分野で首都
今回はこれらの標本を広告写真
れらの標本を広告写真分野で首都圏を中心に活躍されているプロカメ
分野で首都圏を中心に活躍され圏を中心に活躍されているプロカメ
ラマンの内田琢麻氏に依頼し撮影ているプロカメラマンの内田琢
ラマンの内田琢麻氏に依頼し撮影した画像を使用している。（図２.右）麻氏に依頼し撮影した画像を使した画像を使用している。（図２.右）
撮影した画像は２００カット以上にも用している。
（図 2. 右）撮影し撮影した画像は２００カット以上にも及ぶが、今回はその中から、バビル及ぶが、今回はその中から、バビルた画像は 200 カット以上にも及サ（インドネシアのスラウェシ島にのサ（インドネシアのスラウェシ島にのぶが、今回はその中から、バビみ生息する希少生物）の頭骨、ウサみ生息する希少生物）の頭骨、ウサルサ（インドネシアのスラウェ

図３.
図３. 使用した画像の解像度とファイルサイズ
使用した画像の解像度とファイルサイズ

ギの解剖標本（ホルマリン標本）、ギの解剖標本（ホルマリン標本）、
シ島にのみ生息する希少生物）およびタヌキとセンザンコウのはく製およびタヌキとセンザンコウのはく製の頭骨、ウサギの解剖標本（ホ標本の４種類の画像（JPEG形式）を使用した。（図３.）
標本の４種類の画像（JPEG形式）を使用した。（図３.）
ルマリン標本）、およびタヌキとセンザンコウのはく製標本の4 種類の画像（JPEG 形式）を使用した。（図 3.）４．作成方法と出力結果
４．作成方法と出力結果
Deep
Deep Zoom
Zoom で使用する分割画像ファイルを作成するには、Microsoftで使用する分割画像ファイルを作成するには、Microsoft 社で配布しているフリーソフトウェア社で配布しているフリーソフトウェア（６）
Deep
Deep Zoom
Zoom Composer
Composer を用いる。
を用いる。（６）図４に
図４に Deep
Deep Zoom
Zoom Composer
Composer の入力画面を示した。インポート画面でソーの入力画面を示した。インポート画面でソース画像ファイルを指定した後、出力先、フォルダ名、出力形式、等を指定し、エクスポートする。
ス画像ファイルを指定した後、出力先、フォルダ名、出力形式、等を指定し、エクスポートする。
－ 48 －

弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

４．作成方法と出力結果
Deep Zoom で使用する分割画像ファイルを作成するには、Microsoft 社で配布しているフリーソフトウェア Deep Zoom Composer を用いる。（6）図 4 に Deep Zoom Composer の入力画面を示した。インポート画面でソース画像ファイルを指定した後、出力先、フォルダ名、出力形式、等を指定し、エクスポートする。

図４．Deep
図４．DeepZoom
ZoomComposer
Composer 入力画面および出力設定
入力画面および出力設定
出力先にはソース画像をコピーしたものや、プレビュー用のファイルなど、いくつかのファイルとフォルダが作
出力先にはソース画像をコピーしたものや、プレビュー用のファイルなど、いくつかのファイ
出力先にはソース画像をコピーしたものや、プレビュー用のファイルなど、いくつかのファイルとフォルダが作られる。その中のdzc_output.xml、Scene.xml、SparseImageScenceGraph.xml
ルとフォルダが作られる。その中のGeneratedImages
フォルダの中に dzc_output.xml、Scene.
られる。その中のGeneratedImages
GeneratedImagesフォルダの中にフォルダの中に
dzc_output.xml、Scene.xml、SparseImageScenceGraph.xmlの３つのフォルダの中に図１で示したような、座の３つのxmlxmlファイルとファイルとdzc_output_files
dzc_output_filesフォルダがあり、dzc_output_files
フォルダがあり、dzc_output_files
フォルダの中に図１で示したような、座xml、SparseImageScenceGraph.xmlの 3 つの xml ファイルと dzc_output_files
フォルダがあり、標を示す連番名が付いた分割画像ファイルが階層ごとにフォルダに保存される。（図５）
標を示す連番名が付いた分割画像ファイルが階層ごとにフォルダに保存される。（図５）dzc_output_files
フォルダの中に図 1 で示したような、座標を示す連番名が付いた分割画像ファ「バビルサ」画像を使用した結果「バビルサ」画像を使用した結果
イルが階層ごとにフォルダ
では、フォルダ０からフォルダ８はでは、フォルダ０からフォルダ８はに保存される。
（図 5）縮小された画像ファイルが１個、フ縮小された画像ファイルが１個、フ「バビルサ」画像を使用しォルダ９で２個、フォルダ１０で６個
ォルダ９で２個、フォルダ１０で６個た結果では、フォルダ0 からの画像ファイルが出力されていた。の画像ファイルが出力されていた。

フォルダ 8 は縮小された画像

フォルダ１３では２９４個のファイル
フォルダ１３では２９４個のファイル
ファイルが1 個、フォルダ 9が保存されている。（図６．図７．）が保存されている。（図６．図７．）で 2 個、フォルダ 10 で 6 個の画像ファイルが出力されていた。フォルダ 13 では 294 個のファイルが保存されている。
（図 6．図 7．
）
図５．dzc_output_files
図５．dzc_output_files フォルダの中身
フォルダの中身－ 49 －

弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

図６．フォルダ１１の中身（２４ファイル）

図７．フォルダ１３の中身（２９４ファイルの一部）
５．Web ページの公開とトラブルシューティング

５．Web ページの公開とトラブルシューティング

次に、これらの画像ファイルを Web ブラウザ上で動作する Web アプリケーションとして使用するには、次に、これらの画像ファイルを Web ブラウザ上で動作する Web アプリケーションとして使用

Windows Expression Web ４というソフトウェアを用いた。Deep Zoom Composer で出力された GeneratedImages

するには、Windows Expression Web 4 というソフトウェアを用いた。Deep Zoom Composer
フォルダの中の dzc_output.xml を指定すると Web ページに Sliver Light オブジェクトとして組み込むことができ

で 出 力 さ れ た GeneratedImages フ ォ ル ダ の 中 の dzc_output.xml を 指 定 す る と Web ペ ー ジ にる。（図８．）

Sliver Light オブジェクトとして組み込むことができる。
（図 8．
）－ 50 －弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

図８．Web ページへの Deep Zoom オブジェクトの組み込み
図８．Web ページへの Deep Zoom オブジェクトの組み込み
このようにして作成したデモ用の Web サイトのファイル構成を図９．に示した。deepzoom フォルダ内にそれぞれこのようにして作成したデモ用の Web サイトのファイル構成を図 9．に示した。deepzoom フォの画像で作成した Deep Zoom オブジェクトが dzc_output フォルダに納められている。

このようにして作成したデモ用の Web サイトのファイル構成を図９．に示した。deepzoom フォルダ内にそれぞれルダ内にそれぞれの画像で作成したDeep Zoom オブジェクトが dzc_output フォルダに納めらの画像で作成した Deep Zoom オブジェクトが dzc_output フォルダに納められている。

れている。

ローカルでは正しく表示される事を確認した後、図９．のフローカルでは正しく表示されローカルでは正しく表示

ァイルとフォルダをすべてWebる事を確認した後、図９．のフ

さ れ る 事 を 確 認 し た 後、サーバに転送して動作確認しァイルとフォルダをすべて Web

図 9．のファイルとフォルたところ、画像が表示されないサーバに転送して動作確認し

ダ を す べ て Web サ ー バ にという不具合が生じた。原因はたところ、画像が表示されない転送して動作確認したとこ

おそらく、画像ファイルへのパという不具合が生じた。原因はろ、画像が表示されないと

図９. デモ用 Web サイトのファイル構成スの記述のミス（バグ）ではな
おそらく、画像ファイルへのパ

図９. デモ用 Web サイトのファイル構成いかと考えた。サーバの管理スの記述のミス（バグ）ではないう不具合が生じた。原因はおそらく、画像ファイル者に問い合わせたところ、ログいかと考えた。サーバの管理へのパスの記述のミス（バの記録から、者に問い合わせたところ、ロググ）ではないかと考えた。
deepzoom/DEMO/deepzoomsの記録から、サーバの管理者に問い合わ/dzc_output/generatedimages
deepzoom/DEMO/deepzooms

せた と こ ろ、 ロ グ の 記 録//dzc_output/generatedimagesのアクセスが不明となってか ら、deepzoom/DEMO/
おり、フォルダ（ディレクトリ名）/ のアクセスが不明となって

deepzooms/dzc_output/
を GeneratedImages に書き換おり、フォルダ（ディレクトリ名）

図１０．deepzoomprojiect.zap の中身

generatedimages/のアクセ
えると正しく表示されるというこを GeneratedImages に書き換

図１０．deepzoomprojiect.zap の中身

スが不明となっており、フォとが分かった。原因はえると正しく表示されるというこルダ（ディレクトリ名）をWindows
Expression Web 4 でとが分かった。原因はGeneratedImages
Deep Ｚｏｏｍ オブジェクトを組み込んだ際、作られるフォルダ名が/generatedimages/のように勝手に、すべてWindows Expression にWeb書4 きで換えると正しく表示されるということが分かった。原因はWindows Expression Web 4 で Deep
Deep Ｚｏｏｍ オブジェクトを組み込んだ際、作られるフォルダ名が/generatedimages/のように勝手に、すべて－ 51 －

弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

Zoom オブジェクトを組み込んだ際、作られるフォルダ名が /generatedimages/ のように勝手に、すべて小文字に変更されるためであった。Silverlight アプリケーションは deepzoomproject.
小文字に変更されるためであった。Silverlight アプリケーションは deepzoomproject.xap というファイルで、そのxapというファイルで、その実体は実行形式のdll ファイルなどをzip 形式で圧縮したものであ小文字に変更されるためであった。Silverlightアプリケーションはdeepzoomproject.xapというファイルで、その実体は実行形式の dll ファイルなどを zip 形式で圧縮したものである。（図１０．）DeepZoomProjiect.dll の内容をる。
（図 10．
）DeepZoomProjiect.dll
Deep Zoom オブジェクトの画像ファイ
実体は実行形式のdll ファイルなどを zipの内容を確認すると形式で圧縮したものである。（図１０．）DeepZoomProjiect.dllの内容を確認すると Deep Zoom オブジェクトの画像ファイルへのパスは大文字を含む/GeneratedImages/と記述されて確認すると Deep Zoom オブジェクトの画像ファイルへのパスは大文字を含む/GeneratedImages/と記述されてルへのパスは大文字を含む/GeneratedImages/ と記述されている事を確認した。
（図 11．
）ローいる事を確認した。（図１１．）ローカルのパソコンとサーバ上で表示が異なったのは、パソコンでは大文字、小いる事を確認した。（図１１．）ローカルのパソコンとサーバ上で表示が異なったのは、パソコンでは大文字、小カルのパソコンとサーバ上で表示が異なったのは、パソコンでは大文字、小文字の識別はしない
文字の識別はしないのに Web サーバでは認識される事に起因する。

文字の識別はしないのにWeb サーバでは認識される事に起因する。のにWeb サーバでは認識される事に起因する。

図１１．DeepZoomProjiect.dll 内の記述
図１１．DeepZoomProjiect.dll 内の記述
Deep Zoom
図図１２．図１３．は今回作成したセンザンコウの12．図 13．は今回作成したセンザンコウのDeep画面である。画面をマウスでクリック、ホイールボタンZoom 画面である。画面をマウスでクリッ
図１２．図１３．は今回作成したセンザンコウのDeep Zoom
画面である。画面をマウスでクリック、ホイールボタンの操作、または画面上の+/-ボタンのクリックする事で自由にズームイン・ズームアウトできる。また、マウスでドラク、ホイールボタンの操作、または画面上の+/- ボタンのクリックする事で自由にズームイン・の操作、または画面上の+/-ボタンのクリックする事で自由にズームイン・ズームアウトできる。また、マウスでドラッグすることで目的の場所に移動できる。
ズームアウトできる。また、マウスでドラッグすることで目的の場所に移動できる。
ッグすることで目的の場所に移動できる。

図１２.センザンコウ（縮小画面）
図１２.センザンコウ（縮小画面）－ 52 －

弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

図１３.センザンコウ（拡大表示）
以上のデモ用 Web ページは http://nature.cc.hirosaki-u.ac.jp/lab/2/celltech/specimen/DEEPZOOM/
で見ることができる。
以 上 の デ モ 用 Web ペ ー ジ は http://nature.cc.hirosaki-u.ac.jp/lab/2/celltech/specimen/

DEEPZOOM/ で見ることができる。
６．結語
Silverlight の Deep Zoom 技術を使って、高解像度の画像を効率よく表示することができた。この技術のメリット
６．結語の一つは、画像の著作権保護にもつながる点である。大きな画像をそのまま表示するのではなく、サーバ上にSilverlight の Deep Zoom 技術を使って、高解像度の画像を効率よく表示することができた。
は縮小されたファイルまたは分割ファイルで存在するため、高解像度の画像ファイルを直接ダウンロードできな
この技術のメリットの一つは、画像の著作権保護にもつながる点である。大きな画像をそのままいためである。
表示するのではなく、サーバ上には縮小されたファイルまたは分割ファイルで存在するため、高今後、「農学生命科学部生物標本展」のホームページ上で、その他の標本画像も公開する予定である。
解像度の画像ファイルを直接ダウンロードできないためである。

今後、「農学生命科学部生物標本展」のホームページ上で、その他の標本画像も公開する予定
７．謝辞
である。
技術的な問題の対応と助言をいただいたネットワンシステムズ（株）の小川忠之氏と本学総合情報処理センター の小倉広実氏に感謝します。本研究の内容は、２０１１年７月３０日に開催された日本動物学会・東北支部
７．謝辞
大会に於いても発表した。

技術的な問題の対応と助言をいただいたネットワンシステムズ（株）の小川忠之氏と本学総合情報処理センターの小倉広実氏に感謝します。本研究の内容は、2011 年 7 月 30 日に開催された日本動物学会・東北支部大会に於いても発表した。

－ 53 －弘前大学総合情報処理センター広報 HIROIN No.29, 47-54（2012）

参考文献・参考サイト（1）マイクロソフト : 開発者向け技術情報サイト MSDN
http://msdn.microsoft.com/ja-jp/（2）Silverlight の概要
http://msdn.microsoft.com/ja-jp/library/bb404700%28v=VS.95%29.asp（3）Rich Internet Application Statistics
http://www.riastats.com/#（4）Deep Zoom
http://msdn.microsoft.com/ja-jp/library/cc645050（v=VS.95）.aspx（5）弘前大学広報誌「ひろだい」vol.12, 2009.3. p.3
http://www.hirosaki-u.ac.jp/daigakuannai/hirodai/hirodaivol12.pdf（6）Deep Zoom Composer （Microsoft Download center）
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=24819（7）農学生命科学部生物標本展（動物標本展示室）HP
http://nature.cc.hirosaki-u.ac.jp/lab/2/celltech/specimen/－ 54 －