jQuery Mobile（開発編）勉強会資料

jQuery Mobile （開発編）

2012/09/26
浦信将

1

このスライドについて
• リファレンスから順番に実際のサイト開発で
使った/使えそうなものをピックアップしてい
ます。
• 勉強会の資料です。実際はデモしながらやっ
ていたため、スライドは字が多いです。

2

2

最初の一行に JavaScript を書けば、

おおよそ流通している
Webブラウザやタブレットに対応した

ユーザインターフェースを
提供できるようになる

3

特徴１

タッチパネルに最適化された
UIウィジェット

4

特徴２

AJAXによるアニメーション効果のついた
スムーズなナビゲーションシステム

6

data- で始まるHTML5で採用された属性を
通じて、jQuery Mobileはウィジェットの設
定を受け付ける

data-role=“hogehoge”

8

主な機能（１）
• jQueryコア上に構築
• 全てのメジャーなモバイル・プラットフォームとの互換
• 軽量
• モジュール構造
• HTML5でのマークアップによる設定
• プログレッシブ・エンハンスメント
• レスポンシブ・デザイン

9

主な機能（２）
• Ajaxによるスムーズなナビゲーションシステム

• 自動初期化
• アクセシビリティ
• 新たなイベント

• 新しいプラグイン
• 高機能なテーマフレームワーク

10

対応プラットフォーム一覧（A-grade）
A-grade - Full enhanced experience with Ajax-based animated page
transitions.
• Apple iOS 3.2-5.1 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
• Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance
may be sluggish, tested on Google G1 (1.5)
• Android 3.1 (Honeycomb) - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS) - Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
• Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
• Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
• Blackberry 7 - Tested on BlackBerry® Torch 9810
• Blackberry Playbook (1.0-2.0) - Tested on PlayBook
• Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 - Tested on HP TouchPad
• Firefox Mobile (10 Beta) - Tested on Android 2.3 device
• Chrome for Android (Beta) - Tested on Android 4.0 device
• Skyﬁre 4.1 - Tested on Android 2.3 device
• Opera Mobile 11.5-12: Tested on Android 2.3
• Meego 1.2 - Tested on Nokia 950 and N9
• Samsung bada 2.0 - Tested on a Samsung Wave 3, Dolphin browser
• UC Browser - Tested on Android 2.3 device
• Kindle 3 and Fire - Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 - Tested on original Nook Color, not Nook Tablet
• Chrome Desktop 11-19 - Tested on OS X 10.7 and Windows 7
• Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
• Firefox Desktop 4-13 - Tested on OS X 10.7 and Windows 7
• Internet Explorer 7-9 - Tested on Windows XP, Vista and 7
• Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7

11

対応プラットフォーム一覧（B-grade）

B-grade - Enhanced experience except without Ajax navigation
features.

• Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
• Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
• Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7
(Symbian^3), also works on N97 (Symbian^1)

12

対応プラットフォーム一覧（C-grade）

C-grade - Basic, non-enhanced HTML experience that is still functional

• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
• All older smartphone platforms and featurephones - Any device
that doesn't support media queries will receive the basic, C grade
experience

13

ページ機構（１）
jQuery Mobileの「ページ」構造は、1枚のページとして用
いることも、内部的なリンク構造を持った複数のページと
して作成することも可能

1枚のページ・・・通常のリンク
複数のページ・・・普通のHTTPリクエストでは実現でき
ないようなリッチでネイティブなリンク

14

ページ機構（２）
HTML5のDOCTYPE宣言で始まることにより、最大限の機
能を発揮
head要素内でjQuery本体、jQuery Mobile、モバイル用テ
ーマCSSを参照させる
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.css” />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.js"></script>
</head>
<body> ... </body>
</html>

15

ページ機構（３）
• メタ要素 Viewport
ブラウザに対してページを表示する際のズームレベルや方向
を指示

<meta name="viewport" content="width=device-width, initial-scale=1">

横幅はデバイス画面の持つピクセル数にjQuery Mobileが自
動調整

16

ページ機構（４）
携帯端末上の「ページ」ごとに data-role=“page” という
属性指定をした要素(通常は div )を作成

<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

17

ページ間リンク
• ページ間のリンクは全て自動的にAjax
– 取得されたページのコンテンツはDOMに追加
（jQuery Mobileでは、DOMを綺麗にしておく仕組みが組み込まれてい
る）
– 初期化イベントはready、onloadではなくpageinit

