「エンジニアの人生=エンジニアライフ」に役立つ本を紹介します。

スマホ案件用の秀逸なドキュメント『jQuery Mobile』

»

jQuery Mobile

Jon Reid(著)、 渡邉真人・白石俊平(監訳)、牧野聡(翻訳)
オライリージャパン
2011年12月
ISBN-10:4873115264
ISBN-13: 978-4873115269
1995円(税込)

■どんどん増える、スマホ対応のお仕事

 「2011年はスマホ元年」と言われたように、スマートフォン市場が急成長を続けています。Webサイトや携帯サイトをスマホ対応させている人は多いでしょう。私もその1人です。

 iPhone、Android、Windows Mobileといった多様な端末それぞれに最適化したページを作成することは簡単ではありません。端末の種類を吸収し、どの端末で見ても同じデザインで見せるフレームワークを用いれば、簡単にスマホ対応ができます。jQuery Mobileは、それを実現させるフレームワークです。

■秀逸なオフライン・ドキュメント

 本書は、jQuery Mobileでできることを網羅的にまとめています。公式Webサイトにあるドキュメント内容はほぼすべて掲載しており、かつソースコードだけでなく、スクリーンショットも豊富なので、オフラインのドキュメントとしておすすめできます。

 私は、今年からフリーランスのプログラマとして仕事をしています。スマホ対応サイトを構築するお仕事をもらったので、早速オフライン・ドキュメントとして本書を手に入れました。

●目次

  • 1章 jQuery Mobileをはじめよう
  • 2章 アプリケーションの構造とナビゲーション
  • 3章 ページの要素
  • 4章 テーマの切り替え
  • 5章 jQuery MobileのAPI
  • 6章 jQuery Mobileアプリケーションの実際
  • 付録A 知っておくと役に立つTIPSとjQueryの基礎知識
  • 付録B リファレンス

 以下は、すべてのページの基礎となるソースです。

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile</title>
        <link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
        <script src="js/jquery-1.6.4.min.js"></script>
        <script src="js/jquery.mobile-1.0.min.js"></script>
    </head>
    <body>
        <header><h1>jQuery Mobile</h1></header>
        <div class="content">
                <p>jQuery Mobileのページ</p>
        <footer><h1>Copyright...</h1></footer>
    </body>
</html>

 head部分でjQueryとjQuery Mobileのjsとcssファイルを指定し、body部分でヘッダとフッタ、ならびにページのメイン部分を記述していきます。後は、jQuery MobileならびにHTML5の仕様に合わせて記述していくだけで、簡単にスマホ対応サイトのページを作成できます。

 もちろん、jQueryならではのアニメーションやナビゲーション、ページ間の制御などの設定も可能です。これらの点は、公式Webサイトのドキュメントだけでは分からなかったので個人的には大変ありがたく、実際に仕事で参照しました。

 最も役立ったのは、5章の「初期化イベント」です。仕事で、「ページ遷移の直前に処理を行い、処理を反映した状態で次のページを表示できないか」という依頼がありました。公式Webドキュメントだけでは理解しづらかったのですが、本書のその部分を読み、実装可能であると分かりました。

 例えば、bind()という関数と pagebeforeshow というイベントを用いて、下記のように記述します。

<script>
$("page1").bind("pagebeforeshow", function(event, ui) {
    (何らかの処理を記述)
});
</script>

 こうすれば、「ページ遷移の直前に、遷移先のページで記述された処理を実行し、その処理が反映された状態のページを表示する」ことが可能です。

■本書をおすすめする人

 jQuery Mobileを利用する上で、jQueryの知識は多少必要ですが、簡単なjQueryの使い方を知っていれば十分jQuery Mobileを使えます。

 本書は、プログラマだけでなくデザイナーにとっても非常に読みやすい内容です。フォーム部品など、どういった表現がjQuery Mobileで可能かを本書で確認しつつ、デザイナーとプログラマの間で打ち合わせを行い、サイトを設計・構築していく――本書は、その一助になると思います。

『It’s Party Time!』 コラムニスト あずk)

Comment(0)