Hatena::ブログ(Diary)

piglovesyouの日記 このページをアンテナに追加 RSSフィード

たかむらのライフログ。Javascript、Wordpress、映画・本です。

2011.01.23

flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです

f:id:piglovesyou:20110123203403p:image:right

iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください!

公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。

デモページ

がありますので、見てみてください。

no title

※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。

実装のしかた

説明ページを見てみてください。

no title

基本的にはこんな風に実装する方式です。

  1. いくつかのルールにそってHTMLをコーディング
  2. $(要素).flickGal() で実装

参考にした記事、工夫した点

iPhoneのtouchEventなどに関して

nogunoguさんの記事を大変参考にさせていただきました。この記事をきっかけに、作ることができました。ありがとうございます。

描画の問題

no titleで解決しました。大変感謝です。

こちらの方が記事で仰るように、iPhoneで要素をスムーズに動かすときは、scrollLeftや、{position:absolute; left:0px} ではだめでした。カクカクするし、画像の描画に遅延や荒れが見られました。この問題は、下記のCSS3をインラインで指定して解決できました。

-webkit-transform : translate3d(0,0,0)
リンクをつける

フリック要素内にリンクがつけられない問題がありました。どのタイミングで、e.preventDefault()をすれば良いのか、分からなかったからです。

でも、ふと'touchmove'のタイミングですればいいじゃんということに気がつき、やってみるとうまく行きました。

---

追記 2011/02/03

オプション「lockScroll」を追加しました。piyoriさん、フィードバックをいただきありがとうございました。

「PCでは確認できません」に変更しました。1.0.0からなにかがおかしくなった。

---

追記 2011/09/02

たまにブクマもらうので、そろそろアンドロイド対応&リファクタリングするぞ

---

追記 2011/10/13

はてぶで紹介してもらった。

Android で動いているのかが割と気になる。 → 聞いたら友達が「多分動いてるんじゃん」とのことです

---

追記 2012/06/20

さっき、「端っこに重み(v1.2.1)」を追加してみました。このライブラリのアップデートは地味です。

---

追記 2013/05/23

githubプロジェクトに、exampleフォルダを追加しました。

piyoripiyori 2011/02/03 14:08 こんにちは。
すごくフリック感の良いプラグインですね。端の跳ね返りもあるし。
ただフリック要素のあるところでは、縦スクロールが効かなくなってしまって…。
これはどこかのソースをいじって直すことが可能なのでしょうか?

piglovesyoupiglovesyou 2011/02/03 17:09 piyoriさん 使っていただいて、ありがとうございます。
はい、確かに「スライドスタイル」を画面いっぱいに表示してしまうと、そこから移動できなくなってしまうんですよね。
次回の改修で、こんなふうにしてみようかなと思います。

▼スクロールについてのオプションを設定可能にする。
$().flickGal({ lockScroll: true }); //←デフォルト

・ true ・・・ フリック中は縦スクロールをロック。平行にフリックできるメリット。
・ false ・・・ フリック中も縦スクロール化に。※リンクが使えなくなるデメリット。

piyoripiyori 2011/02/03 18:09 素早いお返事ありがとうございます。
改修版を心待ちにしております!

piyoripiyori 2011/02/04 12:08 改修版試してみました。
自分が思っていたとおりの動きで感動です!
こんなに早く実装してもらえるとは思っていませんでした。
本当にありがとうございます!

HouserHouser 2011/09/12 16:37 突然のコメント失礼します。
先日、flickGalのデモを拝見しまして、本日再度、ソースを拝見させていただこうと思いましたが
ドメインの期日が切れているせいか、ページを閲覧することができません。

お手数ではございますが、Yahooトップみたいなflickgalのソースと
その際に仕様していました画像を貰うことはできませんでしょうか?(>_<)

piglovesyoupiglovesyou 2011/09/13 14:07 せっかく来ていただいたのにすみません。サイト復活しました。
http://stakam.net/jquery/flickgal/demo.html
ソースはgithubのをご覧ください。Yahooの画像は、同じデザインを僕が配布するのははばかられます。
https://github.com/piglovesyou/flickgal

HouserHouser 2011/09/14 14:08 ご対応ありがとうございます^^参考にさせていただきます♪

yuuriyuuri 2011/10/26 09:09 これはいいですね!
ただAndroidで見るとたまにフリックしない時がありますね…。
一度端末を横にしてから縦に戻すと動きます…。

piglovesyoupiglovesyou 2011/10/26 15:05 フィードバック大変助かります。ちょっと考えますね。

