ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Googleマップが使いやすい要因の一つに、ズームがスムーズに行われるということが挙げられる。現在のズームの状態にあわせて配信する画像の内容を切り替えることで、ユーザにとってもネットワークにとってもスムーズに地図データが配信されている。


Picture 677.png

スムーズな拡大/縮小を実現するFlexコンポーネント

 

その類似技術をFlexで実現するのがこのライブラリだ。

今回紹介するオープンソース・ソフトウェアはOpenZoom、Flex用の多段階ズームコンポーネントだ。

OpenZoomは地図や写真などを分割して予め用意しておくことで、ズームの状態にあわせて適切な解像度の画像を取得してくれる。同様の技術はSilverlightでも実現されており、MultiScaleImageというクラスが提供されている。OpenZoomではそれに対抗して「openzoom:MultiScaleImage」と書いてOpenZoomを利用できるようにしている。


Picture 676.png

地図を使ったサンプルが多数

 

Flexとあって、JavaScript以上にスムーズな操作が実現されている。ダブルクリックでズームしていき、ドラッグでの移動もできる。移動させた後は慣性が残されるのはiPhone/iPod Touchの動作的で良い。

最大/最小のズーム幅を変えられたり、ズーム方式をバウンドするような形にできたりと細かく制御できる。地図に限らず写真を詳細まで拡大してみられるようなど、役立つ場面は多そうだ。

Ajaxでやるのも良いが、ブラウザ間の互換性を考えたりするとFlex(Flash)の方が実装は簡単になることもある。必要に応じて便利な方を選択されたい。

 

via OpenZoom: An Open Source Framework for Multi-Scale Images and Zoomable User Interfaces [ Feedmyapp ]

OpenZoom: An Open Source Framework for Multi-Scale Images and Zoomable User Interfaces (ZUI)

 http://openzoom.org/

open-zoom - Google Code

 http://code.google.com/p/open-zoom/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2