Hatena::ブログ(Diary)

makogの日記 RSSフィード Twitter

2011-05-26

[][] iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン

自作のjQueryプラグインjQuery.flickSimpleを公開します。

これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。

フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。

ちなみに、このスクリプトは以下のようなコンセプトで作りました。

  • フリック動作のみを実装する
  • 見た目に関連する部分は、なるべく自由にできるようにする
  • その代わりに、拡張しやすいようにする
    • 内部のパラメータに簡単にアクセスできるようにする
    • コールバック関数を用意する
  • iPhoneAndroidだけでなく、PCのブラウザ上でも動作させたい
  • iPhoneAndroidの縦持ち・横持ちに対応する
  • 子要素の中にアンカーや画像があっても大丈夫
    • Macの場合、画像がドラッグされてしまわないように対処
  • 同ページ内に複数設置できるようにする

指定しただけでは、ナビゲーションやインジケータは表示されませんので、JavaScriptの初心者向けではありませんが、いろいろと機能を加えたい、JavaScriptCSSを自分で組める方には、便利に使っていただけるのではないかと思っています。

つっこみ、添削、機能追加要望など、ありましたらお寄せいただけると、喜ぶと思います。


フリック動作を実現するjQueryプラグイン

上記のモノ以外で、同じようにフリック動作を実現するjQueryプラグインを調べてみました。いくつかは、上記のjQuery.flickSimpleを制作する際の参考にさせていただきました。


追記(2011/08/02)

ダウンロードファイルをgithubに移行しました。


追記(2011/08/20)

「フリック動作を実現するjQueryプラグイン」に「flipsnap.js」を追加してみました。ちゃんと検証してませんが、私が欲しかったものに一番近い気がします。ソースコード読んで勉強させていただきます。


追記(2011/10/09)

縦フリックにも対応しました。詳しくはこちら。


追記(2012/08/09)

Androidでの表示パフォーマンスを向上しました。詳しくはこちら。


追記(2012/08/28)

Android版 Firefox等に対応しました。詳しくはこちら。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

リンク元