ぐるぐる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フォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

Kii Cloud JavaScript SDKを使ってデータを保存するKii Cloud JavaScript SDKを使ってデータを保存する

本記事はKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するの続編です。今回は、データをKii Cloud上に保存する方法についてご紹介します。※ユーザーがログインしていることを前提としています。 オブジェクトのスコープを決める ファイルのアップロード含め、ユーザー以外のデータはすべてKiiObjectを使って操作します。また、Kii Cloud上へのデータ保存には、必ずBucket(以降、バケツと呼びます)が必要です。例えばTODOアプリで自分だけのTODO、グループに共有したいTODO、全体に公開したいTODOの機能を実装する場合、それぞれユーザースコープのバケツ、グループスコープのバケツ、アプリケーションスコープのバケツにオブジェクトを保存します(※準備編でも例に挙げています)。

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var