少し前にjQueryMobileを使う機会がありました。
前日にドキュメントを少し読んで、まぁなんとかなるだろう…
とか考えていたんですが…
なんとかなりませんでした笑
jQueryMobileはHTMLにdata属性を加えるだけでUIが作れたり、
スライドのアニメーションを変えたり出来ます。
簡単です。
しかし色々と問題がでてきて…苦笑
今後また出くわしそうな問題と解決法を備忘録として書き残しておきます。
今回利用したのはjQuery Mobile 1.0 Betaです。
フッターの広告エリアを常に表示させたい
はじめは属性にfooterを指定して、しかも固定させるのはdata-positionにfixedを指定してあげるだけでいいとか。
楽だなぁ…と思ってました。
実際に書いて実行してみると、スクロールさせている間はフッターが消えてしまいました。
あれ…
なぜこんなことをしているのだろうと調べてみるとスクロールしている間はJsが止まってしまうというか動かないらしいです。
なので、スクロールを監視して、スクロールしている間setTimeOutとかsetIntervalでフッターの位置の変更を行うといったことが出来ないようですね。
その対処法としてjQueryMobileでは、スクロールした瞬間にフッターを見えなくして、
スクロールが止まってから画面の下部の座標をとって、再配置を行っているみたいです。
結論→仕様上無理…
iOS5.0ではfixedが使えるようになるとかならないとか…
一応こちらにあるようにiScrollを使って固定フッター・ヘッダーを実現する方法もありましたが、
今回の作るものとは相性が悪かったので今回は使いませんでした。
外部のページから戻ってきたら何か変…
外部のページからもとのページにもどる→電話番号のリンクをタップ
→何故か画面遷移のアニメーションが起こる
恐らくbaseのurlとかがごにょごにょしてたのかと…
あと自前で書いておいたJsが動かなくなったりしていました。
とりあえず対策として、別ウィンドウで開くようにしました。
ボタン等のUIのデザインを変えたい
ページの生成がこれだけ楽に作れるのだからボタンのカスタマイズも楽なのだろうと思っていたら、
特にサクっと作れるようなものは無く、テンプレート以外のボタンは自分でCSSいじって勝手にカスタマイズしてよっていうことのようですね。
最初UIのボタンを使って、CSSを書き換えてたりしてたのですが、
後々、「結局始めから自分で作ったほうが早かったかも…」と後悔したりしてました…
ページ内リンクさせたい
これもつまづきました。
jQueryMobileは基本的にハッシュをとってdivの中身を切り替えてます。
なのでページ内リンクを設定してもうまく動きません…
とりあえず特定のY座標にスクロールさせる$.mobile.silentScrollというメソッドがあるので、これで対応しました。
使用例
jQueryMobileはまだBeta版ですがスマートフォンに対応したページを作成する際にはなかなか使えるフレームワークだと思います。
Beta版のうちから使いこなせるようになっておいても損はないと思います。
