jQuery Mobile 1.2 最新情報 & Tips

jQuery Mobile 最新情報 & Tips

2012/07/19
Web Cat Studio
Toru Yoshikawa (@yoshikawa_t)

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/

ちょっと宣伝…

（仮）

http://www.amazon.co.jp/dp/484433266X/

Agenda
jQuery Mobile 1.1.1 の変更点

jQuery Mobile 1.2 の新機能

今後予定されている新機能

jQuery Mobile の開発に役立つ情報

パフォーマンスチューニング

プラグインを作ってみよう

開発環境を構築しよう

Sample files - http://bit.ly/NAVph7

Download Builder Tool リリース

ページサイズが画面の3倍以上ある場合には、ページ
遷移アニメーションが無効になる

// アニメーションが無効になるページサイズの閾値を調整
$.mobile.getMaxScrollForTransition = 480; // 480px

基本的にはバグフィクスが中心

Download Builder Tool

http://jquerymobile.com/download-builder/

Download Builder Tool
利用していない機能やユーザーインターフェースを除
外してソースコードを減らす

依存性のあるものは自動的にチェックが入る

最小構成では、minifyして18KB（gzip圧縮で7KB）

フォームやウィジットのみを除くと、minifyして
41KB（gzip圧縮で15kb）

フォームのコードサイズ
項目 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)

ウィジットのコードサイズ
項目 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)

Popup

Page Loading Widget

Listview Autodividers

その他

jQuery 1.7.2 対応

Collapsibleのアイコンを指定可能

Fixed Toolbarの表示・非表示メソッドが変更

Popup

画面に浮いて表示されるUI

ツールチップやダイアログに
利用できる

応用すれば右上にプルダウン
式のメニューのようなものが
作れる！

Popup
ポップアップリンク
<a href="#popup1" data-rel="popup">ツールチップ</a>

ポップアップ

<div data-role="popup" id="popup1">
ツールチップを表示する
</div>

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 ポップアップの表示アニメーション（リンクが優先）

API
Popup
// ポップアップ表示
$('#popup-id').popup('open');

// ポップアップ表示[座標、リンク指定（オプション）]
$('#popup-id').popup('open', x, y, $link);

// ポップアップ閉じる
$('#popup-id').popup('close');

イベント
popupbeforeopen

popupafteropen

popupafterclose

Page Loading Widget

Loading MessageにHTMLを利用
できるように

リッチなロード画面を作成できる！

Page Loading Widget

// メッセージ表示
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'a',
html: '...'
});

// メッセージ閉じる
$.mobile.loading('close');

Page Loading Widget
Deprecated
$.mobile.loadingMessage

$.mobile.loadingMessageTextVisible

$.mobile.loadingMessageTheme

$.mobile.showPageLoadingMsg()

$.mobile.hidePageLoadingMsg()

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

その他
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)

今後予定されている新機能

Fetch Links
リンク先のコンテンツをAjaxで取得し、指定の場所へ埋め込む機能

タブページや、引っ張ったら更新、スライドショーなどに応用できる！

Response Web Designにも応用可能

https://github.com/pikotea/jquery-mobile-fetchlinks/

http://d.hatena.ne.jp/pikotea/20120411/1334144330

Fetch Links
指定したページをAjaxで取得して埋め込む
<a href="target.html" data-target="#target" data-
fragment="[data-role='content']">取得する</a>

<div id="target">
ここにajaxで取得した要素が入ります。
</div>

Fetch Links
a href 任意フェッチ先のURLを指定する

フェッチしたデータを埋め込む先の要素
data-target [selector]
をセレクターで指定する
フェッチしたデータのうち切り出す要素
data-fragment [selector]
をセレクターで指定する
データの埋め込み方法を指定する
data-method 備考参照 html （html, append, prepend, replace, before,
after)
データの埋め込みを行う画面サイズの閾
data-breakpoint ピクセル 600 値。これより画面サイズが小さいと通常
のリンクとなる

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.com/test/

Developer Tools
モバイル用のオプションが充実

Override User Agent

Override device metrics

Emulate touch events

Remote Debugging

テスト用としては、同時に複数端末の操作ができる
Adobe Shadowもある (http://www.youtube.com/
watch?v=JRlKSqe9RLk&t=110s)

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

ソースコードを見よう
最後はやっぱりソースコード

ノウハウ、バッドノウハウの宝庫

モバイル向けの大抵の問題には対処されている

問題があったらソースコードを読む

他の実装の参考にする

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

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

Disable Scroll Back

Disable Hover Style

Custom Build

Don't use custom selects and nested lists

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');

Lazy DOM Loading
<div class="lazy" style="display: none;">
…
</div>

$(document).on('pageshow', '#page-id', function(){
$('.lazy').show();
});

ページの大きさは、ページ遷移のアニメーションの
パフォーマンスに大きく影響する

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');
});

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')
});
});

Disable page animation and scroll back, hover style

$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.minScrollBack = 9999;
$.mobile.buttonMarkup.hoverDelay = 5000;
});

ツール
Developer Tools

YSlow

Page Speed

webpagetest.org

プラグイン開発
テンプレート
/* 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 );

プラグイン開発
1. テンプレートから"customwidget"を好きなプラグイン名に書き換え

✓ 記号なし、すべて小文字

2. 最初のイニシャライズは _create: function(){ ... } に記述する

✓ アンダーバー付きのfunctionはイベントハンドラ

✓ this.elementに装飾元の要素を取得できる

3. メソッドを定義する場合には、 foo: function() { ... } に定義する

✓ functionは、customwidget('foo')で呼び出し

✓ 引数は、上記呼び出しの第2引数以降が渡される

4. 要素に data-role="customwidget" を指定して利用する

開発環境を構築するメリット
自作プラグインを組み込んでファイルをひとつにまとめることができ
る

変更したスタイルを組み込んでひとつにまとめることができる

もし、jQuery Mobile自体に手を入れても本家に追随しやすい
（gitのマージ）

いつでも本家に Pull Request できる（バグは
自分で直す気勢いで！）

開発に必要なプロダクト・ツール
git

node.js

npm (grunt.js etc...)

HTTP Server + PHP

PhantomJS

ビルドの準備
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

カスタムビルド（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() {} );
});

カスタムビルド（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 Contributors
https://github.com/jquery/jquery-mobile/graphs/contributors

Question 1

Q:
Fireworks CS6で作成したテーマを、1.2で使
用して問題が無いかどうかをお伺いしたいです。

A:
ThemeRoller で旧バージョンのテーマファイ
ルをアップグレードすることができます。

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

jQuery Mobile 1.2 最新情報 & Tips

More Related Content

jQuery Mobile 1.2 最新情報 & Tips