jQuery Mobile 1.2 最新情報 & Tips
•
31 likes•51,074 views
2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to jQuery Mobile 1.2 最新情報 & Tips
Similar to jQuery Mobile 1.2 最新情報 & Tips (20)
More from yoshikawa_t
More from yoshikawa_t (20)
jQuery Mobile 1.2 最新情報 & Tips
- 1. jQuery Mobile 最新情報 & Tips 2012/07/19 Web Cat Studio Toru Yoshikawa (@yoshikawa_t)
- 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. ちょっと宣伝… （仮） http://www.amazon.co.jp/dp/484433266X/
- 4. Agenda jQuery Mobile 1.1.1 の変更点 jQuery Mobile 1.2 の新機能 今後予定されている新機能 jQuery Mobile の開発に役立つ情報 パフォーマンスチューニング プラグインを作ってみよう 開発環境を構築しよう Sample files - http://bit.ly/NAVph7
- 5. jQuery Mobile 1.1.1 の変更点
- 6. jQuery Mobile 1.1.1 の変更点 Download Builder Tool リリース ページサイズが画面の3倍以上ある場合には、ページ 遷移アニメーションが無効になる // アニメーションが無効になるページサイズの閾値を調整 $.mobile.getMaxScrollForTransition = 480; // 480px 基本的にはバグフィクスが中心
- 7. Download Builder Tool http://jquerymobile.com/download-builder/
- 9. フォームのコードサイズ 項目 uncompressed minify gzip Buttons:Link-based 9 4 2 Controlgroups 2 1 0.8 Fieldcontainers 1 0.4 0.4 Buttons:Input or button-based 4 2 1 Checkboxes & Radio buttons 6 3 1 Selects 7 4 2 Selects: Custom menus 16 8 3 Slider 12 6 2 Text Inputs & Textareas 6 3 1 ※ JSのみの算出（単位はKB)
- 10. ウィジットのコードサイズ 項目 uncompressed minify gzip Collapsible 5 3 1 Collapsible Sets (Accordions) 4 2 0.9 Dialogs 4 2 1 Toolbars: Fixed 10 5 2 Grid Layouts (Columns) 2 0.7 0.5 Listview 15 7 3 Listview:Filter 3 2 0.9 Navbars 2 1 0.7 ※ JSのみの算出（単位はKB)
- 11. jQuery Mobile 1.2 の新機能
- 12. jQuery Mobile 1.2 の新機能 Popup Page Loading Widget Listview Autodividers その他 jQuery 1.7.2 対応 Collapsibleのアイコンを指定可能 Fixed Toolbarの表示・非表示メソッドが変更
- 14. Popup ポップアップリンク <a href="#popup1" data-rel="popup">ツールチップ</a> ポップアップ <!-- ツールチップ --> <div data-role="popup" id="popup1"> ツールチップを表示する </div>
- 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. API Popup // ポップアップ表示 $('#popup-id').popup('open'); // ポップアップ表示[座標、リンク指定（オプション）] $('#popup-id').popup('open', x, y, $link); // ポップアップ閉じる $('#popup-id').popup('close'); イベント popupbeforeopen popupafteropen popupafterclose
- 17. Page Loading Widget Loading MessageにHTMLを利用 できるように リッチなロード画面を作成できる！
- 18. Page Loading Widget // メッセージ表示 $.mobile.loading( 'show', { text: 'foo', textVisible: true, theme: 'a', html: '...' }); // メッセージ閉じる $.mobile.loading('close');
- 19. Page Loading Widget Deprecated $.mobile.loadingMessage $.mobile.loadingMessageTextVisible $.mobile.loadingMessageTheme $.mobile.showPageLoadingMsg() $.mobile.hidePageLoadingMsg()
- 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. その他 Collapsible data-collapsed-icon data-expanded-icon Fixed Toolbar のメソッド変更 // 固定フッターを表示 $("[data-position='fixed']").fixedtoolbar('show'); Deprecated $.mobile.fixedToolbars.show() $.mobile.fixedToolbars.hide() Key changes (http://test.jqmobile.de/commit12a.html)
- 23. 今後予定されている新機能
- 24. Fetch Links
- 25. Fetch Links リンク先のコンテンツをAjaxで取得し、指定の場所へ埋め込む機能 タブページや、引っ張ったら更新、スライドショーなどに応用できる！ Response Web Designにも応用可能 https://github.com/pikotea/jquery-mobile-fetchlinks/ http://d.hatena.ne.jp/pikotea/20120411/1334144330
- 26. Fetch Links 指定したページをAjaxで取得して埋め込む <a href="target.html" data-target="#target" data- fragment="[data-role='content']">取得する</a> <div id="target"> ここにajaxで取得した要素が入ります。 </div>
- 27. Fetch Links 要素 属性 値 概要 a href 任意 フェッチ先のURLを指定する 設定 値 既定 備考 フェッチしたデータを埋め込む先の要素 data-target [selector] をセレクターで指定する フェッチしたデータのうち切り出す要素 data-fragment [selector] をセレクターで指定する データの埋め込み方法を指定する data-method 備考参照 html （html, append, prepend, replace, before, after) データの埋め込みを行う画面サイズの閾 data-breakpoint ピクセル 600 値。これより画面サイズが小さいと通常 のリンクとなる
- 29. github: jquery-mobile https://github.com/jquery/jquery-mobile
- 30. github: jquery-mobile Commits で変更点を追う Branches で新機能を知る Issues で問題の対応を見る バグ報告 & 機能要望 IRC: #jquerymobile @freenode.net
- 31. jQuery Mobile Team Meeting http://jquery.org/updates ロードマップ プロジェクト全体の方向性の概要 新機能 クリティカルなバグへの対応など
- 32. latest build & test docs 最新の機能を試す バグフィックスを確認する http://code.jquery.com/mobile/latest/ jquery.mobile.zip http://jquerymobile.com/test/
- 33. Developer Tools
- 34. Developer Tools モバイル用のオプションが充実 Override User Agent Override device metrics Emulate touch events Remote Debugging テスト用としては、同時に複数端末の操作ができる Adobe Shadowもある (http://www.youtube.com/ watch?v=JRlKSqe9RLk&t=110s)
- 35. Developer Tools Remote Debugging #Desktop > open -a Google Chrome --args --remote-debugging-port=9222 #Chrome for Android and iOS > adb forward tcp:9222 localabstract:chrome_devtools_remote
- 37. パフォーマンスチューニング
- 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. パフォーマンスチューニング Ajaxは可能な限り活かす data-ajax="false" -> 700~800ms data-ajax="true" -> 100ms ※ 最小構成のページで測定@さくらレンタルサーバー 当然ながら、カスタムビルドですべての フォーム、ウィジットをはずした状態が最速
- 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 Don't use custom selects and nested lists
- 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. パフォーマンスチューニング Lazy DOM Loading <div class="lazy" style="display: none;"> … </div> $(document).on('pageshow', '#page-id', function(){ $('.lazy').show(); }); ページの大きさは、ページ遷移のアニメーションの パフォーマンスに大きく影響する
- 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. パフォーマンスチューニング 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. パフォーマンスチューニング Disable page animation and scroll back, hover style $(document).on('mobileinit', function(){ $.mobile.defaultPageTransition = 'none'; $.mobile.minScrollBack = 9999; $.mobile.buttonMarkup.hoverDelay = 5000; });
- 46. パフォーマンスチューニング ツール Developer Tools YSlow Page Speed webpagetest.org
- 47. プラグイン開発
- 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. プラグイン開発 1. テンプレートから"customwidget"を好きなプラグイン名に書き換え ✓ 記号なし、すべて小文字 2. 最初のイニシャライズは _create: function(){ ... } に記述する ✓ アンダーバー付きのfunctionはイベントハンドラ ✓ this.elementに装飾元の要素を取得できる 3. メソッドを定義する場合には、 foo: function() { ... } に定義する ✓ functionは、customwidget('foo')で呼び出し ✓ 引数は、上記呼び出しの第2引数以降が渡される 4. 要素に data-role="customwidget" を指定して利用する
- 50. 開発環境を構築しよう
- 51. 開発環境を構築しよう 開発環境を構築するメリット 自作プラグインを組み込んでファイルをひとつにまとめることができ る 変更したスタイルを組み込んでひとつにまとめることができる もし、jQuery Mobile自体に手を入れても本家に追随しやすい （gitのマージ） いつでも本家に Pull Request できる（バグは 自分で直す気勢いで！）
- 52. 開発環境を構築しよう 開発に必要なプロダクト・ツール git node.js npm (grunt.js etc...) HTTP Server + PHP PhantomJS
- 53. 開発環境を構築しよう ビルドの準備 git clone https://github.com/jquery/jquery-mobile.git cd jquery-mobile npm install -d ビルド make grunt js //or grunt css //or grunt docs //or 確認（ルート直下に配置した場合） http://localhost/jquery-mobile/index.html
- 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. 開発環境を構築しよう カスタムビルド（CSS） css/default フォルトをコピーして custom-theme を作成する。作成したフォルダのcssを編集する THEME=custom-theme grunt css
- 56. 開発環境を構築しよう テスト（Qunit） JUNIT_OUTPUT=build/test-‐results/ ROOT_DOMAIN=http://localhost/ jquery-‐mobile/ grunt test
- 58. 開発環境を構築しよう 100 Contributors https://github.com/jquery/jquery-mobile/graphs/contributors
- 60. Question?
- 61. Question 1 Q: Fireworks CS6で作成したテーマを、1.2で使 用して問題が無いかどうかをお伺いしたいです。 A: ThemeRoller で旧バージョンのテーマファイ ルをアップグレードすることができます。
- 62. more?
- 63. Resources jQuery Mobile github:jquery/jquery-mobile jQuery Mobile Team Meeting jQuery Mobile 1.2 Key Changes Fetch Links (Blog) Page Speed Tools YSlow webpagetest.org Adobe Shadow