iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。
これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。
フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。
ちなみに、このスクリプトは以下のようなコンセプトで作りました。
- フリック動作のみを実装する
- 見た目に関連する部分は、なるべく自由にできるようにする
- その代わりに、拡張しやすいようにする
- 内部のパラメータに簡単にアクセスできるようにする
- コールバック関数を用意する
- iPhone、Androidだけでなく、PCのブラウザ上でも動作させたい
- iPhone、Androidの縦持ち・横持ちに対応する
- 子要素の中にアンカーや画像があっても大丈夫
- Macの場合、画像がドラッグされてしまわないように対処
- 同ページ内に複数設置できるようにする
指定しただけでは、ナビゲーションやインジケータは表示されませんので、JavaScriptの初心者向けではありませんが、いろいろと機能を加えたい、JavaScriptやCSSを自分で組める方には、便利に使っていただけるのではないかと思っています。
つっこみ、添削、機能追加要望など、ありましたらお寄せいただけると、喜ぶと思います。
フリック動作を実現するjQueryプラグイン
上記のモノ以外で、同じようにフリック動作を実現するjQueryプラグインを調べてみました。いくつかは、上記のjQuery.flickSimpleを制作する際の参考にさせていただきました。
追記（2011/08/02）
ダウンロードファイルをgithubに移行しました。
追記（2011/08/20）
「フリック動作を実現するjQueryプラグイン」に「flipsnap.js」を追加してみました。ちゃんと検証してませんが、私が欲しかったものに一番近い気がします。ソースコード読んで勉強させていただきます。