• Ajaxを用いないリンク（IPROS）
– rel=“external”（外部サイトへのリンク）
– data-ajax=“false”（Ajaxによる遷移をしたくない）
– target 属性
– グローバル設定によりサイト全体へ適用可能

18

ダイアログ
どのようなページでも、リンクのアンカー要素に data-
rel=“dialog” という属性を付加することで、モーダル・ダ
イアログとして表示

• htmlをダイアログとして表示
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="pop">Open dialog</a>

• ID指定領域をダイアログとして表示
<a href=“#popup" data-role="button" data-rel="dialog" data-transition="pop">Open dialog</a>

19

ツールバー
• ヘッダ
通常ページの最初の要素。一般的には、ページタイトル
と、2つまでのボタンがついている

• フッタ
通常ページの最後の要素。ヘッダよりも比較的自由に内
容を記述できるが、一般的にはテキストとボタンで構成
される

21

ヘッダ（１）
• ヘッダはページ最上部に表示されるツールバーで、通常
はページのタイトルと、オプションで左端や右端にナビ
ゲーション用のボタンを持つ

<div data-role="header" data-position="inline">
<a href=“index.html“ data-rel=“back” data-icon=“back”>戻る</a>
<h1>ヘッダー</h1>
<a href=“conf.html” data-icon=“gear” data-theme=“b”>設定</a>
</div>

22

ヘッダ（２）
• 左端に一つ前のページに戻るボタンを生成
<a href=“index.html” data-rel=“back” data-icon=“back”>戻る</a>

data-rel=“back”で、hrefを無視し履歴を一つ戻る

• 右端に設定画面へのボタンを生成
<a href=“conf.html” data-icon=“gear” data-theme=“b”>設定</a>

data-iconで、好きなアイコンを設定

23

フッタ
• data-role 属性値が footer である以外、
基本的な構造はヘッダと同様
<div data-role="footer">
<h4>Copyright © 2012 IPROS All Rights Reserved.</h4>
</div>

24

ナビゲーションバー
• ヘッダやフッタなどのバーに5つまでのアイコン付きボタ
ンを配する際などに便利
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" data-icon="home" class="ui-btn-active">ホーム</a></li>
<li><a href="b.html" data-icon="grid">つながり</a></li>
<li><a href="c.html" data-icon="search">見つける</a></li>
<li><a href="d.html" data-icon="gear">アカウント</a></li>
</ul>
</div>
</div>

5つ以上のリンクを作ると、ナビゲーションバーは複数行に拡張され
る

25

ツールバーのオプション
• 固定ポジションツールバー
ヘッダやフッタとしてツールバーをページ上下に固定することが出来、コン
テンツはその間を自由にスクロール

<div data-role="header" data-position="ﬁxed">

• フルスクリーン・ツールバー
固定ツールバー同様に上部にヘッダが固定表示

画面をタッチした際に固定でない通常モードに切り替わらず、代わりに画面
上から消える

<div data-role=“footer" data-position="ﬁxed" data-fullscreen="true">

26

ボタン
• リンクをボタンにする
アンカーリンクに data-role=“button” 属性を記述

<a href=“index.html” data-role=“button”>リンクボタン</a>

• フォームボタン
button 要素、 input 要素で type が submit, reset, button, imageのい
ずれかであるものを、リンクによるボタンに変更。

data-role=“button”は不要

28

インラインボタン
• デフォルトでは、コンテント内で作られたボタンはブロ
ックレベル要素で、画面の横幅いっぱいに表示
• data-inline=“true” と指定することで、テキストとア
イコンの幅だけのボタン

<a href=“a.html” data-role=“button” data-inline=“true”>キャンセル</a>
<a href=“b.html” data-role=“button” data-inline=“true” data-theme=“b”>保存</a>

29

グループボタン
• 複数のボタンをグループ化

• data-role=“controlgroup” 属性を指定すると、フレ
ームワークが自動的に余白や影を消したり、丸くする角
を調整
<div data-role="controlgroup">
<a href="/doc/jquery_mobile/" data-role="button">Yes</a>
<a href="/doc/jquery_mobile/" data-role="button">No</a>
<a href="/doc/jquery_mobile/" data-role="button">Maybe</a>
</div>

