ぐるぐる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

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable