jquery mobile（開発編）勉強会資料
DESCRIPTION
イプロス製造業/建設業のスマホサイトを構築した際に使用したjsライブラリであるjQuery Mobileの紹介資料です。TRANSCRIPT
jQuery Mobile （開発編）
2012/09/26浦 信将
1
このスライドについて• リファレンスから順番に実際のサイト開発で使った/使えそうなものをピックアップしています。
• 勉強会の資料です。実際はデモしながらやっていたため、スライドは字が多いです。
2
2
最初の一行に JavaScript を書けば、
おおよそ流通しているWebブラウザやタブレットに対応した
ユーザインターフェースを提供できるようになる
3
特徴１
タッチパネルに最適化されたUIウィジェット
4
5
特徴２
AJAXによるアニメーション効果のついたスムーズなナビゲーションシステム
6
7
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
• Skyfire 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ブラウザに対してページを表示する際のズームレベルや方向を指示
横幅はデバイス画面の持つピクセル数にjQuery Mobileが自動調整
<meta name="viewport" content="width=device-width, initial-scale=1">
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をダイアログとして表示
• ID指定領域をダイアログとして表示
<a href="dialog.html" data-role="button" data-rel="dialog" data-transition="pop">Open dialog</a>
<a href=“#popup" data-role="button" data-rel="dialog" data-transition="pop">Open dialog</a>
19
20
20
ツールバー• ヘッダ通常ページの最初の要素。一般的には、ページタイトルと、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
ヘッダ（２）• 左端に一つ前のページに戻るボタンを生成
data-rel=“back”で、hrefを無視し履歴を一つ戻る
• 右端に設定画面へのボタンを生成
data-iconで、好きなアイコンを設定
<a href=“index.html” data-rel=“back” data-icon=“back”>戻る</a>
<a href=“conf.html” data-icon=“gear” data-theme=“b”>設定</a>
23
フッタ• data-role 属性値が footer である以外、基本的な構造はヘッダと同様
<div data-role="footer"> <h4>Copyright © 2012 IPROS All Rights Reserved.</h4></div>
24
ナビゲーションバー• ヘッダやフッタなどのバーに5つまでのアイコン付きボタンを配する際などに便利
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><!-- /navbar --></div><!-- /footer -->
25
ツールバーのオプション• 固定ポジションツールバーヘッダやフッタとしてツールバーをページ上下に固定することが出来、コンテンツはその間を自由にスクロール
• フルスクリーン・ツールバー固定ツールバー同様に上部にヘッダが固定表示
画面をタッチした際に固定でない通常モードに切り替わらず、代わりに画面上から消える
<div data-role="header" data-position="fixed">
<div data-role=“footer" data-position="fixed" data-fullscreen="true">
26
27
27
ボタン• リンクをボタンにするアンカーリンクに data-role=“button” 属性を記述
• フォームボタンbutton 要素、 input 要素で type が submit, reset, button, imageのいずれかであるものを、リンクによるボタンに変更。
data-role=“button”は不要
<a href=“index.html” data-role=“button”>リンクボタン</a>
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” 属性を指定すると、フレームワークが自動的に余白や影を消したり、丸くする角を調整
デフォルトでは縦方向、data-type=“horizontal”で横方向にグループ化
<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>
30
31
31
レイアウトグリッド• ちょっとした要素を横並びにレイアウトしたい場合に（ボタン、ナビゲーション用のタブなど）
• 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 クラスを指定。
• コンテナとなる要素に ui-grid-dクラスを指定。
• 各グリッドにはボタンも配置可能
5カラム
35
36
36
開閉式コンテンツ• コンテナ要素に 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
39
39
フォーム• テキストボックス• チェックボックス• セレクトボックス
通常のwebと直感的に変わらないので、
略
40
フリップスイッチ• オン/オフや真/偽値を設定するのに便利
• 切り替えにはスイッチをスライダーのようにドラッグするか、タップ
<label for=“flip-a”>メール配信</label><select name="slider" id="flip-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 を各チェックボックスのテキストに使っているため、グループ全体の説明には filedset の legend を使うとよい
42
ラジオボタン（２）<fieldset 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><fieldset>
43
44
44
リストビュー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
47
47
検索フィルタ• フィルタ可能にするには 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> <li><a href="/doc/jquery_mobile/">Nissan</a></li> <li><a href="/doc/jquery_mobile/">Porsche</a></li> <li><a href="/doc/jquery_mobile/">Subaru</a></li> <li><a href="/doc/jquery_mobile/">Toyota</a></li> <li><a href="/doc/jquery_mobile/">Volkswagon</a></li> <li><a href="/doc/jquery_mobile/">Volvo</a></li> </ul>
48
49
49
書式とアイテム数（１）• アイテムごとにヘッダ、説明、補足、子要素のアイテム数表示などのフォーマットを用意– リストの右側に子要素の数などを表示するには、数値を書いた要素に
ui-li-count クラスを指定
– テキストの書式は、ヘッダ要素(h3など)を使用。段落(p)を重ねると文字は弱くなる
– アイテムの右端に補足的な情報を追加するには、その要素に ui-li-aside クラスを追加
50
書式とアイテム数（２）• 要素数を表示<ul data-role="listview"> <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
書式とアイテム数（３）• 書式いろいろ<ul data-role="listview"> <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
53
53
サムネイル• サムネイルをリストアイテムの左端に表示させるには、アイテムの最初の要素として画像を追加
• 画像を自動的に80pxの正方形に整形<ul data-role="listview"> <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
55
55
実際開発で苦労したところ• デフォルトでは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