Googleマップのようにマウスで画像を動かす「SpryMap」
Googleマップライクに画像をマウスでドラッグできるようにする。
[/s2If]
SpryMapはJavaScript/jQuery製のオープンソース・ソフトウェア。Googleマップの操作は色々な場面で応用できる。オンラインで閲覧するチラシでも使えるし、大きな写真で自分の好きな場所を閲覧する時にも使うことができる。
ドラッグして見る場所を変更する
実際のGoogleマップの画像はタイル上になっているため、サーバ側も合わせて複雑な仕組みが必要になる。だが大きな一枚の画像を見せるだけならばSpryMapが使えるだろう。
SpryMapはjQueryを使って巨大な画像をドラッグで移動しつつ閲覧できるソフトウェアだ。ズームイン/ズームアウトのような機能はなく、画像も一枚で済むのが手軽だ。そのため実際の画像も巨大なものでなければならない。
元画像は大きい
デモではゲームの地図を表示しているが、地図に限らず利用できるだろう。オプションもあるが、基本的な利用だけであればさほど難しくなさそうだ。画像をただ表示するだけでなく、このような工夫を凝らすとさらに魅力が増すはずだ。
[s2If !current_user_can(access_s2member_level1)]
MOONGIFTは読者の皆さまのサポートによって運営されています。ぜひプレミアム登録お願いします！月 額500円の他、半年（3,000円）、年間パック（6,000円）もあります。！
[/s2If]
MOONGIFTはこう見る
SpryMapは使い道を挙げればきりがない程、利用できそうだ。単純に考えれば画像を多用するようなサイト（イラスト、ECサイト、アパレル系）などでも効果的な演出が考えられる。ただし一般的なWeb操作とは言えないので、適切な説明を必要とするあろう。
デモ
http://candrews.net/sandbox/spryMap/
[/s2If]
via SpryMap – Google Maps-like Click and Drag Window [WebAppers]
SpryMap | candrews.net