Hatena::ブログ(Diary)

makogの日記 RSSフィード

2012-08-27

[][] jQuery.flickSimple.js AndroidFirefox等に対応しました。


スマートフォン対応、気をつけたいトラブル

何気なく見ていたのですが、このスライドでも jQuery.flickSimple が紹介されていることを知りました。

FirefoxOperaでも動く方が望ましい

確かにそうですね。これまでの jQuery.flickSImple.jsFirefoxで動作していなかったようです。という訳で、また jQuery.flickSimple.js に手を加えましたので、お知らせします。

これまで、Webkitブラウザ以外は眼中に無かった(=jQuery.animate()でアニメーションするようにしていた)ので、ベンダープリフィックス「-webkit-」のCSSしか指定していませんでしたが、「-moz-」や「-o-」「-ms-」といったベンダープリフィックスに対応するように更新してみました。前回の「Androidでの表示パフォーマンスを向上」した件とあわせて、また少し使いやすくなったのではないかと思っております。

一部のブラウザではまだ動作確認ができていませんので、何か不具合があればお知らせいただけるとありがたいです。

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等に対応しました。詳しくはこちら。