トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

<< [WP] Ktai Entryで画像つきメール投稿ができなくなる問題 | main | [PhoneGap] ページを表示した時に自動でキーボードを表示するのは不可能? >>
[iOS & Android] ブラウザでフリックメニューとPull to RefreshできるjQueryプラグインの習作


※2012.10.06追記
Android(2.2+で確認)ブラウザでも動作するver0.0.2をアップしましたー

※2012.11.12追記
ver0.0.3をアップしました。詳細は後述でー。

今までほとんどjQueryPluginを書いたことがなかったのですが、スマホのWEBでもPathやFacebookのようなフリックしてメニューがシュパッと表示されるインターフェイスや画面を下に引っ張ってリロードするPull to Refreshが作りたいなーと思い、練習がてら書いてみました。

有名なプラグインとしては既にpageslideiScrollなどがありますが、ヘッダを固定すると期待通りの動作にならなかったり、人の書いたコードなのでカスタマイズも難しかったりしたので車輪の再発明&練習ということで。

ダウンロード


現在3種類のバージョンをアップしてます。

ver0.0.1 … overflow-y:scroll & -webkit-overflow-scrolling:touch を使ったもの。
Androidブラウザはサイドメニューは開けるものの、フリックで開いたりPull to Refreshに未対応

ver0.0.2 … コンテンツ部を独自スクロールにしたもの。
Androidブラウザでもフリックメニュー&Pull to Refreshに対応しました。

ver0.0.3 … 色々と試行錯誤してきましたが、ひとまず現在のところの最終版的な。
できるだけスムーズに動くようにコンテンツ部をtransform/transitionでスライドするようにしました。
しかしCSS3アニメーションの弊害としてposition:fixedが効かなくなるので、ヘッダ部の動きは独自に実装しています。



ヘタクソなプラグインですが、使ってみたい方はご自由にどぞー。ライセンスはGPLとしています。
スライドメニューのBG画像やヘッダのボタン画像も作ったものですのでこれもご自由に。



実装する方法は色々なパターンがあるけどどうしよう?


さてさて、iOSのSafariなどでヘッダを固定するようなコンテンツを作成しようとした場合、ヘッダ部をposition:fixedする方法と、コンテンツ部をoverflow-y:scroll & -webkit-overflow-scrolling:touchする方法がありますが、これどちらを採用するか迷いませんか?>WEB制作者の皆様


これ一長一短がありますよねー?


■ヘッダ部をposition:fixedする方法
◯ 画面上部の時刻部分(iOSのステータスバー)をタップするとページトップに戻ることができる
◯ 一応レベルだけどAndroidでもそのまま使える
△ スライドメニューを出した場合、画面スクロールの制御が難しい
△ Pull to Refreshの実装が難しかった

■コンテンツ部をoverflow-y:scroll(-webkit-overflow-scrolling:touch)する方法
× ステータスバー(iOS)をタップしてもページトップに戻れない(※1)
× Android(2.0?)で動かない、見ることができない
◯ スライドメニューを出してもすっきり綺麗に動く
◯ Pull to Refreshモドキが作りやすい

追記2012.10.06
もう一つありました。ver0.0.2は以下の方法で実装してみました。

ヘッダ部をposition:absoluteしてコンテンツ部はtouchmoveイベントを元に独自スクロール
× ブラウザネイティブのスクロールの動きとはちょっと違う
○ ステータスバー(iOS)タップでトップにスクロールが実装可能
○ Pull to Refreshも実装可能
#Gmailのウェブアプリはこんな感じの実装っぽい


自分も色々と迷ったのですが、今回はコンテンツ部をoverflow-y:scrollする方法で実装してみました。
スライドして出てくるメニューもoverflow-y:scrollです。



あとウェブ特有の動きとして、スクロール部分がscrollTop()==0の時に下に引っ張るとbody全体(header分も含めて)下にズルッと下がっちゃうんですよね。これちょっとかっこ悪い。

それを阻止するために、スクロール部分は常にscrollTop(1)を保つようにしてます。
これでbodyやheaderはそのまま、スクロール部分のみ下に下がる。
そしてそのスクロールイベントを取得するとPull to Refresh実現につながります。


(※1)
ステータスバーをタップしてインナースクロール部分をトップに戻す為のギミックとして、
・bodyの高さをwindow.innerHeight+1にする
・常にwindow.scrollTo(0,1)するように
・ステータスバーをタップしてwindowスクロールイベントをトリガー
・window.scrollTop()==0になったらインナースクロール部分をトップまで戻す
・・・というのを考えて試してみたのですが、なんとコンテンツ内に -webkit-overflow-scrolling: touch しているエレメントがあると"ステータスバーのタップでスクロール"が効かなくなるという罠があるらしく、撃沈しました…(´・ω・`) 

まだまだ習作は続きそう…


通常のWEBだと、このくらいのプラグインで事足りそうなのですが、実は個人的に致命的な問題が…。
何故だかこのプラグインをPhoneGapでラップして使うと、よくわからないエラーでアプリが落ちてしまうのです><
多分overflow-yが原因だと思うのですが…Cordovaのバージョンがちょっと古いせいなのかなー。どなたか偉い人教えて頂けると嬉しいです(´・ω・`)

自分としてはPhoneGapでも使うつもりだったので、解決しなければoverflow-yを使わない方法で書きなおそうと思っています…てなわけで続く。



#追記 2012.10.05
overflow-y:scroll、-webkit-overflow-scrolling:touchを使用しないバージョンを作ってPhoneGapで実行してみたのですがステータスバーをタップするとやはり時々アプリが落ちる…
Cordovaのバージョンが怪しくなって来ました。。。むむぅ
PhoneGapをバージョンアップしたら解決しました。

スポンサーサイト


COMMENT









Trackback URL
http://akihiro.jugem.jp/trackback/291
TRACKBACK