jQuery Mobileパーフェクトガイド

jQuery Mobileパーフェクトガイド
吉川徹の「jQuery Mobileパーフェクトガイド」を読了した。と、いつものように書きだしてみたけど、やっぱり違和感がある。
HTML5とか勉強会スタッフの吉川さん([twitter:@yoshikawa_t])が書いた本。ご本人から、インプレスジャパンさん経由で頂いた。


最近、jQuery Mobile(以下、JQMと記載)に関する書籍がたくさん出ている。日本語でこれだけ情報があるのは嬉しいこと。
そんななか、僕の感じた本書の特徴はこんな感じ。

  • フルカラー
  • サンプルをダウンロードできる
  • 基本的なことと、それを一歩超えたカスタマイズ方法が書いてある
  • パフォーマンス / セキュリティについてけっこう書いてある

いくつかピックアップしてみる。

わかりやすさ

JQMではテーマを選べたり、カスタマイズできる。やっぱりカラーだと、わかりやすいし、とっつきやすいと思った。
テーマはこんな感じで、パーツ毎に適用したり、全体に適用したりできる。

あと、ちょっと地味かもしれないけど、紙面のサンプルコードがカラーでシンタックスハイライトされている。これ、けっこう読みやすくていいな、と思った。

サンプル

サンプルはかなり充実していて、しかも以下のページのリンクからダウンロードできちゃう。サンプルをぱらぱら見てみるだけでも、けっこう楽しいかも。

一部のサンプルはサーバ上に置かないと動作しないので注意が必要。まあ、当たり前なんだけど。

ちょっと複雑なサンプルがいろいろある

JQMのパーツに関するサンプルは、自分で作ってもそんなに難しくないと思う。でも、そこからちょっと進んだカスタマイズ方法や、そのサンプルがあるので嬉しい。
例えばこんなサンプル。

カウントバブル(黄色の数字)とか、知らなかった。あと、ちょっと複雑なリストの作り方も載っている。こういうところが、実際に使うときは参考になりそうだと思った。

JavaScriptのイベントの解説が充実している

JavaScriptのイベントに関するサンプルが多いのも嬉しい。フォームとかは公式サイトのドキュメント見ながら適当にやってもなんとかなるんだけど、イベントについてはしっかり読まなきゃいけないし、僕は英語が苦手なので。
本書ではイベントの書き方が、最初から丁寧に解説されている。そしてイベントの一覧や、メソッド、プロパティなどが20ページにわたって記載されている。これ、エンジニアには嬉しいと思う。

パフォーマンスとセキュリティ

パフォーマンス、セキュリティにまで言及しているのが、本書の大きな特徴だと思う。

パフォーマンス

スマートフォンはデバイス自体が貧弱で、ネットワーク回線も不安定なことが多い。通常のサイトよりも、パフォーマンス対策をしっかり行う必要がある。
本書では、パフォーマンス対策として12のtipsが記載されている。例えばこんなものが書いてある。

  • JQMのカスタムビルド
  • ページのキャッシュ
  • JavaScriptの遅延読み込み

こういう情報は調べれば出てくるけど、まとまっていると嬉しい。

セキュリティ

どのフレームワークでもそうだけど、やっぱりセキュリティ問題はついて回る。JQMにもXSS脆弱性があったり、あるいは実装方法に問題があって、脆弱性を作りこんでしまうこともある。
基本的にはクロスドメインの通信を許可しないようにして、危険なリソースを読み込まないようにする。
あと、セキュリティに関する内容の「サンプル9-3-1: ホワイトリストで読み込むページを制限する」で、以下の訂正が出ている。

もうちょっと

もうちょっと記述があると嬉しいなと思ったことをいくつか。

CDNについて

コラムでCDNについて書いてあったけど、どうせならフォールバックとプロトコルの省略について書いてあると親切かなと思った。まあ、知ってる人も多いと思うけど。
例えば Initializr で bootstrap を選択すると、HTMLに以下のようなコードが入っている。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

1行目で http が省略されている。こうすると http でも https でも動く。詳しいことはこちらをどうぞ。

2行目ではjQueryのオブジェクトがあるか確認して、なければ自前のjQueryを突っ込んでいる。万が一、CDNが落ちていてもなんとかなる。

サンプルのライセンス

<追記:2012/10/01>

  • MITライセンスにしていただけました!
  • インデックスページ作っていただけました!

サンプルのダウンロードはこちら。ありがとうございます!

jQuery Mobileパーフェクトガイド

ライセンスが決まっていると、流用したりできて嬉しかったかも。決めるの難しいのはわかっているのですが…。
個人的にはMITライセンスが使いやすいけど、それでもライセンスを含めるのを嫌がる人がいるだろうし、Public Domainにしてまるごとぱくられるのは本来の意図と違うだろうし…。難しいよね。
あと、サンプルがたくさんあるので、全体を通したインデックスページがあると嬉しかったかも。

索引

索引がちょっと残念。例えば changePage($.mobile.changePage) について調べてくても、索引に載っていない。索引の作り方で、本の使いやすさってけっこう変わってくるので。
こういったところは、電子書籍になると解決するよね。

まとめ

表紙に書いてあるとおり「基本からデザインカスタマイズ、パフォマンスアップまで」しっかりと解説されていた。本書一冊で、かなり幅広い領域がカバーできるので、最初の一冊によいと思う。
またJQMは使ったことあるけど、デザインのカスタマイズや、パフォーマンス・チューニングはしたことない、という人も多いと思う(というか、僕がそんな感じ)。そういった人たちは本書でちょっとレベルアップできると思う。

その他

著者の吉川さんのエントリはこちら。

最近、日本jQuery Mobileユーザー会が本格始動したみたい。僕もMLに登録してみた。