オバマ夫人にも採用!VR風パノラマ画像をサクッと実装するjQueryプラグイン10

2016/10/21

Thomas Greco

0
いまやiPhoneでも撮れるパノラマ写真。不動産の物件紹介サイトでもパノラマビューを提供するサイトが増えていますね。専用のjQueryプラグインを使えば実装も簡単です。

この記事で紹介するすばらしいjQueryパノラマ画像表示プラグインを取り込めば、Webサイトの画像の360度ビューを訪問者に堪能してもらえます。バーチャルツアー、パノラマビューワー/スクロール、画像のキューブ、エンドレスな写真スライダーなどが使えます。体感してみてください!

次のような関連記事もあります。

1. Threesixtyslider

ThreesixtysliderはjQueryを使った360度画像作成プラグインです。幸い、主要なブラウザー(IE6以上を含む)すべてが対応しており、レスポンシブ対応もバッチリです!

SpriteSpinライブラリーと同様、画像を完全に(360度)回転できます。特に360度ビューがユーザーにとってメリットとなる、eコマースWebサイトでの画像表示に効果的です。

設定としてはheightwidthからplaySpeeddisableSpinまで、満足のいく顧客体験を演出できるオプションが提供されています。

Threesixtyslider Webサイト / デモ

2. Paver

Paverは、パノラマ画像やワイドスクリーン画像をより良くするために作成されました。Paverの作者Terry MunはiPhone 4からiPhone 6にアップグレードして、パノラマ画像をキャプチャーするiPhoneの性能に驚嘆しました。

パノラマ画像に夢中になる一方、MunはiPhoneで表示される画像がゆがんで見えることに不満を感じるようになりました。見栄えがしないなら、パノラマ写真のどこがすごいと言うのでしょう?

画像を確実に正しく表示するため、Paverではデバイス間で互換性のあるアスペクト比の実装に焦点を当て、ワイドスクリーン画像とパノラマ画像が適正にレンダリングされるようにしています。

実際Paverの技術は素晴らしいので、ニュースサイトThe Vergeは、アメリカのファーストレディ ミシェル・オバマ(Michele Obama)氏のワイドスクリーン画像を彼女の主要なソーシャルメディア関連記事で表示する際、このプラグインを採用しました。

Michelle Obama Paver Screenshot

PaverのGitHub / デモ

3. jQuery Spherical Panorama Viewer

jQuery Spherical Panorama Viewは、この記事で紹介する2つのOpen Studio Labsライブラリーのうちの最初のものです。画像の完全な360度ビューを表示できるので、レストランやマンションなどの見栄えを引き立てるのにとても適しています。

使い方はとてもシンプルで、JavaScriptを書く必要さえありません。効果を適用する画像にpanoramaクラスを追加するだけでOKです。大切な点として.panoramaクラスはこのjQuery Spherical Panorama View専用であることに注意してください。

カスタマイズは、必ずimgpanoramaImageなど新規のクラス名を使う必要があります。生成されたビューの数だけでなく、画像のビューカラムのカラム数(各行のビュー数)も指定できます。

jQuery Easy Panorama Webサイト

4. jQuery Virtual Tour

jQuery Virtual Tourは上で紹介したjQuery Spherical Panorama Viewの拡張機能を提供しています。つまり、jQuery Virtual Tourによってさらに進んだインタラクティブなバーチャルツアーが作成できるのです。実現するためには、HTMLの<map><area>タグを使ってページにインタラクティブに座標を追加します。これらのHTML要素によって、JavaScriptが無効なブラウザーにもツアーをレンダリングできます!

実行例を見ると、Googleマップのストリートビューと同様の効果を演出できることが分かります。写真の特定のポイントをクリックするとそのポイントの座標に移動し、クリックしたまさにその位置からビューを表示できるのです。

jQuery Virtual Tour Webサイト / デモ

5. SpriteSpin

SpriteSpinは、画像のディレクトリや作成済みの「sprite-sheet」からアニメーションを作成します。アニメーションが作成されると、flip book(パラパラ絵本)のようにフレームが次々と最後までループします。

SpriteSpinは「360 slider」と同様、あらゆる製品の360度ビューを目指していますが、さらに一歩進めて、ユーザーが反応とアニメーション表示をカスタマイズできるいくつかの追加機能があります。

SpriteSpin Webサイト / デモ

6. Pano

Panoはパノラマ画像作成用の信頼できる分かりやすいライブラリーです。Panoは圧縮されない状態で250行以下のコードベースを提供しているので、埋め込み画像用の極めて軽量なリソースとなっています。コードの量が少ない分機能も少なく、Panoの機能はimgintervalspeedの3つに限られていますが、驚くにはあたりません。

Pano Screenshot

PanoのGitHub / デモ

7. Panorama 360° jQuery

Panorama 360° jQueryプラグインは別のプラグインのフォークとして開発されました。「Panorama 360°」ライブラリーの作者はスクロール効果をもっと良くしたいと考え、画像のスライドが次々とスムーズに動く機能に焦点を当ててこのライブラリーを作成しました。

Webページの「見せ場」だけでなく、下で紹介しているデモのように全体がパノラマだけで構成されているページも簡単に作成できます。

Panorama 360° jQueryのWebサイト / デモ

8. jQuery Image Cube

jQuery image cubeは、この記事で紹介するほかのプラグインと一味違っています。名前から想像できるとおり、このプラグインを使って画像をキューブのような形で表示できます。

さらに良いことに、最小限のコードで簡単にカスタマイズできる十数個のオプションがあります。その中のbeforeRotateafterRotateはどちらもコールバック関数で、開発者に提供しているコントロール例も含まれています。さらにユーザーはキューブの方向、スピード、イージングを変更でき、たくさんのオプションを使って画像キューブの表示方法をとても都合良くカスタマイズできます。

jQuery Image Cube Webサイト / デモ

9. Cyclotron

Cyclotronはパノラマ画像を端から端まで回転表示できることにちなんで名づけられました。Cyclotronを使ってマウスをある方向にクリック&ドラッグすると、その方向に回転する画像が見られます。マウスや指でドラッグするスピードが回転のスピードとなり、最初のドラッグ後、画像は同じスピードを保ちながら最後まで連続して回転します。

Cyclotronには回転の反応を設定するdampingFactorautorotationなどのオプションが搭載されています。詳しくはこちらを参考にしてください。

CyclotronのGitHub / デモ

10. jQuery Simple Panorama Viewer

Simple Panorama ViewerはCyclotronと同様、表示画像をはじめから終わりまで動かせますが、画像が回転し続けるようにはなっていません。

代わりに、ビューワーでプラグインのスクロール速度に従って左右(または上下)にスクロールできます。デフォルトでは700msの速さで左右両方向にスクロールするease-inアニメーションを実行します。ユーザーはanimationTimeeasingオプションにカスタム値を渡して設定を変更できます。このライブラリーのオプションについて、詳細はこちらを参照してください。

jQuery Simple Panorama ViewerのGitHub / デモ

※この記事は、パノラマ画像プラグインの最新状況を反映して2016年9月1日に更新されました。

(原文:10 jQuery Panorama Image Display Plugins

[翻訳:新岡祐佳子/編集:Livit

Thomas Greco

Thomas Greco

ニューヨーク市を拠点として活動するWeb開発者です。MEANスタック技術でのフルスタック開発を専門としています。以前は、グラフィックスデザイナーとして活動していて、デザイナーの経験はWebアプリケーションの構築にいまでも役立っています。質問がある人はTwitterでコンタクトしてください。

Loading...