jQuery Mobileをざっくりと触ってみた

Web app jQuery Mobile

何がすごいって、いろいろ凄い。

  • ちょっとした作法を覚えればさっと作れちゃう。
  • フリーのフレームワークなんで当然コストはかからない。
  • デザインはある程度用意されているんで、そんな考えずにそれなりのサイトが上手く作れる。

つまり、「早い」「安い」「うまい」の三拍子揃った牛丼みたいなフレームワークなんですね（違
とりあえず、ざっくりと紹介でも。

jQuery Mobileってなんぞ

jQueryをベースに開発された、スマートフォンやタブレットPC用のWebアプリケーションを作成するためのフレームワークで、
HTML5を使用することで誰でも簡単にWebアプリケーションが作れちゃうとんでもねーやつ。

しかもデフォルトでクロスプラットフォームに対応しているので、機種ごとに「あれ...挙動がおかしいorz」なんて事は無い（はず）。

最初に

まずはjQuery Mobileを使用するための準備から。
使用するのはHTML5。
<head>内でjQuery Mobileに必要なファイルを読み込むためのコードを書いてあげる。

  • 基本となるソース
<!DOCTYPE HTML>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>jQuery Mobile Sample</title>
  </head>
  <body>
  	
  </body>
</html>
  • <head>内にjQuery Mobileに必要なファイルを読み込むためのコードを書く。

このとき、ローカルにファイルを落としてもいいし、CDNから直接読み込ませても良い。
今回はCDNから直接読み込んでみる。
jQuery Mobile公式ページの「Download」ページにコードが書いてるんで、それをコピペする。

  <head>
  	<meta charset="UTF-8">
  	<title>jQuery Mobile Sample</title>
    <!-- jQuery Mobile -->
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <!-- jQuery Mobile -->
  </head>

これで準備は完了。
あとは必要なものを<body>内にガシガシ書いていくだけ。

jQuery Mobileにおけるページ

通常のWebサイトだと1ページ毎に1つファイルを用意しなきゃだけど、jQuery Mobileはそんな必要ない。
カスタムデータ属性「data-role="page"」が付与された<div>が1ページになる。
ページ遷移をさせたい場合は、ページ内リンクを使用する。

  • こんな感じ
  <body>
    <!-- page01 -->
  	<div id="page01" data-role="page">
  		<div data-role="header">
  			<h1>Header</h1>
  		</div>
  		<div data-role="content">
  			<a href="#page02">Jump to page02</a>
  		</div>
  		<div data-role="footer">
  		       <h1>Footer</h1>
                </div>
  	</div>
    <!-- page01 -->

    <!-- page02 -->
  	<div id="page02" data-role="page">
  		<div data-role="header">
  			<h1>Header</h1>
  		</div>
  		<div data-role="content">
  			<a href="#page03">Jump to page03</a>
  		</div>
  		<div data-role="footer">
  		       <h1>Footer</h1>
                </div>
  	</div>
    <!-- page02 -->

    <!-- page03 -->
  	<div id="page03" data-role="page">
  		<div data-role="header">
  			<h1>Header</h1>
  		</div>
  		<div data-role="content">
                        Page03
  		</div>
  		<div data-role="footer">
  		       <h1>Footer</h1>
                </div>
  	</div>
    <!-- page03 -->
  </body>

これで、3ページ分。
ページを確認したとき、最初に表示されるのは一番最初に書いた<div data-role="page"></div>に記述された部分。
上記のソースを見ると分かるが、「data-role="hogehoge"」には色んな種類がある。

「data-role="header"」と書けば、ページのヘッダー。
「data-role="content"」と書けば、ページの中身。
「data-role="footer"」と書けば、ページのフッター。

分かりやすくて覚えやすい、簡単ですねー。

ボタンも作れちゃう

スマートフォン用のページといえば、必ず必要になってくるであろうボタン。
角丸のおなじみのあのボタン。
CSS3の「border-radius」とか使ってせっせと作るのもいいけど、jQuery Mobileでは予め用意されてたり。
実装方法も簡単。<a>タグに「data-role="button"」を付けるだけ。

  <a data-role="button" href="#">Button</a>

これで、こんなボタンが出来る。

他にも、「data-icon=hogehoge」を付けてあげると、ボタンのアイコンが設定できる。

例えば「data-icon=home」を使うと...

  <a data-icon="home" data-role="button" href="#">Home button</a>

家のアイコンがついたボタンが出来たり。

他にも色んなアイコンがあったり、アイコンの表示位置を変更したりインライン表示のボタンも作ることができるよ！
デモを作ったんでよければ参考にでも。

Demo

リストとかも簡単にできちゃう

jQuery Mobileを使えば、data-roleをごにょごにょするだけでスマートフォンらしいリストもサクっと作ることが出来ちゃう！
方法も簡単。<ul>（または<ol>）要素に「data-role="listview"」を付けてあげるだけ。

これを

  <ul>
  	<li>hogehoge</li>
  	<li>fugafuga</li>
  	<li>piyopiyo</li>
  </ul>

こーしてあげるだけ

  <ul data-role="listview">
  	<li>hogehoge</li>
  	<li>fugafuga</li>
  	<li>piyopiyo</li>
  </ul>

すると、こんなリストが作れちゃう。

liに「data-role="list-divider"」を付与してあげるとリストの見出しが簡単に作れちゃう。

  <ul data-role="listview">
  	<li data-role="list-divider">List title</li>
  	<li>hogehoge</li>
  	<li>fugafuga</li>
  	<li>piyopiyo</li>
  </ul>


ほかにも...

ここには書ききれなかったけど、この他にもフォームやら複数カラムのレイアウトとかもサクっと作れちゃいます。
画面遷移時のエフェクトとかも変更が可能だったり。
テーマも最初から5種類用意されていたりと、デフォルトの状態で色々細かい設定ができちゃったり。

最後に

まだざっくりとしか触ってないけど、印象としてはとても扱いやすい感じ。
何よりJavaScriptのコードを書いたりせずにここまで出来るのは凄い。

スマフォ対応をサクっとやっちゃいたい！みたいな時には重宝するんじゃないかなーと。
是非使っててはいかがでしょーか。

今回参考にしたページと書籍