デフォルトでは縦方向、data-type=“horizontal”で横方向
にグループ化
30

レイアウトグリッド
• ちょっとした要素を横並びにレイアウトしたい場合に
（ボタン、ナビゲーション用のタブなど）
• ui-grid というCSSベースのブロックスタイル用クラスを
使用
– 2カラム (ui-grid-aクラスを使用)

– 3カラム (ui-grid-bクラスを使用)

– 4カラム (ui-grid-cクラスを使用)

– 5カラム (ui-grid-dクラスを使用)

32

2カラム
• コンテナとなる要素に ui-grid-a クラスを指定。そし
て、内部に2つの子コンテナを作り、それぞれ ui-
block-a と ui-block-b というクラスを指定

<div class="ui-grid-a">
<div class=“ui-block-a”><strong>ブロックA</strong> のテキスト</div>
<div class=“ui-block-b”><strong>ブロックB</strong> のテキスト</div>
</div>

33

3カラム
• コンテナとなる要素に ui-grid-b クラスを指定。そし
て、内部に2つの子コンテナを作り、それぞれ ui-
block-a と ui-block-b とui-block-b というクラス
を指定

<div class="ui-grid-b">
<div class=“ui-block-a”><strong>ブロックA</strong> のテキスト</div>
<div class=“ui-block-b”><strong>ブロックB</strong> のテキスト</div>
<div class=“ui-block-c”><strong>ブロックC</strong> のテキスト</div>
</div>

34

4カラム
• コンテナとなる要素に ui-grid-c クラスを指定。

5カラム
• コンテナとなる要素に ui-grid-dクラスを指定。

• 各グリッドにはボタンも配置可能

35

開閉式コンテンツ
• コンテナ要素に data-role=“collapsible” 属性を指定

• コンテナ直下には、ヘッダ要素(h1∼h6のどれか)を追
加。フレームワークはこのヘッダ要素をクリック可能な
ボタンのように整形し、左端に “+” アイコンを追加する

<div data-role="collapsible">
<h3>ヘッダ</h3>
<p>ここがコンテンツ部分です。初期状態では表示されており、ヘッダがクリ
ックされると非表示になります。</p>
</div>

37

アコーディオン式コンテンツ
• 開閉式コンテンツのセット

• 親要素に data-role=“collapsible-set” 属性を追加

<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>

38

フォーム
• テキストボックス
• チェックボックス
• セレクトボックス

通常のwebと直感的に変わらないので、
略

40

フリップスイッチ
• オン/オフや真/偽値を設定する
のに便利
• 切り替えにはスイッチをスライ
ダーのようにドラッグするか、
タップ
<label for=“ﬂip-a”>メール配信</label>
<select name="slider" id="ﬂip-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

41

ラジオボタン（１）
• input 要素に type=“radio” を指定し、対応す
る label を記述。この時 label 要素は for 属性を使っ
て input のIDと対応させる

• label を各チェックボックスのテキストに使っているた
め、グループ全体の説明には ﬁledset の legend を使う
とよい

42

ラジオボタン（２）
<ﬁeldset data-role="controlgroup">
<legend>至急度</legend>
<input type="radio" name="r1" id="r1" value="1" checked="checked" />
<label for=“r1”>通常</label>
<input type="radio" name="r2" id="r2" value="2" />
<label for=“r2”>至急</label>
<ﬁeldset>

43

リストビュー
data-role=“listview”で横幅いっぱい、右側に矢印

便利なリスト
• リスト分類

• 検索フィルタ
• 書式とアイテム数

• サムネイル

45

リスト分類
• 分類してグループ化。リストアイテムに data-
role=“list-divider”を追加することで設定

<ul data-role="listview">
<li data-role=“list-divider”>電子部品</li>
<li><a href=“/category/a/”>電子管</a></li>
<li><a href=“/category/b/”>抵抗器</a></li>
<li><a href=“/category/c/”>コンデンサ</a></li>
<li data-role=“list-divider”>コネクタ</li>
<li><a href=“/category/d/”>同軸コネクタ</a></li>
</ul>

46

検索フィルタ
• フィルタ可能にするには data-filter=“true” を指定

