jQuery Mobile 1.2 最新情報 & Tips
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Mobile 1.2 最新情報 & Tips

on

  • 56,725 views

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

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

Statistics

Views

Total Views
56,725
Views on SlideShare
56,046
Embed Views
679

Actions

Likes
30
Downloads
70
Comments
1

8 Embeds 679

http://blog.mof-brown.jp 518
http://slide.yoshiday.net 93
https://twitter.com 56
http://twitter.com 4
http://us-w1.rockmelt.com 3
http://webcache.googleusercontent.com 3
http://pinterest.com 1
http://s.deeeki.com 1
More...

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 1.2 最新情報 & Tips Presentation Transcript

  • 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/
  • 8. Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす依存性のあるものは自動的にチェックが入る最小構成では、minifyして18KB(gzip圧縮で7KB)フォームやウィジットのみを除くと、minifyして41KB(gzip圧縮で15kb)
  • 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. ウィジットのコードサイズ 項目 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. jQuery Mobile 1.2 の新機能
  • 12. jQuery Mobile 1.2 の新機能 Popup Page Loading Widget Listview Autodividers その他 jQuery 1.7.2 対応 Collapsibleのアイコンを指定可能 Fixed Toolbarの表示・非表示メソッドが変更
  • 13. Popup画面に浮いて表示されるUIツールチップやダイアログに利用できる応用すれば右上にプルダウン式のメニューのようなものが作れる!
  • 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 WidgetLoading MessageにHTMLを利用できるようにリッチなロード画面を作成できる!
  • 18. Page Loading Widget// メッセージ表示$.mobile.loading( show, { text: foo, textVisible: true, theme: a, html: ...});// メッセージ閉じる$.mobile.loading(close);
  • 19. Page Loading WidgetDeprecated $.mobile.loadingMessage $.mobile.loadingMessageTextVisible $.mobile.loadingMessageTheme $.mobile.showPageLoadingMsg() $.mobile.hidePageLoadingMsg()
  • 20. Listview Autodividers
  • 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-iconFixed 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 値。これより画面サイズが小さいと通常 のリンクとなる
  • 28. jQuery Mobileの開発に役立つ情報
  • 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 eventsRemote Debuggingテスト用としては、同時に複数端末の操作ができるAdobe Shadowもある (http://www.youtube.com/watch?v=JRlKSqe9RLk&t=110s)
  • 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. ソースコードを見よう最後はやっぱりソースコードノウハウ、バッドノウハウの宝庫モバイル向けの大抵の問題には対処されている問題があったらソースコードを読む他の実装の参考にする
  • 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 Dont 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. 開発環境を構築しよう開発に必要なプロダクト・ツールgitnode.jsnpm (grunt.js etc...)HTTP Server + PHPPhantomJS
  • 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. 開発環境を構築しよう カスタムビルド(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
  • 57. 開発環境を構築しよう 単体のユニットテストhttp://localhost/jquery-mobile/tests/unit/slider/
  • 58. 開発環境を構築しよう 100 Contributorshttps://github.com/jquery/jquery-mobile/graphs/contributors
  • 59. Thank you!! (@yoshikawa_t)
  • 60. Question?
  • 61. Question 1Q:Fireworks CS6で作成したテーマを、1.2で使用して問題が無いかどうかをお伺いしたいです。A:ThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます。
  • 62. more?
  • 63. ResourcesjQuery Mobilegithub:jquery/jquery-mobilejQuery Mobile Team MeetingjQuery Mobile 1.2 Key ChangesFetch Links (Blog)Page Speed ToolsYSlowwebpagetest.orgAdobe Shadow