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

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 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の表示・非表示メソッドが変更

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 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()

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-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 値。これより画面サイズが小さいと通常
のリンクとなる

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 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

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
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

57. 開発環境を構築しよう
単体のユニットテスト
http://localhost/jquery-mobile/tests/unit/slider/

58. 開発環境を構築しよう
100 Contributors
https://github.com/jquery/jquery-mobile/graphs/contributors

59. Thank you!!
(@yoshikawa_t)

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