初めてのjQuery Mobile＠JavaScript Advent Calendar 2010
http://atnd.org/events/10497
16日目担当の@yuribossaです。こういうイベントに参加するのは初めてで緊張してます…(ドキドキ)。普段もJavaScriptはあまり書いてません。家に帰ったら寝ます。休みの日はアイドルを追いかけてます。好きなアイドルグループはももいろクローバーです。たまにGoogle App Engineで変なもの作ってます。Google App Engineではサーバのリソースが限られているので、なるだけクライアント側で処理を行い、サーバ側ではデータを返すだけみたいな構成がスマートらしいです。そこでJavaScriptを勉強するようになりました。クロスブラウザ対策とか面倒なので専らjQueryを使って書いてます。今日はつい先日リリースされたjQuery Mobileを使った開発のまとめとして記事を書きました。jQuery Mobileを網羅しているわけでもなく、あくまで基本的な部分のみです。
- jQuery Mobileとは？
jQueryをベースに開発されたスマートフォン用のJavaScriptライブラリです。iPhoneやAndroid端末で閲覧することを目的に作られたWebサイトで快適な操作性が得られるようにする機能がいっぱい実装されています。主な特徴として、
-
- スマートフォン用にWebページの表示が自動で最適化される。
- 1つのHTMLファイルに複数の画面を記述できる。それによるサーバへのリクエスト回数の軽減とスムーズな画面遷移の実現。
があります。実際まだαリリースなので物足りない部分もあるけど、簡単にスマートフォン対応の画面を作成できるので便利です。
- まず始めるには？
1にも2にもコードです。jQuery Mobileを使うためには以下の3行を追加するだけです。jQuery Mobile用のスタイルシート、jQuery本体、そしてjQuery Mobileの3つです。圧縮されてないコードもオフィシャルにあります。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
- jQuery Mobileの基本
jQuery Mobileの基本はdata-roleです。それぞれのタグにdata-role属性を記述することで、ページ内での役割を与えています。
-
- data-role="page"
ページと前述しましたが、jQuery Mobileは1つの画面をページという単位で扱います。ページの役割を与える最も重要なdata-roleがpageです。1つのHTMLファイル内に複数のpageを記述することで、サーバにリクエストすること無しにページ遷移することを可能にしています。
-
- data-role="header"
ページ内のヘッダ部分。デフォルトでBackボタンが付きます。
-
- data-role="content"
ページ内のコンテンツ部分。
-
- data-role="footer"
ヘッダ、コンテンツときたら、もちろんフッタです。これらを記述しておくと、あら不思議、jQuery Mobileがスタイルシート含めて自動でスマートフォン用に画面を最適化してくれます。以下がシンプルなページ構造です。
サンプルページ
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>ももいろクローバーとは、「ピュアな女の子が、幸せを運びたい」という意味を込めて結成された女の子6人組のアイドルグループです。</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>このページを1つのHTMLファイル内にいくつでも書けます。Firebugなりで見ると、data-roleが設定されたタグにいろいろなclassが追加されていることがわかります。注意点としてhtmlは標準モードでないと正しく動作しないっぽいです。
上のサンプルページを互換モードとした場合
- ページ遷移
1つのHTMLファイルに複数のページを記述できても、それらのページ間で遷移出来なくては意味がありません。遷移先の指定にはidを指定するやり方と、URLを指定するやり方があります。
-
- 同じHTMLファイル内でのページ遷移
data-role="page"が記述されているタグにidを記述しておき、そのidをhrefなどで指定します。
サンプルページ
<body>
<div data-role="page" id="first-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>わーい！1ページ目だよ</p>
<a href="#second-page">2ページへGO!</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>やっほー！2ページ目です</p>
<a href="#first-page">1ページへGO!</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
-
- 他のHTMLへの遷移
普通にURLを指定します。このとき、rel="external"を設定することで外部ファイルであることをjQuery Mobileに認識させています。
サンプルページ
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="other.html" rel="external">他のページへGO!</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
-
- ページ遷移時のエフェクト
data-transition属性を指定することでページ遷移するときにエフェクトを追加できます。
サンプルページ
<body>
<div data-role="page" id="first-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>わーい！1ページ目だよ</p>
<p><a href="#second-page" data-transition="slide">slide</a></p>
<p><a href="#second-page" data-transition="slideup">slideup</a></p>
<p><a href="#second-page" data-transition="slidedown">slidedown</a></p>
<p><a href="#second-page" data-transition="pop">pop</a></p>
<p><a href="#second-page" data-transition="fade">fade</a></p>
<p><a href="#second-page" data-transition="flip">flip</a></p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>やっほー！2ページ目です</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
- data-role="button"
jQuery Mobileではinputタグを使わなくてもボタンを作れます。その魔法のキーワードがdata-role="button"です。aタグでもdivタグでもボタンにできます。もちろんinputタグでもボタンになります。
サンプルページ
<body>
<div data-role="page" id="first-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>わーい！1ページ目だよ</p>
<a href="#second-page" data-role="button">ボタンを押して2ページへGO!</a>
<input type="button" value="こちらはinput type=buttonです">
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>やっほー！2ページ目です</p>
<a href="#first-page" data-role="button">ボタンを押して1ページへGO!</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
- data-rel="dialog"
ページほどきちんとした画面じゃないけど、ちょっとしたメッセージを表示したい、そんなときはダイアログです。遷移するときにdata-rel="dialog"を指定することでダイアログとして表示することを認識させています。また遷移先が同一HTMLの場合は遷移先をdata-role="dialog"としてください。この記事のために外部ファイルをダイアログ表示するコードを書きましたが、うまく動作しなかったので調査必要です。
サンプルページ
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="#dialog-sample" data-role="button" data-rel="dialog">同一ファイル内のダイアログ表示</a>
<a href="dialog.html" data-role="button" data-rel="dialog">外部ファイルをダイアログ表示</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="dialog" id="dialog-sample">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>同一HTMLファイル内のダイアログです。</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>さらにさりげなくメッセージを表示したい場合は以下の記事を参照してください。
http://d.hatena.ne.jp/intheflight/20101126/p2
- data-role="listview"
スマートフォン用のリスト表示もjQuery Mobileでは簡単です。それにはdata-role="listview"を使います。
サンプルページ
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#second-page">百田夏菜子</a></li>
<li><a href="#second-page">早見あかり</a></li>
<li><a href="#second-page">玉井詩織</a></li>
<li><a href="#second-page">高城れに</a></li>
<li><a href="#second-page">有安杏果</a></li>
<li><a href="#second-page">佐々木彩夏</a></li>
</ul>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>リスト表示も簡単</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
- テーマ
jQuery Mobileはデフォルトで5種類のテーマが用意されています。それぞれaからeが名付けられていて、何も指定されていないときはaのテーマが使われます。テーマを指定するにはdata-themeを使います。もちろん自作のテーマも使用可能です。
サンプルページ
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>テーマbのHeader</h1>
</div>
<div data-role="content">
<div data-role="button" data-theme="a">テーマaのボタン</div>
<div data-role="button" data-theme="b">テーマbのボタン</div>
<div data-role="button" data-theme="c">テーマcのボタン</div>
<div data-role="button" data-theme="d">テーマdのボタン</div>
<div data-role="button" data-theme="e">テーマeのボタン</div>
</div>
<div data-role="footer" data-theme="e">
<h1>テーマeのFooter</h1>
</div>
</div>
</body>
- 調べる
これから調べなくてはいけない点として、新しく要素を生成した際にjQuery Mobileを適用するにはどうしたらよいかがあります。Ajaxなどを使っているとデータを取ってきてそれを元に要素生成なんてよくあると思いますが、その際にjQuery Mobileの機能が適用されません。たぶんやり方あると思うので調べます。現在はあらかじめ適用された要素を用意しておいて、それをcloneしてデータを流し込んでいます。この解決法を知ってる人いらしたら教えてください。
以上はjQuery Mobileの機能のほんの一部です。オフィシャルサイトを読めばさらに多くの機能を知ることができます。学ぶには作るのがいちばんということで、jQuery Mobileを使ったサイトを作りました。TumblrのDashboardを見るアプリです。
http://deco-mayu.appspot.com/
最後まで読んでくれてありがとうございました。技術記事って書くの難しいですね。少しでも興味持ってくれればなあと思います。ではでは。
