jquery mobile 1.2 最新情報 & tips
DESCRIPTION
2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。TRANSCRIPT
jQuery Mobile 最新情報 amp Tips
20120719Web Cat Studio
Toru Yoshikawa (yoshikawa_t)
Who吉川 徹Toru Yoshikawa
yoshikawa_t
株式会社シーエーモバイル Web先端技術フェロー
html5jorgHTML5とか勉強会スタッフ
Google API Expert (Chrome)Chrome API Developers JP
Sublime Text 2 Japan Users Group
allWebクリエイター塾jQuery Mobile担当講師
Blog httpdhatenanejppikotea
ちょっと宣伝hellip
httpwwwamazoncojpdp484433266X
（仮）
AgendajQuery Mobile 111 の変更点
jQuery Mobile 12 の新機能
今後予定されている新機能
jQuery Mobile の開発に役立つ情報
パフォーマンスチューニング
プラグインを作ってみよう
開発環境を構築しよう
Sample files - httpbitlyNAVph7
jQuery Mobile 111 の変更点
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Who吉川 徹Toru Yoshikawa
yoshikawa_t
株式会社シーエーモバイル Web先端技術フェロー
html5jorgHTML5とか勉強会スタッフ
Google API Expert (Chrome)Chrome API Developers JP
Sublime Text 2 Japan Users Group
allWebクリエイター塾jQuery Mobile担当講師
Blog httpdhatenanejppikotea
ちょっと宣伝hellip
httpwwwamazoncojpdp484433266X
（仮）
AgendajQuery Mobile 111 の変更点
jQuery Mobile 12 の新機能
今後予定されている新機能
jQuery Mobile の開発に役立つ情報
パフォーマンスチューニング
プラグインを作ってみよう
開発環境を構築しよう
Sample files - httpbitlyNAVph7
jQuery Mobile 111 の変更点
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
ちょっと宣伝hellip
httpwwwamazoncojpdp484433266X
（仮）
AgendajQuery Mobile 111 の変更点
jQuery Mobile 12 の新機能
今後予定されている新機能
jQuery Mobile の開発に役立つ情報
パフォーマンスチューニング
プラグインを作ってみよう
開発環境を構築しよう
Sample files - httpbitlyNAVph7
jQuery Mobile 111 の変更点
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
AgendajQuery Mobile 111 の変更点
jQuery Mobile 12 の新機能
今後予定されている新機能
jQuery Mobile の開発に役立つ情報
パフォーマンスチューニング
プラグインを作ってみよう
開発環境を構築しよう
Sample files - httpbitlyNAVph7
jQuery Mobile 111 の変更点
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobile 111 の変更点
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobile 111 の変更点Download Builder Tool リリース
ページサイズが画面の3倍以上ある場合にはページ遷移アニメーションが無効になる
基本的にはバグフィクスが中心
アニメーションが無効になるページサイズの閾値を調整$mobilegetMaxScrollForTransition = 480 480px
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Download Builder Tool
httpjquerymobilecomdownload-builder
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Download Builder Tool利用していない機能やユーザーインターフェースを除外してソースコードを減らす
依存性のあるものは自動的にチェックが入る
最小構成ではminifyして18KB（gzip圧縮で7KB）
フォームやウィジットのみを除くとminifyして41KB（gzip圧縮で15kb）
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
フォームのコードサイズ項目 uncompressed minify gzip
ButtonsLink-based 9 4 2
Controlgroups 2 1 08
Fieldcontainers 1 04 04
ButtonsInput or button-based 4 2 1
Checkboxes amp Radio buttons 6 3 1
Selects 7 4 2
Selects Custom menus 16 8 3
Slider 12 6 2
Text Inputs amp Textareas 6 3 1
JSのみの算出（単位はKB)
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
ウィジットのコードサイズ項目 uncompressed minify gzip
Collapsible 5 3 1
Collapsible Sets (Accordions) 4 2 09
Dialogs 4 2 1
Toolbars Fixed 10 5 2
Grid Layouts (Columns) 2 07 05
Listview 15 7 3
ListviewFilter 3 2 09
Navbars 2 1 07
JSのみの算出（単位はKB)
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobile 12 の新機能
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobile 12 の新機能
Popup
Page Loading Widget
Listview Autodividers
その他
jQuery 172 対応
Collapsibleのアイコンを指定可能
Fixed Toolbarの表示非表示メソッドが変更
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Popup
画面に浮いて表示されるUI
ツールチップやダイアログに利用できる
応用すれば右上にプルダウン式のメニューのようなものが作れる
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Popup
lta href=popup1 data-rel=popupgtツールチップltagt
lt-- ツールチップ --gtltdiv data-role=popup id=popup1gt ツールチップを表示するltdivgt
ポップアップリンク
ポップアップ
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Popup
要素 属性 値 概要
div data-role popup ポップアップ
設定 値 既定 備考data-theme a-z c テーマdata-overlay-theme a-z ポップアップの外側のテーマdata-transition 任意 none ポップアップの表示アニメーション（リンクが優先）
要素 属性 値 概要
a href [id] ポップアップ要素のIDを指定する
設定 値 既定 備考data-rel popup リンク先をポップアップとして表示するdata-transition 任意 none ポップアップの表示アニメーション
data-position-toorigin window [selector] origin
ポップアップの表示位置を指定するorigin リンクの中央window ページの中央[selector] セレクターで指定された要素の中央
Link
Popup
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
PopupAPI ポップアップ表示$(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
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Page Loading Widget
Loading MessageにHTMLを利用できるように
リッチなロード画面を作成できる
Page Loading Widget
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Page Loading Widget
メッセージ表示$mobileloading( show text foo textVisible true theme a html )
メッセージ閉じる$mobileloading(close)
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Page Loading WidgetDeprecated
$mobileloadingMessage
$mobileloadingMessageTextVisible
$mobileloadingMessageTheme
$mobileshowPageLoadingMsg()
$mobilehidePageLoadingMsg()
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Listview Autodividers
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Listview Autodividersltul data-role=listview data-autodividers=truegt ltligtlta href=gtAdam Kinkaidltagtltligt ltligtlta href=gtAlex Wickerhamltagtltligt ltulgt
デフォルトでは先頭1文字を区切りにする
$mobilelistviewprototypeoptionsautodividers = function($li) var dividerText = リスト区切り名 return divierText
リスト区切り挿入の方法をカスタマイズする
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
その他Collapsible
data-collapsed-icon
data-expanded-icon
Fixed Toolbar のメソッド変更
Deprecated$mobilefixedToolbarsshow()
$mobilefixedToolbarshide()
Key changes (httptestjqmobiledecommit12ahtml)
固定フッターを表示$([data-position=fixed])fixedtoolbar(show)
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
今後予定されている新機能
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Fetch Links
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Fetch Linksリンク先のコンテンツをAjaxで取得し指定の場所へ埋め込む機能
タブページや引っ張ったら更新スライドショーなどに応用できる
Response Web Designにも応用可能
httpsgithubcompikoteajquery-mobile-fetchlinks
httpdhatenanejppikotea201204111334144330
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Fetch Links
lta href=targethtml data-target=target data-fragment=[data-role=content]gt取得するltagt
ltdiv id=targetgt ここにajaxで取得した要素が入りますltdivgt
指定したページをAjaxで取得して埋め込む
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
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
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobileの開発に役立つ情報
github jquery-mobile
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
github jquery-mobile
httpsgithubcomjqueryjquery-mobile
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
github jquery-mobileCommits で変更点を追う
Branches で新機能を知る
Issues で問題の対応を見る
バグ報告 amp 機能要望
IRC jquerymobile freenodenet
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
jQuery Mobile Team Meetinghttpjqueryorgupdates
ロードマップ
プロジェクト全体の方向性の概要
新機能
クリティカルなバグへの対応など
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
latest build amp test docs最新の機能を試す
バグフィックスを確認する
httpcodejquerycommobilelatestjquerymobilezip
httpjquerymobilecomtest
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Developer Tools
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Developer Toolsモバイル用のオプションが充実
Override User Agent
Override device metrics
Emulate touch events
Remote Debugging
テスト用としては同時に複数端末の操作ができるAdobe Shadowもある (httpwwwyoutubecomwatchv=JRlKSqe9RLkampt=110s)
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Developer Tools
Desktopgt open -a Google Chrome --args --remote-debugging-port=9222
Chrome for Android and iOSgt adb forward tcp9222 localabstractchrome_devtools_remote
Remote Debugging
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
ソースコードを見よう最後はやっぱりソースコード
ノウハウバッドノウハウの宝庫
モバイル向けの大抵の問題には対処されている
問題があったらソースコードを読む
他の実装の参考にする
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング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 -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニングAjaxは可能な限り活かす
data-ajax=false -gt 700~800ms
data-ajax=true -gt 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
Dont use custom selects and nested lists
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング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
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング
ltdiv data-role=page data-dom-cache=truegt hellipltdivgt
Page Cache
lta href=page2html data-prefetchgtページ2へltagt
Page Prefetch
JavaScript$mobileloadPage(page2html)
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング
ltdiv class=lazy style=display nonegt hellipltdivgt
Lazy DOM Loading
$(document)on(pageshow page-id function() $(lazy)show())
ページの大きさはページ遷移のアニメーションのパフォーマンスに大きく影響する
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニング
ltscript type=lazy src=scriptjsgtltscriptgt
Lazy JS Loading
$(document)on(pageshow page-id function() var lazy = $(script[type=lazy]) lazyattr(type textjavascript)remove()appendTo(head))
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニングFast Click (Skip 300ms delay)
$(document)on(vclick a function(e) epreventDefault() $mobilechangePage($(this)jqmData(href) || $(this)attr(href) transition $(this)jqmData(transition) ))
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニングDisable page animation and scroll back hover style
$(document)on(mobileinit function() $mobiledefaultPageTransition = none $mobileminScrollBack = 9999 $mobilebuttonMarkuphoverDelay = 5000)
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
パフォーマンスチューニングツール
Developer Tools
YSlow
Page Speed
webpagetestorg
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
プラグイン開発
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
プラグイン開発テンプレート
jQuery Mobile Framework customwidget plugin Author Toru Yoshikawa Dual licensed under the MIT or GPL Version 2 licenses http (function( $ undefined )
$widget( mobilecustomwidget $mobilewidget options theme null initSelector jqmData(role=customwidget) widget selector
_create function() create elements var m = thiselement refresh function() call targetcustomwidget(refresh)
enable function() call targetcustomwidget(enable)
disable function() call targetcustomwidget(disable) )
auto self-init widgets $( document )bind( pagecreate create function( e ) $( $mobilecustomwidgetprototypeoptionsinitSelector etarget )customwidget() )
)( jQuery )
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
プラグイン開発1 テンプレートからcustomwidgetを好きなプラグイン名に書き換え
記号なしすべて小文字
2 最初のイニシャライズは _create function() に記述する
アンダーバー付きのfunctionはイベントハンドラ
thiselementに装飾元の要素を取得できる
3 メソッドを定義する場合には foo function() に定義する
functionはcustomwidget(foo)で呼び出し
引数は上記呼び出しの第2引数以降が渡される
4 要素に data-role=customwidget を指定して利用する
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しよう
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しよう開発環境を構築するメリット自作プラグインを組み込んでファイルをひとつにまとめることができる
変更したスタイルを組み込んでひとつにまとめることができる
もしjQuery Mobile自体に手を入れても本家に追随しやすい（gitのマージ）
いつでも本家に Pull Request できる（バグは自分で直す気勢いで）
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しよう開発に必要なプロダクトツール
git
nodejs
npm (gruntjs etc)
HTTP Server + PHP
PhantomJS
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しようビルドの準備
git clone httpsgithubcomjqueryjquery-mobilegitcd jquery-mobilenpm install -d
ビルドmakegrunt js orgrunt css orgrunt docs or
httplocalhostjquery-mobileindexhtml
確認（ルート直下に配置した場合）
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しようカスタムビルド（JS）
define([ require widgetsloader jquerymobilenavigation jquerymobilenavigationpushstate jquerymobiletransitions jquerymobiledegradeInputs widgetsdialog widgetspagesections ] function( require ) require( [ jquerymobileinit ] function() ))
jsjquerymobilejs を編集する
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しようカスタムビルド（CSS）
cssdefault フォルトをコピーして custom-theme を作成する作成したフォルダのcssを編集する
THEME=custom-theme grunt css
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しようテスト（Qunit）
JUNIT_OUTPUT=buildtest-shy‐results13 ROOT_DOMAIN=httplocalhostjquery-shy‐mobile13 grunt13 test
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しよう単体のユニットテスト
httplocalhostjquery-mobiletestsunitslider
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
開発環境を構築しよう
httpsgithubcomjqueryjquery-mobilegraphscontributors
100 Contributors
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Thank you(yoshikawa_t)
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Question
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
Question 1
QFireworks CS6で作成したテーマを12で使用して問題が無いかどうかをお伺いしたいです
AThemeRoller で旧バージョンのテーマファイルをアップグレードすることができます
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
more
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow
ResourcesjQuery Mobile
githubjqueryjquery-mobile
jQuery Mobile Team Meeting
jQuery Mobile 12 Key Changes
Fetch Links (Blog)
Page Speed Tools
YSlow
webpagetestorg
Adobe Shadow