自己紹介

吉川　徹　/　Toru Yoshikawa

HTML5とか勉強会スタッフ

Twitter: yoshikawa_t

Blog: http://d.hatena.ne.jp/pikotea/

お知らせ

このプレゼン資料は、jQuery Mobile で作られています。
http://yst.web.infoseek.co.jp/jquerymobile.html

jQuery Mobile とは？

・モバイルサイト構築用のフレームワーク

・10月にAlpha版がリリース

・jQtouch、Sencha Touch に続くモバイルフレームワークの本命

jQuery Mobile の特徴

Cross Platform

様々なデバイスに対応

Symbian、BlackBerry、iOS、Android、Windows Phone、WebOS などなど

Progressive Enhancement

レガシーなブラウザでは基本的なHTMLを、モダンなブラウザでは優れたUXを提供

Accessibility

WAI-ARIAに対応し、ナビゲーターやスクリーンリーダーに対応

Simplicity

JavaScriptを使わずに、マークアップで簡単に設定

HTML5のカスタムデータ属性を利用

ex) data-role="page"

Small Size

圧縮した状態で13KB

Minified and Gzipped

１．準備

ヘッダーでCSS、jQuery、jQuery Mobile を読み込む

<head>
    <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>
</head>

２．ページ・ダイアログ

（１）ページ構成

<div id="page-sample" data-role="page">
	<div data-role="header">
		<h1>Header</h1>
	</div>
	<div data-role="content">
		<h1>Body</h1>
	</div>
	<div data-role="footer">
		<h1>Footer</h1>
	</div>
</div>

サンプル

（２）ページ遷移

<a href="#page-sample" data-transition="slide">slide</a>

slide
slideup
slidedown
pop
fade
flip

（３）ダイアログ

<div id="dialog-sample" data-role="dialog">
	<div data-role="header"> 
		<h1>Dialog</h1> 
	</div> 
	<div data-role="content">
		<h1>Realy?</h1>
		<p></p>
		<a href="#" data-role="button" data-theme="b">OK</a>
		<a href="#" data-role="button">Cancel</a>
	</div>
</div>

<a href="#dialog-sample" data-rel="dialog" data-transition="pop">サンプル1</a><br>

サンプル1

３．ヘッダー・フッター

（１）ヘッダー

<header data-role="header">
	<a href="#" data-role="button">Left</a>
	<h1>Toolbar</h1>
	<a href="#" data-role="button">Right</a>
</header>

（２）フッター

<footer data-role="footer">
	<div data-role="navbar">
		<ul>
			<li><a href="#" class="ui-btn-active" data-icon="grid">Summary</a></li>
			<li><a href="#" data-icon="star">Favorit</a></li>
			<li><a href="#" data-icon="gear">Config</a></li>
		</ul>
	</div>
</footer>

４．フォーム

<input type="text">

text

<input type="search">

<select data-role="slider">
	<option>ON</option>
	<option>OFF</option>
</select>

slider

<input type="range" value="0" min="0" max="100"/>

range

<input type="checkbox" name="checkbox1" id="checkbox1">
<label for="checkbox1">A</label>

checkbox (normal) A

<fieldset data-role="controlgroup" data-type="horizontal"> 
	<legend>checkbox (horizontal group)</legend>
	<input type="checkbox" name="checkbox2" id="checkbox2"/>
	<label for="checkbox2">A</label>
	<input type="checkbox" name="checkbox3" id="checkbox3"/>
	<label for="checkbox3">B</label>
	<input type="checkbox" name="checkbox4" id="checkbox4"/>
	<label for="checkbox4">C</label>
</fieldset>

checkbox (horizontal group) A B C

<fieldset data-role="controlgroup" data-type="vertical"> 
	・・・
</fieldset>

checkbox (vertical group) A B C

<select>
	<option>A</option> 
	<option>B</option> 
	<option>C</option> 
	<option>D</option> 
</select>

radio (vertical group) A B C

<select>
	<option>A</option> 
	<option>B</option> 
	<option>C</option> 
	<option>D</option> 
</select>

select (few)

<select>
	<option>A</option>
	<option>B</option>
	・・・
	<option>U</option>
</select>

select (many)

５．リスト

（１）Normal

<ul data-role="listview">
	<li>A</li>
	<li>B</li>
	<li>C</li>
</ul>

（２）Divider

<ul data-role="listview">
	<li data-role="list-divider">Title A</li>
	<li>A1</li>
	<li data-role="list-divider">Title B</li>
	<li>B1</li>
	<li>B2</li>
</ul>

Title A
A1
Title B
B1
B2

（３）Link

<ul data-role="listview">
	<li><a href="#page-sample">A</a></li>
	<li><a href="#page-sample">B</a></li>
	<li><a href="#page-sample">C</a></li>
</ul>

（４）Nest

<ul data-role="listview">
	<li>A
		<ul>
			<li><a href="#page-sample">A1</a></li>
			<li><a href="#page-sample">A2</a></li>
			<li><a href="#page-sample">A3</a></li>
		</ul>
	</li>
	<li>B
		<ul>
			<li><a href="#page-sample">B1</a></li>
			<li><a href="#page-sample">B2</a></li>
			<li><a href="#page-sample">B3</a></li>
		</ul>
	</li>
</ul>

A
- A1
- A2
- A3
B
- B1
- B2
- B3

（５）Thumbnail

<ul data-role="listview"> 
	<li> 
		<img src="http://a1.twimg.com/profile_images/775997561/robo_normal.PNG" width="111" height="111">
		<h3><a href="#page-sample">Sample1</a></h3>
		<p>comment</p>
	</li>
	<li> 
		<img src="http://a1.twimg.com/profile_images/775997561/robo_normal.PNG" width="111" height="111">
		<h3><a href="#page-sample">Sample2</a></h3>
		<p>comment</p>
	</li>
	<li> 
		<img src="http://a1.twimg.com/profile_images/775997561/robo_normal.PNG" width="111" height="111">
		<h3><a href="#page-sample">Sample2</a></h3>
		<p>comment</p>
	</li>
</ul>

Sample1

comment
Sample2

comment
Sample2

comment

John Resig氏からの日本の開発者へのメッセージ

日本だけではなく、アメリカやすべての開発者に言えることだけど、自分の周りの環境だけじゃなく、もっと外にも意識を向けて欲しいな！

※超意訳

今後について

・来年1月正式リリース予定！

・Adobe Dreamweaver CS5 の拡張機能でjQuery Mobileをサポート予定！
ドラッグ＆ドロップでjQuery Mobileのコンポーネントが配置可能に

参考資料

jQuery Mobile
http://jquerymobile.com/

jQuery Mobile 1.0a2 Demos and Documentation
http://jquerymobile.com/demos/1.0a2/

jQuery Mobile のリファレンス的なもの
http://d.hatena.ne.jp/pikotea/20101019/1287484040

Testing Mobile JavaScript (Fall 2010
http://www.slideshare.net/jeresig/testing-mobile-javascript-fall-2010

第12回HTML5とか勉強会

jQuery Mobile

Toru Yoshikawa

自己紹介

吉川 徹 / Toru Yoshikawa