jQuery Mobile 最新情報 & Tips                          2012/07/19                      Web Cat Studio       Toru Yoshikawa (@y...
Who?吉川 徹/Toru Yoshikawa@yoshikawa_t   株式会社シーエー・モバイル Web先端技術フェロー   html5j.org/HTML5とか勉強会スタッフ   Google API Expert (Chrome)/C...
ちょっと宣伝…                             (仮)http://www.amazon.co.jp/dp/484433266X/
Agenda jQuery Mobile 1.1.1 の変更点 jQuery Mobile 1.2 の新機能 今後予定されている新機能 jQuery Mobile の開発に役立つ情報 パフォーマンスチューニング プラグインを作ってみよう 開発環...
jQuery Mobile 1.1.1 の変更点
jQuery Mobile 1.1.1 の変更点 Download Builder Tool リリース ページサイズが画面の3倍以上ある場合には、ページ 遷移アニメーションが無効になる  // アニメーションが無効になるページサイズの閾値を調整...
Download Builder Tool     http://jquerymobile.com/download-builder/
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす依存性のあるものは自動的にチェックが入る最小構成では、minifyして18KB(gzip圧縮で7KB)フォームやウィジットのみを...
フォームのコードサイズ                項目              uncompressed   minify   gzipButtons:Link-based                   9           4 ...
ウィジットのコードサイズ              項目                uncompressed   minify   gzipCollapsible                          5           3...
jQuery Mobile 1.2 の新機能
jQuery Mobile 1.2 の新機能 Popup Page Loading Widget Listview Autodividers その他   jQuery 1.7.2 対応   Collapsibleのアイコンを指定可能   Fix...
Popup画面に浮いて表示されるUIツールチップやダイアログに利用できる応用すれば右上にプルダウン式のメニューのようなものが作れる!
Popupポップアップリンク<a href="#popup1" data-rel="popup">ツールチップ</a>ポップアップ<!-- ツールチップ --><div data-role="popup" id="popup1">  ツールチッ...
Link                                               Popup       要素                   属性                 値                  ...
API                    Popup// ポップアップ表示$(#popup-id).popup(open);// ポップアップ表示[座標、リンク指定(オプション)]$(#popup-id).popup(open, x, y,...
Page Loading WidgetLoading MessageにHTMLを利用できるようにリッチなロード画面を作成できる!
Page Loading Widget// メッセージ表示$.mobile.loading( show, {  text: foo,  textVisible: true,  theme: a,  html: ...});// メッセージ閉じる...
Page Loading WidgetDeprecated  $.mobile.loadingMessage  $.mobile.loadingMessageTextVisible  $.mobile.loadingMessageTheme  ...
Listview Autodividers
Listview Autodividers<ul data-role="listview" data-autodividers="true">  <li><a href="#">Adam Kinkaid</a></li>  <li><a hre...
その他Collapsible   data-collapsed-icon   data-expanded-iconFixed Toolbar のメソッド変更 // 固定フッターを表示 $("[data-position=fixed]").fix...
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し、指定の場所へ埋め込む機能タブページや、引っ張ったら更新、スライドショーなどに応用できる!Response Web Designにも応用可能https://github.com/pik...
Fetch Links指定したページをAjaxで取得して埋め込む<a href="target.html" data-target="#target" data-fragment="[data-role=content]">取得する</a><d...
Fetch Links    要素                 属性                値                             概要a               href            任意    ...
jQuery Mobileの開発に役立つ情報
github: jquery-mobile   https://github.com/jquery/jquery-mobile
github: jquery-mobile Commits で変更点を追う Branches で新機能を知る Issues で問題の対応を見る バグ報告 & 機能要望 IRC: #jquerymobile @freenode.net
jQuery Mobile Team Meeting  http://jquery.org/updates  ロードマップ  プロジェクト全体の方向性の概要  新機能  クリティカルなバグへの対応など
latest build & test docs 最新の機能を試す バグフィックスを確認する http://code.jquery.com/mobile/latest/ jquery.mobile.zip http://jquerymobile...
Developer Tools
Developer Toolsモバイル用のオプションが充実  Override User Agent  Override device metrics  Emulate touch eventsRemote Debuggingテスト用としては、...
Developer ToolsRemote Debugging#Desktop> open -a Google Chrome --args --remote-debugging-port=9222#Chrome for Android and ...
ソースコードを見よう最後はやっぱりソースコードノウハウ、バッドノウハウの宝庫モバイル向けの大抵の問題には対処されている問題があったらソースコードを読む他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング jQuery Mobile だけでなくモバイル向けの チューニングも同時に行うことが重要  リクエストを減らす    CSS Sprite, dataURI, Concat, Web Storage, AppCach...
パフォーマンスチューニングAjaxは可能な限り活かす data-ajax="false" -> 700~800ms data-ajax="true" -> 100ms※ 最小構成のページで測定@さくらレンタルサーバー当然ながら、カスタムビルドで...
パフォーマンスチューニング jQuery Mobile のチューニング  Page Cache  Page Prefetch  Lazy DOM Loading  Lazy JS Loading  Fast Click  Disable Pag...
パフォーマンスチューニングPage Cache<div data-role="page" data-dom-cache="true">  …</div>Page Prefetch<a href="page2.html" data-prefetc...
パフォーマンスチューニングLazy DOM Loading<div class="lazy" style="display: none;">  …</div>$(document).on(pageshow, #page-id, function...
パフォーマンスチューニングLazy JS Loading<script type="lazy" src="script.js"></script>$(document).on(pageshow, #page-id, function(){  v...
パフォーマンスチューニングFast Click (Skip 300ms delay)$(document).on(vclick, a, function(e){  e.preventDefault();  $.mobile.changePage...
パフォーマンスチューニングDisable page animation and scroll back, hover style$(document).on(mobileinit, function(){  $.mobile.defaultPa...
パフォーマンスチューニング ツール Developer Tools YSlow Page Speed webpagetest.org
プラグイン開発
プラグイン開発テンプレート/* jQuery Mobile Framework : "customwidget" plugin * Author: Toru Yoshikawa * Dual licensed under the MIT or ...
プラグイン開発1. テンプレートから"customwidget"を好きなプラグイン名に書き換え   ✓   記号なし、すべて小文字2. 最初のイニシャライズは _create: function(){ ... } に記述する   ✓   アンダ...
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット 自作プラグインを組み込んでファイルをひとつにまとめることができ る 変更したスタイルを組み込んでひとつにまとめることができる もし、jQuery Mobile自体に手を入れても本家に追随しやすい ...
開発環境を構築しよう開発に必要なプロダクト・ツールgitnode.jsnpm (grunt.js etc...)HTTP Server + PHPPhantomJS
開発環境を構築しよう ビルドの準備git clone https://github.com/jquery/jquery-mobile.gitcd jquery-mobilenpm install -d  ビルドmakegrunt js //or...
開発環境を構築しよう     カスタムビルド(JS)js/jquery.mobile.js を編集するdefine([  require,  ./widgets/loader,  ./jquery.mobile.navigation,  ./j...
開発環境を構築しよう    カスタムビルド(CSS)css/default フォルトをコピーして custom-themeを作成する。作成したフォルダのcssを編集するTHEME=custom-theme grunt css
開発環境を構築しよう   テスト(Qunit)JUNIT_OUTPUT=build/test-­‐results/	  ROOT_DOMAIN=http://localhost/jquery-­‐mobile/	  grunt	  test
開発環境を構築しよう 単体のユニットテストhttp://localhost/jquery-mobile/tests/unit/slider/
開発環境を構築しよう              100 Contributorshttps://github.com/jquery/jquery-mobile/graphs/contributors
Thank you!! (@yoshikawa_t)
Question?
Question 1Q:Fireworks CS6で作成したテーマを、1.2で使用して問題が無いかどうかをお伺いしたいです。A:ThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます。
more?
ResourcesjQuery Mobilegithub:jquery/jquery-mobilejQuery Mobile Team MeetingjQuery Mobile 1.2 Key ChangesFetch Links (Blog)...
Upcoming SlideShare
Loading in...5
×

jQuery Mobile 1.2 最新情報 & Tips

57,959

Published on

2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。

1 Comment
30 Likes
Statistics
Notes
No Downloads
Views
Total Views
57,959
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
71
Comments
1
Likes
30
Embeds 0
No embeds

No notes for slide

jQuery Mobile 1.2 最新情報 & Tips

  1. 1. jQuery Mobile 最新情報 & Tips 2012/07/19 Web Cat Studio Toru Yoshikawa (@yoshikawa_t)
  2. 2. Who?吉川 徹/Toru Yoshikawa@yoshikawa_t 株式会社シーエー・モバイル Web先端技術フェロー html5j.org/HTML5とか勉強会スタッフ Google API Expert (Chrome)/Chrome API Developers JP Sublime Text 2 Japan Users Group allWebクリエイター塾/jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/
  3. 3. ちょっと宣伝… (仮)http://www.amazon.co.jp/dp/484433266X/
  4. 4. Agenda jQuery Mobile 1.1.1 の変更点 jQuery Mobile 1.2 の新機能 今後予定されている新機能 jQuery Mobile の開発に役立つ情報 パフォーマンスチューニング プラグインを作ってみよう 開発環境を構築しようSample files - http://bit.ly/NAVph7
  5. 5. jQuery Mobile 1.1.1 の変更点
  6. 6. jQuery Mobile 1.1.1 の変更点 Download Builder Tool リリース ページサイズが画面の3倍以上ある場合には、ページ 遷移アニメーションが無効になる // アニメーションが無効になるページサイズの閾値を調整 $.mobile.getMaxScrollForTransition = 480; // 480px 基本的にはバグフィクスが中心
  7. 7. Download Builder Tool http://jquerymobile.com/download-builder/
  8. 8. Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす依存性のあるものは自動的にチェックが入る最小構成では、minifyして18KB(gzip圧縮で7KB)フォームやウィジットのみを除くと、minifyして41KB(gzip圧縮で15kb)
  9. 9. フォームのコードサイズ 項目 uncompressed minify gzipButtons:Link-based 9 4 2Controlgroups 2 1 0.8Fieldcontainers 1 0.4 0.4Buttons:Input or button-based 4 2 1Checkboxes & Radio buttons 6 3 1Selects 7 4 2Selects: Custom menus 16 8 3Slider 12 6 2Text Inputs & Textareas 6 3 1※ JSのみの算出(単位はKB)
  10. 10. ウィジットのコードサイズ 項目 uncompressed minify gzipCollapsible 5 3 1Collapsible Sets (Accordions) 4 2 0.9Dialogs 4 2 1Toolbars: Fixed 10 5 2Grid Layouts (Columns) 2 0.7 0.5Listview 15 7 3Listview:Filter 3 2 0.9Navbars 2 1 0.7※ JSのみの算出(単位はKB)
  11. 11. jQuery Mobile 1.2 の新機能
  12. 12. jQuery Mobile 1.2 の新機能 Popup Page Loading Widget Listview Autodividers その他 jQuery 1.7.2 対応 Collapsibleのアイコンを指定可能 Fixed Toolbarの表示・非表示メソッドが変更
  13. 13. Popup画面に浮いて表示されるUIツールチップやダイアログに利用できる応用すれば右上にプルダウン式のメニューのようなものが作れる!
  14. 14. Popupポップアップリンク<a href="#popup1" data-rel="popup">ツールチップ</a>ポップアップ<!-- ツールチップ --><div data-role="popup" id="popup1"> ツールチップを表示する</div>
  15. 15. Link Popup 要素 属性 値 概要a href #[id] ポップアップ要素のIDを指定する 設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション ポップアップの表示位置を指定する。 origin, window,data-position-to origin origin: リンクの中央、window: ページの中央 [selector] [selector]: セレクターで指定された要素の中央Popup 要素 属性 値 概要div data-role popup ポップアップ 設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション(リンクが優先)
  16. 16. API Popup// ポップアップ表示$(#popup-id).popup(open);// ポップアップ表示[座標、リンク指定(オプション)]$(#popup-id).popup(open, x, y, $link);// ポップアップ閉じる$(#popup-id).popup(close);イベント popupbeforeopen popupafteropen popupafterclose
  17. 17. Page Loading WidgetLoading MessageにHTMLを利用できるようにリッチなロード画面を作成できる!
  18. 18. Page Loading Widget// メッセージ表示$.mobile.loading( show, { text: foo, textVisible: true, theme: a, html: ...});// メッセージ閉じる$.mobile.loading(close);
  19. 19. Page Loading WidgetDeprecated $.mobile.loadingMessage $.mobile.loadingMessageTextVisible $.mobile.loadingMessageTheme $.mobile.showPageLoadingMsg() $.mobile.hidePageLoadingMsg()
  20. 20. Listview Autodividers
  21. 21. Listview Autodividers<ul data-role="listview" data-autodividers="true"> <li><a href="#">Adam Kinkaid</a></li> <li><a href="#">Alex Wickerham</a></li> ...</ul>デフォルトでは、先頭1文字を区切りにするリスト区切り挿入の方法をカスタマイズする$.mobile.listview.prototype.options.autodividers =function($li){ var dividerText = リスト区切り名; return divierText;};
  22. 22. その他Collapsible data-collapsed-icon data-expanded-iconFixed Toolbar のメソッド変更 // 固定フッターを表示 $("[data-position=fixed]").fixedtoolbar(show); Deprecated $.mobile.fixedToolbars.show() $.mobile.fixedToolbars.hide()Key changes (http://test.jqmobile.de/commit12a.html)
  23. 23. 今後予定されている新機能
  24. 24. Fetch Links
  25. 25. Fetch Linksリンク先のコンテンツをAjaxで取得し、指定の場所へ埋め込む機能タブページや、引っ張ったら更新、スライドショーなどに応用できる!Response Web Designにも応用可能https://github.com/pikotea/jquery-mobile-fetchlinks/http://d.hatena.ne.jp/pikotea/20120411/1334144330
  26. 26. Fetch Links指定したページをAjaxで取得して埋め込む<a href="target.html" data-target="#target" data-fragment="[data-role=content]">取得する</a><div id="target"> ここにajaxで取得した要素が入ります。</div>
  27. 27. Fetch Links 要素 属性 値 概要a href 任意 フェッチ先のURLを指定する 設定 値 既定 備考 フェッチしたデータを埋め込む先の要素data-target [selector] をセレクターで指定する フェッチしたデータのうち切り出す要素data-fragment [selector] をセレクターで指定する データの埋め込み方法を指定するdata-method 備考参照 html (html, append, prepend, replace, before, after) データの埋め込みを行う画面サイズの閾data-breakpoint ピクセル 600 値。これより画面サイズが小さいと通常 のリンクとなる
  28. 28. jQuery Mobileの開発に役立つ情報
  29. 29. github: jquery-mobile https://github.com/jquery/jquery-mobile
  30. 30. github: jquery-mobile Commits で変更点を追う Branches で新機能を知る Issues で問題の対応を見る バグ報告 & 機能要望 IRC: #jquerymobile @freenode.net
  31. 31. jQuery Mobile Team Meeting http://jquery.org/updates ロードマップ プロジェクト全体の方向性の概要 新機能 クリティカルなバグへの対応など
  32. 32. latest build & test docs 最新の機能を試す バグフィックスを確認する http://code.jquery.com/mobile/latest/ jquery.mobile.zip http://jquerymobile.com/test/
  33. 33. Developer Tools
  34. 34. Developer Toolsモバイル用のオプションが充実 Override User Agent Override device metrics Emulate touch eventsRemote Debuggingテスト用としては、同時に複数端末の操作ができるAdobe Shadowもある (http://www.youtube.com/watch?v=JRlKSqe9RLk&t=110s)
  35. 35. Developer ToolsRemote Debugging#Desktop> open -a Google Chrome --args --remote-debugging-port=9222#Chrome for Android and iOS> adb forward tcp:9222 localabstract:chrome_devtools_remote
  36. 36. ソースコードを見よう最後はやっぱりソースコードノウハウ、バッドノウハウの宝庫モバイル向けの大抵の問題には対処されている問題があったらソースコードを読む他の実装の参考にする
  37. 37. パフォーマンスチューニング
  38. 38. パフォーマンスチューニング jQuery Mobile だけでなくモバイル向けの チューニングも同時に行うことが重要 リクエストを減らす CSS Sprite, dataURI, Concat, Web Storage, AppCache ファイル容量を減らす Scale Images, Compressed JPEG, Minify JavaScript and CSS DOMを減らす DOM操作を最小限にして、まとめてレンダリングする ハードウェアアクセラレーション -webkit-overflow-scrolling: touch, -webkit-transform: translate | translate3d
  39. 39. パフォーマンスチューニングAjaxは可能な限り活かす data-ajax="false" -> 700~800ms data-ajax="true" -> 100ms※ 最小構成のページで測定@さくらレンタルサーバー当然ながら、カスタムビルドですべてのフォーム、ウィジットをはずした状態が最速
  40. 40. パフォーマンスチューニング jQuery Mobile のチューニング Page Cache Page Prefetch Lazy DOM Loading Lazy JS Loading Fast Click Disable Page Animation Disable Scroll Back Disable Hover Style Custom Build Dont use custom selects and nested lists
  41. 41. パフォーマンスチューニングPage Cache<div data-role="page" data-dom-cache="true"> …</div>Page Prefetch<a href="page2.html" data-prefetch>ページ2へ</a>// JavaScript$.mobile.loadPage(page2.html);
  42. 42. パフォーマンスチューニングLazy DOM Loading<div class="lazy" style="display: none;"> …</div>$(document).on(pageshow, #page-id, function(){ $(.lazy).show();}); ページの大きさは、ページ遷移のアニメーションの パフォーマンスに大きく影響する
  43. 43. パフォーマンスチューニングLazy JS Loading<script type="lazy" src="script.js"></script>$(document).on(pageshow, #page-id, function(){ var lazy = $(script[type="lazy"]); lazy.attr(type, text/javascript).remove().appendTo(head);});
  44. 44. パフォーマンスチューニングFast Click (Skip 300ms delay)$(document).on(vclick, a, function(e){ e.preventDefault(); $.mobile.changePage($(this).jqmData(href) || $(this).attr(href), { transition: $(this).jqmData(transition) });});
  45. 45. パフォーマンスチューニングDisable page animation and scroll back, hover style$(document).on(mobileinit, function(){ $.mobile.defaultPageTransition = none; $.mobile.minScrollBack = 9999; $.mobile.buttonMarkup.hoverDelay = 5000;});
  46. 46. パフォーマンスチューニング ツール Developer Tools YSlow Page Speed webpagetest.org
  47. 47. プラグイン開発
  48. 48. プラグイン開発テンプレート/* jQuery Mobile Framework : "customwidget" plugin * Author: Toru Yoshikawa * Dual licensed under the MIT or GPL Version 2 licenses. * http:// */(function( $, undefined ) { $.widget( "mobile.customwidget", $.mobile.widget, { options: { theme: null, initSelector: ":jqmData(role=customwidget)" // widget selector }, _create: function() { // create elements // var m = this.element; }, refresh: function() { // call target.customwidget(refresh); }, enable: function() { // call target.customwidget(enable); }, disable: function() { // call target.customwidget(disable); } }); // auto self-init widgets $( document ).bind( "pagecreate create", function( e ){ $( $.mobile.customwidget.prototype.options.initSelector, e.target ).customwidget(); });})( jQuery );
  49. 49. プラグイン開発1. テンプレートから"customwidget"を好きなプラグイン名に書き換え ✓ 記号なし、すべて小文字2. 最初のイニシャライズは _create: function(){ ... } に記述する ✓ アンダーバー付きのfunctionはイベントハンドラ ✓ this.elementに装飾元の要素を取得できる3. メソッドを定義する場合には、 foo: function() { ... } に定義する ✓ functionは、customwidget(foo)で呼び出し ✓ 引数は、上記呼び出しの第2引数以降が渡される4. 要素に data-role="customwidget" を指定して利用する
  50. 50. 開発環境を構築しよう
  51. 51. 開発環境を構築しよう開発環境を構築するメリット 自作プラグインを組み込んでファイルをひとつにまとめることができ る 変更したスタイルを組み込んでひとつにまとめることができる もし、jQuery Mobile自体に手を入れても本家に追随しやすい (gitのマージ) いつでも本家に Pull Request できる(バグは 自分で直す気勢いで!)
  52. 52. 開発環境を構築しよう開発に必要なプロダクト・ツールgitnode.jsnpm (grunt.js etc...)HTTP Server + PHPPhantomJS
  53. 53. 開発環境を構築しよう ビルドの準備git clone https://github.com/jquery/jquery-mobile.gitcd jquery-mobilenpm install -d ビルドmakegrunt js //orgrunt css //orgrunt docs //or 確認(ルート直下に配置した場合)http://localhost/jquery-mobile/index.html
  54. 54. 開発環境を構築しよう カスタムビルド(JS)js/jquery.mobile.js を編集するdefine([ require, ./widgets/loader, ./jquery.mobile.navigation, ./jquery.mobile.navigation.pushstate, ./jquery.mobile.transitions, ./jquery.mobile.degradeInputs, ./widgets/dialog, ./widgets/page.sections, ...], function( require ) { require( [ ./jquery.mobile.init ], function() {} );});
  55. 55. 開発環境を構築しよう カスタムビルド(CSS)css/default フォルトをコピーして custom-themeを作成する。作成したフォルダのcssを編集するTHEME=custom-theme grunt css
  56. 56. 開発環境を構築しよう テスト(Qunit)JUNIT_OUTPUT=build/test-­‐results/  ROOT_DOMAIN=http://localhost/jquery-­‐mobile/  grunt  test
  57. 57. 開発環境を構築しよう 単体のユニットテストhttp://localhost/jquery-mobile/tests/unit/slider/
  58. 58. 開発環境を構築しよう 100 Contributorshttps://github.com/jquery/jquery-mobile/graphs/contributors
  59. 59. Thank you!! (@yoshikawa_t)
  60. 60. Question?
  61. 61. Question 1Q:Fireworks CS6で作成したテーマを、1.2で使用して問題が無いかどうかをお伺いしたいです。A:ThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます。
  62. 62. more?
  63. 63. ResourcesjQuery Mobilegithub:jquery/jquery-mobilejQuery Mobile Team MeetingjQuery Mobile 1.2 Key ChangesFetch Links (Blog)Page Speed ToolsYSlowwebpagetest.orgAdobe Shadow
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×