スマートフォンを操作する際、指やペンで画面に触れて画面上を素早く払うようにタッチする操作のことを「フリック」と言います。

スマートフォン上で、このフリック操作を可能とするには、jQueryプラグインを実装する必要があり、実際にいくつものプラグインが存在しています。

今回は、スマートフォン向けのフリック用jQueryプラグインをご紹介していきます。iOSユーザーも、Androidユーザーも、ぜひご覧ください。

オススメのフリック用JSプラグイン

以下より、オススメのスマートフォン向けのフリック用jQueryプラグインについて、一つひとつ紐解いていきます。

ただ、ひと口にフリック操作といっても各プラグインで使い勝手は異なってきます。
対応OSやブラウザが限定されているものもありますし、開発環境や使用する環境などによっても使用できないものもありますので、慎重に選び、使いやすいものを導入しましょう。

1. flipsnap.js

flipsnap.js_1.JPG
http://hokaccha.github.io/js-flipsnap/demo.html

簡単にフリック操作が実現できるプラグインです。
デモページではNext/Backボタンの実装や任意の位置まで移動させるデモなどが紹介されているので、デザインに合わせて色々とカスタマイズすることも可能です。

コンテンツ数が変動する際も、flipsnapを実行する前に動的に対象コンテナの数を取得し、widthを設定させてあげれば動作します。
対応ブラウザは、Safari、Andoroid、IE10＋、Google Chrome、Opera、Firefoxと幅広く、iPhoneには対応していないので注意が必要ですが、Andoroidで安定したフリック操作が行えるのは魅力です。

2. Slider Pro

Slider_Pro_2.JPG
http://bqworks.com/slider-pro/

このプラグインの特徴は、レスポンシブデザインに対応するなど、マルチデバイスに対応している点です。
IEでの動作、フルスクリーンモード、ブレイクポイントの設定が可能な点など、他のプラグインと比較しても柔軟なプラグインだと言えます。

加えて、CSSを調整しなくても、オプションの付け加えだけで最初のスライドの指定や自動再生の設定ができるのもメリットです。
ちなみに、srcにはダミー用の画像を指定し、data-srcに通常用の画像、data-retinaにRetina用の画像を指定することで、Retinaディスプレイの場合とそうでない場合で画像を出し分けることも可能です。

3. jquery.flickslide.js

jquery.flickslide.js_3.JPG
http://blog.kaleido-jp.net/web/%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89/

こちらのプラグインは、フリックだけではなく、自動的に5秒毎にスライドされたり、スワイプによるスライド変更が可能です。
主な機能は下記のとおりです。

・自動的に5秒ごとにスライド
・スワイプによるスライド
・フリックによるスライド
・横向き時に自動的にサイズ補正・センター寄せレイアウト
・ページング的UIの自動生成
・「前へ」「次へ」のボタン自動生成
・ユーザーエージェント判定し、iPhone・Androidでない場合は発動しません。
・CSSのカスタマイズによるデザイン変更

CSSでデザイン変更が可能なので、iPhone、もしくはAndroidであれば動作します。

4. jCarouse

jCarouse_4.JPG
http://kudakurage.hatenadiary.com/entry/20100810/1281403944

iPhone内にプリインストールされているSafariで、カルーセル風のUIを実現するjQueryプラグインになります。
ファイルを読み込んでHTMLを書くだけで作れてしまうのが特徴で、様々なオプションも用意されており、スライドスピードや1回のスライドでスクロールできるアイテムの数の調整などの設定をすることができます。
iPhone、iPadのMobile Safariで動作することを前提としていますが、一応PC版のSafariでも動くようです。ただ、Androidでは、フリックとスワイプ、双方ともに非対応です。

5. jQuery Touchwipe

jQuery_Touchwipe_5.JPG
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

iPhone、iPad、Android用にスワイプでスライドショーを移動できるプラグインで、CSS3ボックスレイアウトで使用できるのが特徴です。
それに加え、スワイプした時のイベントが簡単に取得でき、画像切り替えなど色々と使うことができます。

PCの場合は、アンカーテキストで画像切り替えができ、サイズも1KB程度なのでモバイル端末にも対応できるプラグインです。

6. PhotoSwipe

PhotoSwipe_6.JPG
http://photoswipe.com/

指2本の操作で写真のピンチ・ズームができ、横にスワイプで前後の写真に遷移して、縦にスワイプするとギャラリーを閉じるや、PCではズームボタン、SNSシェア、フルスクリーン機能など、他のプラグインとは異なる要素を持つのがPhotoSwipeです。
キャプションをつけることができ、画像切り替えで拡大縮小を設定する場合は、jpgからgifへと画像をわけることもできるので、転送量を節約することが可能です。

7. flickGal

flickGal_7.JPG
https://github.com/piglovesyou/flickGal

flickGalは、iOSのフリック操作に対応したギャラリーライブラリです。
主にiOS向けですが、SafariやChromeなど、デスクトップ上にあるWebブラウザであっても問題なく利用することが可能です。フリック操作でアニメーションしながら写真が切り替え、prev/nextのリンクでも写真を切り替えられるようになっています。

8. jQuery.flickable

jQuery.flickable_8.JPG
http://www.takaya-com.jp/archives/2015/02/flickable/

今までありそうでなかった縦スクロールができるプラグインです。
ボタンをクリックすることでコンテンツを縦にスクロールすることが可能で、ページ全体やページの一部だけフリックできるなど機能が豊富なところも類似点です。デモページで様々なチャレンジをしてみましたが、デザインに合わせて柔軟に対応できるプラグインです。iPhone、Androidに対応しています。

まとめ

Webサイトの構築・運用案件をまわす担当者たちに、これらのプラグインはぜひ試していただきたいと考えております。

数年前から始まったスマートフォンの普及とともに、急激にレスポンシブデザインのニーズが拡大した昨今。フリック操作も変化しており、今ではパソコン、タブレット、スマートフォンなど、様々なデバイスに対応が求められる時代です。

上記に紹介したプラグインは、こうしたマルチデバイスに対応しているものばかりです。
ブレイクポイントの設定や縦スクロールなど特徴的なプラグインもありますが、中にはiPhoneかAndroidか、また、Safariには対応していないなど、注意し無くてはならない点が多々有ります。
ぜひ、実装前の仕様確認時に必ずチェックしてください。