flickSimpleでフリック！～（１）flickSimpleとは

最近 WebView を利用したスマートフォンアプリを
作成する機会がありました。

私は Html/JavaScript の実装を担当しましたが、
フリックを実現するのって結構手間がかかるんですね！

ということで、苦労したフリックの実装、
せっかくなので皆さんと技術共有したいと思います。

■この記事の対象者■

下記を満たす方

• jQuery を触ってみたことがある
• html を書いてみたことがある
• cssでの「#hoge」や「.hoge」といった
  書き方が何を意味しているか分かる

■目次■

(1)flickSimple とは
(2)実装：flickSimple の基本
(3)実装：Android でスクロールさせてみる

※flickSimpleでは問題が発生したので、flipsnapを利用しました。
上記ではこの問題とflipsnapについて解説します。

(4)実装：ある程度フリックしないと反応しないようにする
(5)実装：循環させてみる


目次の各章ごとに１つの記事を書こうと思います。
なお、この記事は「(1)flicksimpleとは」です。

----------


フリックを実現するために、私は「flickSimple」という
jQuery を利用したプラグインにお世話になりました。

flicksimple開発者のブログ

flickSimple はスマートフォン上だけでなく
マウス（PC）でのフリックも実現できます！
なので、開発に超便利♪

また、引数でアニメーションのスピードも調整できます。

flicksimpleのDemo をご覧いただいても分かると思いますが、
横フリックだけでなく縦フリックにも対応し、
カスタマイズをし易いように実装されているので
flickSimple の中身をいじらなくても
自分で追加機能をホイホイ作れちゃいます。

ライセンスは MIT／GPL です。



とまぁ、ここまで flickSimple 便利～ってことを書きましたが、
flickSimple 単独では実現できないこともあります。

私が見つけた限りでは３つありました。

• Android でスクロールができなくなる


• タッチするとフリックがすぐに始まる
  → 感度を調整できない


• 最後のページに行ったら最初のページに
  戻るようにできない（循環できない）

flickSimple の中身をいじらず上記３つを実現するために、
私は下記の方法をとりました。

• Android でスクロールができなくなる
  → iScroll でスクロールを実現


• 感度を調整できない
  → flickSimple の外でカスタマイズ


• 循環できない
  → flicksimple の外でカスタマイズ

上記の実装方法は、これから下記のタイトルで書いていきます。

a →「(3)実装：Android でスクロールさせてみる」

b →「(4)実装：ある程度フリックしないと反応しないようにする」

c →「(5)実装：循環させてみる」

(a)の iScroll はヘッダー・フッターを固定した
スワイプも実現できるプラグインです。

iScrollのページ

「(3)Android でスクロールさせてみる」では
iScroll の使い方も書かせていただきます。


では、今回はここまで！