ぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。
これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。

SpriteSpin

最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。
jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。
(非minifyのspritespin.js:26.5KB)

<!-- 画像を表示するHTML -->

<div id="spritespin">
</div> 
<!-- JS -->
<script type="text/javascript">

$(function(){$("#spritespin").spritespin(({

width     : 480,
height    : 327,
frames    : 34,
framesX   : 6,
//スプライトシート利用時の列数
behavior  : "drag",
module    : "360",
sense     : -1,
//ドラッグ時の回転方向
source    : "シーケンス画像パスの配列 or スプライトシート画像パス",
animate   : true,
//アニメーションで回転させるか
loop      : true,
//アニメーションをループさせるか
frameWrap : true,
//無限に回転するか
frameStep : 1, 
//アニメーション時のフレーム間隔
frameTime : 60,
//アニメーション時のフレーム更新の時間間隔
enableCanvas : true

//Canvasタグで表示するか否か});});

</script>

特徴

  • 描画方法が3種類用意されている
  • 操作方法が4種類用意されている
  • Canvasが利用できる

様々なOptitonが用意されていますが、この中のmoduleとbehaviorについてご紹介します。

moduleでは「360」「panorama」「gallery」の3つの画像描画方法を用意されています。

  • 「360」は360度回転表示されるモジュール
  • 「panorama」はパノラマ撮影された風景などを表示するのに適したモジュール
  • 「gallery」は画像スライドショーの表示に適したモジュール

Behaviorsでは「Drag」「Hold」「Click」「Swipe」の4つの画像操作方法が用意されています。

  • 「Drag」はドラッグ操作で画像回転などが可能。主に「360」「panorama」表示時に適しています
  • 「Hold」はマウスダウン中(ホールド)に画像回転などが可能
  • 「Click」はクリック操作で画像切替などが可能。「gallery」表示時に適しています
  • 「Swipe」はモバイル端末でのスワイプ操作で画像切替などが可能。「gallery」表示時に適しています

上記のmodule/Behaviorsはカスタマイズが可能で、独自の描画方法や操作方法を作って指定することもできます。詳しくはCustomizationsのページにサンプルが記述されています。その他制御用の関数もいくつか用意されており、動的なオプションの変更やフレーム操作も可能なようです。
公式サンプル

THREESIXTY SLIDER

2番目にご紹介するのは慣性スクロールが可能なプラグインTHREESIXTY SLIDERです。
MIT & GPLライセンスのもとで公開されているプラグインで、明確なバージョン記載は見当たりませんでしたが、jQuery-1.8.3 以降では動作するようです。公式ページには対応ブラウザは各種PC用ブラウザ(IE6以降)のみ明記されてますが、タッチ操作も対応しているようです。
(threesixty.min.js:5.45KB)

<!-- 画像を表示するHTML -->
<section class="container-fluid" id="container"><div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images">
</ol>
</div>
</section> 
<!-- JS -->
<script type="text/javascript">
window.onload = init;function
init(){$('.product1').ThreeSixty({totalFrames: 72,
// フレーム数
endFrame: 72,
// 最終フレーム番号
currentFrame: 1,
// スタート時のフレーム番号
imgList: '.threesixty_images',
// 画像表示場所のセレクタ
progress: '.spinner',
// プログレス表示場所のセレクタ
imagePath:'assets/product1/',
// 画像フォルダパス
filePrefix: 'ipod-',
// ファイルプレフィックス
ext: '.jpg',

// 画像ファイル拡張子

height: 265,
width: 400,
navigation: true,
//previous,
play,
nextのナビゲーション表示有無});}

</script>

特徴

  • 3つの中では最軽量
  • フルスクリーン表示プラグイン同梱

SpriteSpinとの違いはスプライトシートがサポートされていない替わりに、THREESIXTY SLIDERには「threesixty.fullscreen.js」といったフルスクリーン表示用プラグインも同梱されていたり、ウィンドウサイズに応じて画像サイズも変わるレスポンシブル対応設定も可能です。ドラッグ操作で360度ぐるぐる回したいだけ、であればTHREESIXTY SLIDERでよいかも知れませんね。各種Configや関数、サンプルの類はコチラのgithubページに掲載されています。

reel

最後にご紹介するのは3つの中では一番高機能なプラグインreelです。
jQuery-1.6.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。
(jquery.reel-min.js:20.3KB)

<!-- HTMLタグのみで実装する場合 -->

<img src="f1.jpg" 
width="276" 
height="126"
class="reel"id="image"
data-image="
f1-reel.jpg"
data-frames="35"
data-footage="6"> 
<!-- HTML+JS --><img id="image" 
src="f1.jpg" 
width="276" 
height="126" 
/><script>$('#image').reel(
{image:       'f1-reel.jpg',
frames:      35,footage:     6});

</script>

特徴

  • 豊富なオプション
  • 縦・横のマルチスクロールが可能
  • ジャイロスコープ対応

reelはSpriteSpinと同様に、シーケンス(連番)画像とスプライトシート(連番画像を1つにまとめた)画像の双方に対応し、パノラマ表現も可能です。一番の特色だと感じたのは、横方向のスクロールだけでなく縦方向の回転も可能な点です。これにより表示できるアングルが倍増しますが、その分の画像素材を用意するのも大変ですし、ダウンロードする画像容量も増えるので、使い方は慎重に検討したほうがよさそうです。
v1.3の新機能としてジャイロスコープを利用して回転を制御できる機能も追加されたようで、これからの新機能にも期待できそうです。

まとめ

今回は360度ぐるぐる回すためのプラグインを3つご紹介しました。
単純に360度ドラッグ操作でまわすだけなら、軽量なTHREESIXTY SLIDERが良いかなと感じました。どのプラグインを利用するにしても画像素材がメインのコンテンツとなるので、サイズや容量は出来るだけ小さくまとめる必要があります。折角360度コンテンツを用意しても、画像読込に時間が掛かるとユーザはすぐにページから離れてしまうので、気をつけたいところです。

Related Post

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成