日記

日々のことと、Python/Django/PHP/Laravel/nodejs などソフトウェア開発のことを書き綴ります

jQuery Mobileをいじくってみた。(その1)

JavaScript

社内失業まっしぐらで、首元がスースーしてきました。（誰か職か仕事をください！）
ま、良い機会だと思い jQuery Mobileをいじってみました。

ケータイ白書2011 を見てみると日本の3大キャリアの機種別シェアTOP10にスマートフォンが入ってきているようなので、そろそろ本格的に取り組むには良い時期なのかなと思いました。

では Let's Try!!

jQuery Mobileってなに？

みんな大好き jQueryのプラグインみたいなもので、最近のスマートフォンのトレンドに対応したライブラリです。主な特徴を本家サイトから抜粋しつつ紹介すると...

  • iOS, Android, BlackBerry, HP(Palm) WebOS などで互換性を持ったプラットフォーム
  • サイズが小さい (12KB)
  • HTML5マークアップで設定する
  • アプリのようなユーザ体験
  • data-role属性を使った自動的な初期化
  • フルスクリーン対応？（ブラウザのアドレスバーを出さないとかかな）
  • Tap/Swipeなど Touch UI特有のイベント処理
  • Touch UIに最適化したUIフレームワーク
  • 強力なデザインテーマ設定

jQuery Mobileで特に良いところは、iOSやAndroidで実装されているアプリ上の画面のスライドやポップアップ、Touch UI用のコントロールが用意されているところ。凄く助かります。

jQuery Mobileの使い方

jQuery Mobileは JavaScriptのライブラリなので、通常のHTMLファイル上で読み込むだけで使えるようになります。CDN上にもファイルが配置されているので、以下のようなHTMLファイルだけ用意すれば準備完了です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script type="text/javascript">
    // user's script...
  </script>
</head>
<body>
  <!-- content... -->
</body>
</html>

ファイル名で推測できるかもしれませんが、現時点*1では 1.0 alpha4と正式リリース版では無いので注意です。Release Candidateになっていないので、今後APIインターフェースの変更なども有り得そうです。

ページを作る

うんちくを書くのが面倒なので、とりあえず簡単にサンプルを書いてみます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery Mobile!!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script type="text/javascript">
    // user's script...
  </script>
</head>
<body>
  <div id="page1" data-role="page">
    <div data-role="header">
      <h1>Page 1.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 1.</div>
      <a href="#page2">Page 2.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
  <div id="page2" data-role="page">
    <div data-role="header">
      <h1>Page 2.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 2.</div>
      <a href="#page3">Page 3.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
  <div id="page3" data-role="page">
    <div data-role="header">
      <h1>Page 3.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 3.</div>
      <a href="#page1">Page 1.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>
  </div>
</body>
</html>

これを Android エミュレータで表示すると、以下のように表示されます。



普通に div タグを書いていっただけなのに、よく見かけるヘッダーやフッターが再現されています。スナップショットだと動作が分からないのですが、リンクをクリックすると次の画面がスライドして表示されます。HTMLファイルは1つなのに、あたかも複数のページを次々に辿っているように表示されます。これは、jQuery Mobileが採用しているHTMLのマークアップに秘密があります。

HTMLタグの属性によるロール設定

サンプルHTMLの次の箇所に注目してください。

<div id="page1" data-role="page">

この data-role 属性が jQuery Mobileを使うときに重要で、このdata-role="page"が設定された要素が1ページとして jQuery Mobileが認識します。サンプルでは page1, page2, page3と定義があったので、1つのHTMLファイルの中に3画面分のページが定義されていました。

では、ページを構成している要素を見て行きます。

    <div data-role="header">
      <h1>Page 1.</h1>
    </div>
    <div data-role="content">
      <div style="text-aling:center">Page 1.</div>
      <a href="#page2">Page 2.</a>
    </div>
    <div data-role="footer">
      by monajiro
    </div>

3つのdata-roleが登場します。 header/content/footerです。これは名前の通りで、画面上のヘッダーと内容、フッターにあたります。
ページを構成する上で、header/footerは無くても大丈夫です。

またスナップショットを見比べると2ページ目以降には、ヘッダーに「Back」ボタンが付いています。これも jQuery Mobile が自動的にボタンを付けています。お利口なライブラリですね。

1つのHTMLファイルで複数画面を簡単に構成できて便利なのですが、HTMLファイルが大きくなると実機上での動作はどんどん重くなります。そんなときは、普通のWebページと同様にファイルを分けましょう。

ここまでで、一旦休憩します。
次はテーマ変更のエントリを書いてみる予定。

*1:2011年4月21日現在