eggmaneggman 2011/11/03 14:14 はじめまして。
iPhoneのサイトを作るのに、こちらを参考にさせていただきました。
ありがとうございます。
ほぼ、実装出来たのですが、.navのインジケーターだけが
どうしても出来ません・・・
どのように、cssを書けばよろしいのでしょうか?
インジケーターが出来れば、実装終了です。
どうか、よろしくお願いします。

piglovesyoupiglovesyou 2011/11/04 23:55 使っていただいて、ありがとうございます。
css ということは、デザイン面のお話でしょうか? http://stakam.net/jquery/flickgal/ の「実装手順1」の例ですと、 .nav li {display: inline} とでもしますと、aタグが横並びになるかと思います。
できなければ教えてください。

eggmaneggman 2011/11/05 00:39 piglovesyouさん
ご返信ありがとうございます。
こちらこそ、使わせていただいて
ありがとうございます。
こちらの、説明不足で申し訳ないですが、
.nav liは、横並びには出来ています。
インジケーターが、アクティブに動きません。
.nav li a{color:#ccc}
.nav li a:active{color:#000;}
これでは、無理でした。
何をしなければいいのか、全くわかりません。
フリックは、超〜快適に動いています。
NextやPrevも、バッチリ動いています。
インジケーターだけが、動いてくれません。
夜分、遅くになりましたが、
また、お時間があれば
返信よろしくお願いします。

piglovesyoupiglovesyou 2011/11/05 10:12 選択中のli 要素に、selected というクラスを付けています。ですので、.nav li.selected a {color:#000} としますと、選択中のインジケーターのテキスト色だけが #000 になると思います。お試しください。

eggmaneggman 2011/11/05 10:35 piglovesyouさん、おはようございます。
ご返信、ありがとうございます。
早速、cssを書き換えたら、動きました!完璧に実装することが出来ました。
本当に、本当に、ありがとうございました!!!
早く返信いただいて、大変ありがたいです。
また今後も利用させてもらいますので、よろしくお願いします。
本当に、ありがとうございました。

tunntunntunntunn 2012/01/03 22:45 こんにちわ。とてもよいプラグインで助かります。
ありがとうございます。
andoroidをでdemoを見ました。
"yahooトップみたいなもの"を実装しようかと考えています。

横にした場合の挙動について、改善をお願いします。
スクロールも問題なく、使用は可能ですが、
アイコンの表示が1回目スクロールと2回目スクロールで一部のアイコンが被って表示されています。

恐らくですが、横にした場合、端末のwidthの取得をしなおしたら正しく動くのではないかと思うですが。

お手数ですが、ご確認よろしくお願いします。

piglovesyoupiglovesyou 2012/01/04 09:32 使っていただきありがとうございます。具体的なフィードバックも大変助かります。
少し書き換えてみました。
http://stakam.net/jquery/flickgal/demo
もしお時間がありましたら、上記のバージョン(1.1.11)にて動作確認をしていただけませんでしょうか。
私のほうでも、手元にandroid が用意出来次第試してみたいと思います。
動けば、minify バージョンをコミットします。でもだめかも知れません。
恐れ入りますが、宜しくお願い致します。

piglovesyoupiglovesyou 2012/02/15 22:14 少し前に、上記の問題を解決したv1.2 をリリースしました。ご利用ください。
- android でorientation change が呼ばれない問題を修正

snowsmilesnowsmile 2012/05/18 13:10 こんにちは。
初心者にも使いやすいプラグインですね!

初心者の為、ちょっと質問があるのですが・・・
同ページ内で複数表示するのは問題ないのですが、
タブを使って、このプラグインを使うと
うまく動作せず途方に暮れています。。。
これは何が原因だかわかりますか?

JavaScriptに明るくないので、ぜんぜんわからなくて・・・
説明の仕方も下手ですみません。。。

piglovesyoupiglovesyou 2012/05/18 14:54 こんにちは。タブ、とはこういうものですか?http://jqueryui.com/demos/tabs/
タブが複数あり、それぞれのタブに1個以上のflickGalが入っている感じですか?

snowsmilesnowsmile 2012/05/18 15:56 http://jqueryui.com/demos/tabs/
これと同じ感じのタブです!

それぞれのタブに1つずつflickGalを入れたところ
うまく動作しなくなってしまいまして・・・

piglovesyoupiglovesyou 2012/05/18 17:42 「実装はされるが、表示が崩れる」という感じでしょうか?
その場合、「$.flickGal() するとき、HTMLが非表示だから、幅など必要な情報を取得できない」が考えられます。
解決策としては、ロード直後に $.flickGal() を実行せず、「そのタブを始めて表示するとき」に実行することが考えられます。書き方は、タブの実装によります。コードを僕に教えることができますか?

yabumotoyabumoto 2012/06/20 11:51 こんにちは!
いい感じのフリックですね〜。使用させて頂いています。
今度本格的にAndroid4.0のスマホ端末が出ますが、SDKで試したところ思うように動かないようです。(SDK 2.3.3では問題なし)
何かいい手だてはありますでしょうか・・・

piglovesyoupiglovesyou 2012/06/21 21:49 こんにちは。具体的にはどんな現象か、教えていただけますか?SDKを入れているOSも教えてください。

yabumotoyabumoto 2012/06/22 11:29 こんにちは。ありがとうございます。
環境は、Windows XP Service Pack 3 SDKは最新版です。
現象は・・・
・フリックしても数ミリしか動かず、次の画像に移動しない。
・[Prev]、[Next]ボタンは正常に動く。
こんな感じです。

piglovesyoupiglovesyou 2012/06/22 15:01 具体的なご報告ありがとうございます。
Android4.0で動かないのは問題ですね・・・ちょっと時間がかかるかも知れませんが、調べてこちらでまた報告します。

piglovesyoupiglovesyou 2012/06/27 09:21 その現象が再現しました。解決したらまた報告します。https://github.com/piglovesyou/flickGal/issues/1

piglovesyoupiglovesyou 2012/07/08 11:02 実機Android4.0では問題ないようでした。

yabumotoyabumoto 2012/07/10 17:09 こんにちは!検証ありがとうございます。
徐々にAndroid4.0端末が発売されていってますね。
ちなみに動きを確認された端末の機種はなんでしょうか。
お差し支え無ければお教え頂きたいのですが・・・

piglovesyoupiglovesyou 2012/07/10 22:27 HTC One V だったと思います。保証するわけではありません。お手数ですが、必要でしたら直にご確認することをお勧めします。

karmannkarmann 2012/07/13 12:27 こんにちは!
こちら使わせていただきたいのですが、自動再生的なことはできますでしょうか?
擬似的にnextボタンを押して動かそうと思いましたがダメそうだったので。。。
お忙しい中失礼かとは思いますがよろしくお願いいたします。

piglovesyoupiglovesyou 2012/07/13 13:24 ごめんなさい、自動再生はオプションを複雑にしてしまうのでプラグイン側ではサポートしていません。ですが、近いうちに外部からいろいろと操作できるようにする予定です。

ひとまず、こんな風にしてはいかがでしょうか?(未検証)
var gal = $('.yourElement').flickGal({infinitCarousel: true});
setInterval(function(){ $('.next', gal).mousedown(); }, 2000);

piglovesyoupiglovesyou 2012/08/30 12:27 > 外部からいろいろと操作できるように
フリック開始/フリック終了/表示対象が変わった の3つのイベントを発火する機能を追加しました。それぞれ、表示中.item のインデックスを知ることもできます。これにより、中央に表示中の.item のスタイルを変えたり、フリック開始時にギャラリーを画面の中央に移動させたりする機能を実装することができます。お試しください。
https://github.com/piglovesyou/flickGal#advanced-use

aporoaporo 2012/09/23 18:09 こんにちは。
幾つかスワイプ対応のスライダーを試す中で、スワイプ時にも縦スクロールが使えるすばらしいプラグインに出会ったと思い、早速使わせていただきました。
一点気がついたのですが、使用する画面内にselectタグがあるのですが、スマートフォンの場合のみ動作しなくなってしまいました。。
この点なにか心あたりがありましたら教えていただけますでしょうか?
よろしくお願い致します。

piglovesyoupiglovesyou 2012/09/24 14:19 こんにちは。
再現方法の確認なのですが、
- iOS, Android
- flickGalのHTMLとは関係無い場所に、selectタグがあると、正しくフリックできない。
- selectタグを消すと、正しくフリックできる。
こんな感じですか?

aporoaporo 2012/09/24 16:34 piglovesyouさん
すみません、ちょっと伝え方がまずかったようですので整理します。
- iOS, Android
- flickGalのHTMLとは関係無い場所にselectタグがあると、selectが動かなくなる、つまりリストの選択が一切できなくなる(フリックは問題なし)。
大変お手数をおかけしますが、ご確認いただけると幸いです。

piglovesyoupiglovesyou 2012/09/24 17:46 詳細ありがとうございます。追加で確認なのですが、以下は正しいですか?
- (iOSでselectタグにフォーカスすると、下部にスロットのようなUIが出てくるともいますが、)スロット自体が全く出てこなくなる。selectにフォーカスできなくなる。
- そのコードで、$('.xxx').flickGal() を実行しない場合、selectタグは問題無く動く

aporoaporo 2012/09/24 18:41 piglovesyouさん
- (iOSでselectタグにフォーカスすると、下部にスロットのようなUIが出てくるともいますが、)スロット自体が全く出てこなくなる。selectにフォーカスできなくなる。
- そのコードで、$('.xxx').flickGal() を実行しない場合、selectタグは問題無く動く

はい、AndroidもiOSもfocusが当たらずタップに何も反応しなくなり、実行されなければ中身が選択できます。

piglovesyoupiglovesyou 2012/09/24 22:15 ご確認ありがとうございます。調査し、またここでご報告いたしますね。

nyoonnyoon 2012/10/19 20:29 こんにちは。
こちら使わせて頂いています。ありがとうございます。

一点質問なのですが、
lockScrollをfalseに設定した場合にリンクが誤作動を起こすとのことですが、
具体的にはどのような状況でどのような現象が起こるのでしょうか?
(私の方でiPhone4、 iPhone5、 android 2.2の実機で確認した限りではリンクも正常に動いています。)

piglovesyoupiglovesyou 2012/10/22 17:50 nyoonさん、使っていただいてありがとうございます。
改めて見てみたのですが、問題なさそうですね。たぶん、「touchmove したとき、リンク押下がキャンセルしてしまう」ということを言いたかったのだと思います。それは正しい挙動ですね、考えてみたら。

piglovesyoupiglovesyou 2012/10/22 17:59 aporoさん、僕のところで見てみたのですが、ページ内に<select>タグを置いても、<select>とflickGalの両方が正しく動いているようです。なにが影響しているか、今のところ分かりません。
もし原因など分かりましたら、教えていただけますでしょうか。

nyoonnyoon 2012/10/23 18:24 ご確認いただきありがとうございます。助かりました。

dinondinon 2013/05/10 13:18 こんにちは。すみません。。実装の手順が本当に初心者なのでまったくわからず↓↓ちっとも動いてくれません。。。
デモのファイル一式のダウンロードは可能ですか?

piglovesyoupiglovesyou 2013/05/10 15:21 今は無いのですが、あってもいいかなと思っていました。数日中にアップするかも知れません、進展あったら報告いたします。

piglovesyoupiglovesyou 2013/05/24 00:03 dinonさん、example フォルダにデモHTMLを置いてみました。(stakam.net にあるものとは違います。)よろしければご参考になさってください。 https://github.com/piglovesyou/flickGal

takakuratakakura 2013/06/07 21:27 flickGalのHTMLとは関係無い場所にselectタグがあると、selectが動かなくなる、つまりリストの選択が一切できなくなる(フリックは問題なし)という質問がありましたが、おそらく、android2.3.4などで出ているバグではないでしょうか?
私もセレクタが反応しないバグの解決策を探してここにたどり着いたのですが、未解決ということで解決に繋がればと思います。

piglovesyoupiglovesyou 2013/06/11 01:02 takakuraさん、有益な情報ありがとうございます。手元で再現できていないので原因の特定が難しいですが、もし問題が起きる条件などわかりましたらぜひとも教えていただきたいです。

pugbonpugbon 2013/08/11 04:54 こんにちは。まさに探していたプラグインで最高です。
色々試させて頂いております。
ところで、初めからインデックスを指定して、希望の画像からスタートすることは可能でしょうか?
index.html#sea07等で直リンクしても#sea01からとなってしまいます。
中身を理解しておらず、申し訳ありません。
ここだけ解決出来れば非常にありがたいです。
宜しくお願いします。

piglovesyoupiglovesyou 2013/08/14 02:09 使っていただきありがとうございます。
ご指摘の点ですが、今のところハッシュでは結びつけておらず、従って表示開始位置をハッシュでは決められない作りになっております。
変わりと言ってはなんですが、すぐできる処置として、オプションで開始位置を指定できるように直してみました。こちらで代替できそうですか?
最新版(https://raw.github.com/piglovesyou/flickGal/master/jquery.flickgal.min.js)をダウンロードしていただき、
$(...).flickGal({ startIndex: 6 })
などとしてみてください。7番目から始まるはずです。
ハッシュとの連動については実は最初から気になっていたので、時間をみて改良してみたいと思います。

naonao 2013/09/03 16:36 こんにちは。
初心者の私でも使えるものはないかと探しているとこちらのサイトにたどり着きました。→http://develo.org/2012/04/08/1902.html
こちらはpiglovesyouさんのflickGalをもとに作られたものだそうで、
このflick.jsを使ったところ、イメージにリンクを設定すると機能しないのです。
大変恐縮ですが、どうしたらリンク設定が出来るようになるのか、教えていただけないでしょうか。
直接問い合わせしたところ、現在はあまり更新されていないようでご返答いただけないので・・・。

piglovesyoupiglovesyou 2013/09/05 13:01 こんにちは。私のスクリプトを使っても、同じ現象が起きますか?

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

Connection: close