初めてのシステムと日記

システムも日記も初めてです。

jQuery Mobile 1.0を試してみた

jQuery Mobile

少し遅いですが、jQuery Mobile 1.0がリリースされたので試してみました。


■jQuery Mobileとは
jQueryのプラグインでスマートフォン向けWebアプリケーションのフレームワークです。
スマートフォンやブラウザに対応したUIが簡単に作れます。
他のスマートフォン向けフレームワークは以下のようなものがあります。


■テンプレート作成
以下がjQuery Mobileの基本的なテンプレートになります。

<!DOCTYPE html> 
<html> 
<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">
	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
  • headタグ内
  • bodyタグ内
    • ページ全体をdata-role属性にpageを指定したdiv要素で囲む(ページコンテナ)
      • これがサイト上の1ページにあたる
    • 上記内のヘッダバー(data-role=“header”)と、コンテンツ部分(data-role=“content”)が基本的なページ要素(不要であれば削除可)

HTML5対応したブラウザで開くと下記のようになります。


■ヘッダーやページリンクなどを追加してみる

<body> 

<div data-role="page" id="page1" data-title="1ページ目">

	<div data-role="header">
		<a href="/index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>トップ</h1>
		<nav data-role="navbar">
			<ul>
				<li><a href="#page1" class="ui-btn-active">トップ</a></li>
				<li><a href="#page2" data-transition="pop">2ページ目</a></li>
				<li><a href="#page3" data-transition="flip">3ページ目</a></li>
			</ul>
		</nav>
	</div><!-- /header -->

	<div data-role="content">	
		<p>1ページ目です。</p>
		
	</div><!-- /content -->

</div><!-- /page1 -->

<div data-role="page" id="page2" data-title="2ページ目">

	<div data-role="header">
		<a href="/index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>2ページ目</h1>
		<nav data-role="navbar">
			<ul>
				<li><a href="#page1">トップ</a></li>
				<li><a href="#page2" class="ui-btn-active" data-transition="pop">2ページ目</a></li>
				<li><a href="#page3" data-transition="flip">3ページ目</a></li>
			</ul>
		</nav>
	</div><!-- /header -->

	<div data-role="content">	
		<p>2ページ目です。</p>
		
	</div><!-- /content -->

</div><!-- /page2 -->

<div data-role="page" id="page3" data-title="3ページ目">

	<div data-role="header">
		<a href="/index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>3ページ目</h1>
		<nav data-role="navbar">
			<ul>
				<li><a href="#page1">トップ</a></li>
				<li><a href="#page2"data-transition="pop">2ページ目</a></li>
				<li><a href="#page3" class="ui-btn-active" data-transition="flip">3ページ目</a></li>
			</ul>
		</nav>
	</div><!-- /header -->

	<div data-role="content">	
		<p>3ページ目です。</p>
		
	</div><!-- /content -->

</div><!-- /page3 -->

</body>
  • 全体
    • 必要なページ分、ページコンテナを追加
  • ページコンテナ内
    • id属性を追加→これがリンク先になる
    • data-title属性を追加→ページのタイトルになる(指定しなかった場合はヘッダータイトルが指定される)
  • headerタグ内
    • homeアイコンを追加
      • data-icon属性でアイコンの種類を指定
      • data-iconpos属性で アイコンの位置、もしくはテキスト非表示を指定
      • data-direction属性で戻るページ切替を指定
  • hrefタグ内
    • data-transition属性を指定してページ切替効果を指定(デフォルトはslide)

下記のようにヘッダーリンクの追加が表示でき、実際にリンクさせるとAjaxによるページ切替が確認できると思います。


■軽く触った感想

  • 簡単なコードでエレガントなUIが作れるのでエンジニアにもオススメ
  • 動的ページを作成する際、Ajaxによるページ切替だとそのままだとおそらくPHPやJavaScriptを読みこまない恐れがある
    • Ajaxをオフにするか、changePage()関数による制御が必要そう→要検証
    • 公式ページの対応についてはこちら
  • jQuery Mobile、HTML5がまだ全てのブラウザをサポートしているわけではないので対応ブラウザなどは注意する必要がある

今回は最低限のページを作成しましたが、次は動的ページやフォーム周りを試してみます。