<ul data-role="listview" data-filter="true">
<li><a href="/doc/jquery_mobile/">Acura</a></li>
<li><a href="/doc/jquery_mobile/">Audi</a></li>
<li><a href="/doc/jquery_mobile/">BMW</a></li>
<li><a href="/doc/jquery_mobile/">Cadillac</a></li>
<li><a href="/doc/jquery_mobile/">Chrysler</a></li>
<li><a href="/doc/jquery_mobile/">Dodge</a></li>
<li><a href="/doc/jquery_mobile/">Ferrari</a></li>
<li><a href="/doc/jquery_mobile/">Ford</a></li>
<li><a href="/doc/jquery_mobile/">GMC</a></li>
<li><a href="/doc/jquery_mobile/">Honda</a></li>
<li><a href="/doc/jquery_mobile/">Hyundai</a></li>
<li><a href="/doc/jquery_mobile/">Infiniti</a></li>
<li><a href="/doc/jquery_mobile/">Jeep</a></li>
<li><a href="/doc/jquery_mobile/">Kia</a></li>
<li><a href="/doc/jquery_mobile/">Lexus</a></li>
<li><a href="/doc/jquery_mobile/">Mini</a></li> 48

書式とアイテム数（１）
• アイテムごとにヘッダ、説明、補足、子要素のアイテム数
表示などのフォーマットを用意
– リストの右側に子要素の数などを表示するには、数値を書いた要素に
ui-li-count クラスを指定

– テキストの書式は、ヘッダ要素(h3など)を使用。段落(p)を重ねると文字
は弱くなる
– アイテムの右端に補足的な情報を追加するには、その要素に ui-li-aside
クラスを追加

50

書式とアイテム数（２）
• 要素数を表示
<li><a href="/area/1/">埼玉県<span class="ui-li-count">12</span></a></li>
<li><a href="/area/2/">千葉県<span class="ui-li-count">0</span></a></li>
<li><a href="/area/3/">神奈川県<span class="ui-li-count">4</span></a></li>
<li><a href="/area/4/">東京都<span class="ui-li-count">328</span></a></li>
<li><a href="/area/5/">栃木県<span class="ui-li-count">62</span></a></li>
</ul>

51

書式とアイテム数（３）
• 書式いろいろ
<li><a href="/list/1/">
<h3>iPhone 5を分解、新型プロセッサ「A6」のに迫る09/23</h3>
<p><strong>製品解剖スマートフォン</strong></p>
<p>Appleの最新スマートフォン「iPhone 5」を分解し、主要部品のサプライヤーを調査する
とともに、新型プロセッサ「A6」にも…</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
</ul>

52

サムネイル
• サムネイルをリストアイテムの左端に表示させるには、
アイテムの最初の要素として画像を追加
• 画像を自動的に80pxの正方形に整形
<li><a href="/doc/jquery_mobile/">
<img src="./album-ws.jpg" />
<h3>冷蔵庫用アイスセンサー</h3>
<p>新グリーン技術のアイスセンサーで冷蔵庫、冷蔵庫の省エネ化！！！</p>
</a></li>
<li><a href="/doc/jquery_mobile/">
<img src="./album-xx.jpg" />
<h3>3Dモーションセンサー</h3>
<p>UAV（無人飛行機）、ULV（無人自動車）、ロボット等のモーションキャプチャーに</p>
</a></li>
</ul>

54

実際開発で苦労したところ
• デフォルトではAjaxで画面遷移し、ハッシュを使ってhistoryの管理
をします。

そのため、ハッシュを使ったPCサイトのURLをそのままjQuery
Mobileを使ったスマホサイトに対応させることができません。ブラ
ウザの戻るを使った場合に問題が発生するなど、ハッシュを使う遷
移は使えません。

• Ajaxを切る、history管理でハッシュを使わないといった設定、
jQueryのバージョンとの組み合わせはリファレンス通りにはいか
ず、ライブラリのカスタマイズなどでゴリゴリ対応しました。

56

56

リファレンス
• http://jquerymobile.com/demos/1.1.1/
• http://dev.screw-axis.com/doc/jquery_mobile/
（1.1.0 日本語）

57

jQuery Mobile（開発編）勉強会資料

More Related Content

What's hot

Similar to jQuery Mobile（開発編）勉強会資料

jQuery Mobile（開発編）勉強会資料