jQuery Mobile(開発編)勉強会資料
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobile(開発編)勉強会資料

on

  • 1,766 views

イプロス製造業/建設業のスマホサイトを構築した際に使用したjsライブラリであるjQuery Mobileの紹介資料です。

イプロス製造業/建設業のスマホサイトを構築した際に使用したjsライブラリであるjQuery Mobileの紹介資料です。

Statistics

Views

Total Views
1,766
Views on SlideShare
1,766
Embed Views
0

Actions

Likes
2
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobile(開発編)勉強会資料 jQuery Mobile(開発編)勉強会資料 Presentation Transcript

  • jQuery Mobile (開発編) 2012/09/26 浦 信将 1
  • このスライドについて• リファレンスから順番に実際のサイト開発で使った/使えそうなものをピックアップしています。• 勉強会の資料です。実際はデモしながらやっていたため、スライドは字が多いです。 2 2
  • 最初の一行に JavaScript を書けば、 おおよそ流通しているWebブラウザやタブレットに対応した ユーザインターフェースを 提供できるようになる 3
  • 特徴1タッチパネルに最適化された UIウィジェット 4
  • 5
  • 特徴2AJAXによるアニメーション効果のついた スムーズなナビゲーションシステム 6
  • 7
  • data- で始まるHTML5で採用された属性を通じて、jQuery Mobileはウィジェットの設定を受け付ける data-role=“hogehoge” 8
  • 主な機能(1)• jQueryコア上に構築• 全てのメジャーなモバイル・プラットフォームとの互換• 軽量• モジュール構造• HTML5でのマークアップによる設定• プログレッシブ・エンハンスメント• レスポンシブ・デザイン 9
  • 主な機能(2)• Ajaxによるスムーズなナビゲーションシステム• 自動初期化• アクセシビリティ• 新たなイベント• 新しいプラグイン• 高機能なテーマフレームワーク 10
  • 対応プラットフォーム一覧(A-grade)A-grade - Full enhanced experience with Ajax-based animated pagetransitions.• 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 navigationfeatures.• 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 doesnt support media queries will receive the basic, C grade experience 13
  • ページ機構(1)jQuery Mobileの「ページ」構造は、1枚のページとして用いることも、内部的なリンク構造を持った複数のページとして作成することも可能1枚のページ・・・通常のリンク複数のページ・・・普通のHTTPリクエストでは実現でき        ないようなリッチでネイティブなリンク 14
  • ページ機構(2) 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
  • ページ機構(3)• メタ要素 Viewportブラウザに対してページを表示する際のズームレベルや方向を指示 <meta name="viewport" content="width=device-width, initial-scale=1">横幅はデバイス画面の持つピクセル数にjQuery Mobileが自動調整 16
  • ページ機構(4)携帯端末上の「ページ」ごとに 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
  • 20 20
  • ツールバー• ヘッダ 通常ページの最初の要素。一般的には、ページタイトル と、2つまでのボタンがついている• フッタ 通常ページの最後の要素。ヘッダよりも比較的自由に内 容を記述できるが、一般的にはテキストとボタンで構成 される 21
  • ヘッダ(1)• ヘッダはページ最上部に表示されるツールバーで、通常 はページのタイトルと、オプションで左端や右端にナビ ゲーション用のボタンを持つ<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
  • ヘッダ(2)• 左端に一つ前のページに戻るボタンを生成<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 &copy; 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><!-- /navbar --></div><!-- /footer --> 5つ以上のリンクを作ると、ナビゲーションバーは複数行に拡張され る 25
  • ツールバーのオプション• 固定ポジションツールバー ヘッダやフッタとしてツールバーをページ上下に固定することが出来、コン テンツはその間を自由にスクロール <div data-role="header" data-position="fixed">• フルスクリーン・ツールバー 固定ツールバー同様に上部にヘッダが固定表示 画面をタッチした際に固定でない通常モードに切り替わらず、代わりに画面 上から消える <div data-role=“footer" data-position="fixed" data-fullscreen="true"> 26
  • 27 27
  • ボタン• リンクをボタンにする アンカーリンクに 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
  • 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 クラスを指定。 5カラム• コンテナとなる要素に ui-grid-dクラスを指定。• 各グリッドにはボタンも配置可能 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>Im the collapsible set content for section B.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>Im 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
  • ラジオボタン(1)• input 要素に type=“radio” を指定し、対応す る label を記述。この時 label 要素は for 属性を使っ て input のIDと対応させる•  label を各チェックボックスのテキストに使っているた め、グループ全体の説明には filedset の legend を使う とよい 42
  • ラジオボタン(2)<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> 48
  • 49 49
  • 書式とアイテム数(1)• アイテムごとにヘッダ、説明、補足、子要素のアイテム数 表示などのフォーマットを用意 – リストの右側に子要素の数などを表示するには、数値を書いた要素に ui-li-count クラスを指定 – テキストの書式は、ヘッダ要素(h3など)を使用。段落(p)を重ねると文字 は弱くなる – アイテムの右端に補足的な情報を追加するには、その要素に ui-li-aside クラスを追加 50
  • 書式とアイテム数(2)• 要素数を表示<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
  • 書式とアイテム数(3)• 書式いろいろ<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