スマートフォン開発で注目されている「jQuery mobile」
ソーシャルゲームでは開発プロセスに取り入れられていたり、注目度が高いのですが。
jQuery mobileの開発バージョンは、今週6/20 Mon にbeta1リリースが発表されたばかりで、
ようやく仕様Fixという状況です。
自分もあるサイト開発でAlpha4からBeta1へ移行を実施したので、
注意点等、備忘録として下記します。
- jQuery mobile 1.0.a4.1から 1.0.b1へのアップデート注意点
- デフォルトでスマートフォン表示に最適化されない
- ajax遷移のフラグがalpha版の仕様から変更
- backボタン
- cssの変更
- clickイベント
jQuery mobileのフレームワーク内でjsのclickイベントをバインドするようになったので、サイト側でclickイベントのバインドを利用している場合、alpha版と動作が異なる場合があるらしいです。 - その他、機能改善
- XSS脆弱性のセキュリティアップデート
以下のmetaタグを加えると解決（alpha版まではjsで生成されていたらしい）
<meta name="viewport" content="width=device-width, initial-scale=1">
alpha 1.0.a4.1 では、以下２つの変数を無効にすればよかったのですが
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
beta 1 からはajaxEnabledという変数をfalseにする必要があります。
$.mobile.ajaxEnabled=false;
下記のように、mobileinit関数にバインドする事で、ajax遷移（画面遷移時のスライド等）が無効化されます。
$(document).bind("mobileinit",function(){
$.mobile.ajaxEnabled=false;
});
alphaではデフォルトで「back」ボタンが有効でしたが、betaからデフォルトが無効になりました。addBackBtn変数を"true"にする事で、デフォルトでbackボタンが表示されるようになります。
$(document).bind("mobileinit",function(){
addBackBtn=true;
});
cssの構造も若干変更されているので、cssグラデーション等でカスタマイズしているサイトも影響があるようです。
・ブラウザのアドレスバーが自動的に隠れるようになった
・画面遷移のajaxアニメーションがかなり改善された
githubで指摘されていたXSS脆弱性がFixされたそうです
https://github.com/jquery/jquery-mobile/pull/1789
この指摘は笑えないので、alpha版を利用しているサイトは早急にBetaへアップデートした方がいいですね・・・
※まとめ
・XSS脆弱性対策としてalphaからBetaへのアップデートは必須
・ajax関連はかなり改善されたが、画面遷移のajaxを使うのはリスク大
・今後のアップデートでajaxやレンダリングの安定が見込めるので、Betaリリースを機会に手を出してみるといいかもしれない
※出典：
解決策など、こちらのブログが参考になりました
「jquery mobile beta1でハマった点まとめ」
