ブログトップ 記事一覧 ログイン 無料ブログ開設

へっぽこプログラマーの日記 RSSフィード Twitter

2012-08-27

「jQuery Mobileパーフェクトガイド」を執筆しました

| 14:40 |

ずいぶん前から書いていたのですが、ようやく出版にこぎ着けました。

時間が掛かった分、それなりに良いものができたと思います。なんと全ページフルカラーです。


以降は、なんとなく自分で解説。


本書は、jQuery Mobileの基本から解説し、次のステップとしてデザインのカスタマイズについてさらに詳細に解説しています。デフォルトのデザインのままのjQuery Mobileを使いたくないという方は、是非手にとって見てみてください。


どちらかというと、スマートフォンサイト制作寄りの内容になっていますが、JavaScriptによる設定変更やイベントなども網羅しています。また、JavaScriptが良くわからないという方のためにも、サンプルコードは、そのままでも実践で使える利用頻度の高いものを選んだつもりです。その他にも、パフォーマンスチューニングやjQuery Mobileを取り巻くいろいろなプラグインやプロダクト、参考情報などをできる限り詰め込みました。jQuery Mobileのプラグインの開発方法まで解説しています。なので、これ1冊でjQuery Mobileのことはだいたい網羅できると思います。


本書のサンプルファイルは、インプレスジャパンの書籍ページから「ダウンロードとアフターケア」からダウンロードできます。サンプルファイルだけでも役に立つと思いますので、「本買うほどじゃねーよ」という人も良かったらどうぞ。


http://www.impressjapan.jp/books/3266


どうやら、まだセキュリティの脆弱性のある1.0bをそのまま使っているところもある様子。これを機に(?)是非バージョンアップしてください!

1.1.1を使っている方も別の問題があるので、ご注意。


jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したビルドを作りました


[2012/08/28追記]

本書のサンプルコード「ホワイトリストで読み込むページを制限する」 (p.304)にて、URLを相対パスで指定する際にチェックを抜ける問題があったので訂正しました。アフターケアにも記載しています。(id:malaさんに問題をご報告頂きました。ありがとうございます!)

(正)サンプル9-3-1: ホワイトリストで読み込むページを制限する

var a = document.createElement('a');
function getPathname(url) {
  a.href = url;
  return a.pathname;
}
$(document).on('pagebeforeload', function(e, data){
  // ホワイトリスト
  var urls = [
    '\/app1\/.*',
    '\/app2\/.*'
  ];
  
  var pathname = getPathname(data.url),
      isValid = false;

  // ホワイトリストと比較
  for ( var i = 0, len = urls.length; i < len; i++ ) {
    var reg = new RegExp('^' + urls[i] + '$', 'i');
    if ( pathname.match(reg) ) {
      isValid = true;
      break;
    }
  }

  if ( !isValid ) {
    console.log('denied', data.url);
    e.preventDefault();
    data.deferred.reject(data.absUrl, data.options);
  }
});