iPhone等のスマホ向けレイアウトを簡単に作れるjQueryMobileを試してみた

Javascript jQueryMobile

jQueryMobileを触ってみたのでメモ。

jQueryMobileはスマートフォン、タブレットに特化したJavascript Framework。

準備

downloadページからjQueryMobile本体とcssをダウンロードしてくる。
http://jquerymobile.com/download/

ホスティングもしているみたいだけど、今回はjQueryMobileで提供されるデザインテーマで利用される画像パスがアプリ側と合わなかった為zipをダウンロードした。
ダウンロードしたファイルを展開するとjs,css,imagesが入っている。
cssはjQueryMobileが要素の属性を判断してレイアウトを整えるのに使われる。
これらと合わせてjQuery本体も読み込む。
よってロードする順番は以下のようになる。

<link href="/stylesheets/jquery.mobile-1.0a2.min.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/javascripts/jquery.mobile-1.0a2.min.js" type="text/javascript"></script>

以上で準備は完了。

要素の記述

実際にjQueryMobileを活用してスマホ向けviewを構築していく。
まずメインのコンテンツとなる部分を以下の属性をつけて記述する。

<div data-role="page" data-theme="d">
</div>

data-role="page"はメインのコンテンツであることを示す属性。
data-theme="d"は適用するデザインテーマ*1の種類を指定する為の属性。

次にヘッダ要素の記述。

<div data-role="header">
  header
</div>

ここでもヘッダを表すdata-role="header"を指定することでヘッダレイアウトが適用される。

リスト要素の記述。

<ul data-role="listview" data-theme="c" data-inset="true">
  <li>
    <a href="/vocabulary/new">add word</a>
  </li>
  <li>
    <a href="/dashboard/index">dashboard</a>
  </li>
  <li>
    <a href="/mobile/list">list</a>
  </li>
  <li>
    <a href="/dashboard/examination">examination</a>
  </li>
</ul>

ここまでくると属性については大体予想できるでしょうが、
data-role="listview"でリスト構造を取ることを指定する。
data-theme="c"でリストのデザインテーマ*2を適用。
data-inset="true"を指定することによって一括りのデータセットとされ、全体が角丸レイアウトされる模様。(詳細未確認

途中に上記以外の要素が入っているが、以上をレンダリングさせると以下のようなレイアウトになる。

リンクについて

jQueryMobileにおいてリンク(aタグ)は全てAjaxによるリクエストとなる。*3
これによりページ遷移なしにiOSのネイティブアプリの様なページ遷移を行うことができる。
イメージについてはjQueryMobileデモを参照。
リンク先のページについては特にAjaxリクエストであることを意識する必要はない。
従来通りのHTMLで、jQueryMobileのレイアウトを記述したHTMLを返すだけで良い。
例：

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link href="/stylesheets/jquery.mobile-1.0a2.min.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script src="/javascripts/jquery.mobile-1.0a2.min.js" type="text/javascript"></script>
</head>
<body>

<div data-role="page" data-theme="d">
  <div data-role="header">
    <h1>Word List</h1>
  </div>

  <div style="margin:0 3px;">
    <ul data-role="listview" data-theme="c" data-inset="true">
      <li>
        <a href="/vocabulary/show/1">word</a>
      </li>
      <li>
        <a href="/vocabulary/show/2">duplicate</a>
      </li>
      <li>
        <a href="/vocabulary/show/3">disrupt</a>
      </li>
      <li>
        <a href="/vocabulary/show/4">rupt</a>
      </li>
      <li>
        <a href="/vocabulary/show/5">annual</a>
      </li>
      <li>
        <a href="/vocabulary/show/6">fundamental</a>
      </li>
      <li>
        <a href="/vocabulary/show/7">ensure</a>
      </li>
      <li>
        <a href="/vocabulary/show/8">add</a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

jQueryMobileはこのレスポンスをロードして以下の様にレイアウトを整える。

この様に自動でbackボタンも付けられる。これを利用してページ遷移することなく元のページに戻ることができる。

まとめ

jQueryMobileはスマートフォン向けのページを素早く簡単に構築することができます。
自前で実装すると面倒な無遷移のページ移動が簡単に実装できます。
またデザインもjQueryMobile側で吸収してくれているので大量のcssを書かずに済みます。
これ以外にもたくさん機能が提供されているので非常に有用なフレームワークであると思います。
特にイベント関連の充実は本当に素晴らしいです。

これでデザインテーマも簡単に記述できるようになるともっと良いものになると思いました。

*1:http://jquerymobile.com/demos/1.0a2/#docs/api/themes.html

*2:http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-themes.html

*3:Ajaxとならないように指定も可能