jquery mobile 最新情報 & tips
DESCRIPTION
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。TRANSCRIPT
jQuery Mobile 最新情報 & Tips
2012/3/15(木) Web CAT StudioToru Yoshikawa ( @yoshikawa_t )
Who?吉川 徹/Toru Yoshikawa
html5j.org/HTML5とか勉強会スタッフ
Google API Expert ( Chrome API )
Chrome API Developers JP
allWebクリエイター塾/jQuery Mobile担当講師
Twitter: @yoshikawa_t
Blog: http://d.hatena.ne.jp/pikotea/
Agenda
jQuery Mobile 1.1
jQuery Mobile tips
jQuery Mobile design customize
Questions
http://jqmworks.appspot.com/1.1tips/
Sample
jQuery Mobile 1.1
jQuery 1.7.1のサポート
固定ツールバーの最適化
ページアニメーションの最適化
新たなページアニメーションの追加（Turn、Flow）
コンパクトなフォームの追加と各種デザイン変更
サードパーティ製のUIライブラリが利用できるように
今月中には、1.1正式版がリリース予定
Summary
固定ツールバーの最適化固定ツールバーがスムーズに
スクロール中に固定ツールバーが消えたり（旧仕様）、固定ツールバーがへんな位置に来ることがなくなった
JavaScriptによるエミュレートは削除、position:fixedを利用した固定ツールバーに変更
サポートしていないブラウザでは、固定ツールバーは動作しない（固定されない）
サポートブラウザ
Android 2.2+
iOS5+
固定ツールバーの最適化<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 固定フッター</div>
data-position="fixed"でフッターの固定
data-tap-toggle="false"で画面をタップしたときのフッターの表示・非表示の切り替えをしない
ページアニメーションの最適化スクロール位置を維持したまま2つのページを同時にアニメーションするのが難しかったため、fade in/outを組み合わせた方式に変更
デフォルトのアニメーションは、slideからfadeに変更
Android2.x系は、CSS周りが遅いので強制的にfadeに変更（Android4.0のデフォルトブラウザでもfade）
新たなページアニメーションの追加
Turnページの左端を基準にして、回転するように現在ページがめくれ、次のページも回転しながら表示される
Flowいったんページが縮小され、その後に左に移動して消える。縮小された次のページが右から笑われて拡大される
<a data-transition="turn">turn</a><a data-transition="flow">flow</a>
コンパクトなフォームの追加と各種デザイン変更
ツールバーなどに入れるために小さいフォームを用意
コンパクトなフォーム
<input type="button" value="ボタン" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true"> <input type="checkbox" name="chk" id="chk1"> <label for="chk1">Check1</label> ...</fieldset>
フォームへの指定方法
複数の要素を持つフォームへの指定方法
各種デザイン変更フリップスイッチ
各種デザイン変更スライダー（ハイライト）
各種デザイン変更
<select data-role="slider"> <option>OFF</option> <option>ON</option></select>
<input type="range" value="0" min="0" max="100" step="5" data-highlight="true">
フリップスイッチ（記述は変更なし）
スライダーのhighlight指定
各種デザイン変更Ajaxローダー
No text Text only
各種デザイン変更
$.mobile.showPageLoadingMsg();
$.mobile.showPageLoadingMsg('a', 'message');
デフォルトのロード中アイコン表示
ローディングメッセージ表示（※RC1では動作しない）
$.mobile.showPageLoadingMsg('a', 'message', true);
メッセージのみ表示
サードパーティ製のUIライブラリが利用できるように
$(document).on('mobileinit', function(){$.mobile.ignoreContentEnabled = true;
});
初期設定
<div data-enhance="false"> <!-- third party ui markup --></div>
data-enhance="true"
その他ページアニメーションのFirefoxのサポート
$.mobile.touchOverflowEnabledは非推奨に（削除予定）
スライダーのstep属性をサポート
iOSのOrientation Changeのズームバグに対応
AMD（非同期モジュール読み込み）対応
コンテナへのdata-ajax="false"の有効化
jQuery Mobile Tips
オンラインオーサリングツール
Third Party Plugin
ThemeRoller
jQM Gallery
PhoneGap
Responsive Web Design
Performance
latest build
Tips
オンラインオーサリングツールその他
Application CraftProto.ioTiggzi
NS Basic/App StudioMobDisMobjectify
Third Party PluginPagination
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
Third Party PluginPhotoSwipe
http://www.photoswipe.com/
Third Party PluginDateBox
http://dev.jtsage.com/jQM-DateBox/
Third Party PluginSimple Dialog
http://dev.jtsage.com/jQM-SimpleDialog/
Third Party PluginActionsheet
https://github.com/hiroprotagonist/jquery.mobile.actionsheet
Third Party Plugin960 Grid on JQuery Mobile
http://jeromeetienne.github.com/jquery-mobile-960/index.html
Third Party Pluginその他
jquery-ui-map … jQueryとjQuery Mobile用のGoogle Maps Plugin
Bartender … iOS風のタブバー
Camera slideshow … リッチなスライドショー
mobiscroll … ドラムロール式のDate Picker
Multiview … レスポンシブな2カラムビュー
Splitview … レスポンシブな2カラムビュー
ThemeRoller
http://jquerymobile.com/themeroller/
GUI上簡単にjQuery Mobileのテーマが作成可能
jQuery Mobile Gallery
http://www.jqmgallery.com/
PhoneGap
http://phonegap.com/
HTML/CSS/JavaScriptのWebアプリケーションをネイティブアプリに変換可能
iOS、Android、Windows Phoneなど様々なプラットフォームに対応
カメラなどのネイティブの機能を利用可能
PhoneGap Build
https://build.phonegap.com/
開発環境がなくてもクラウド上で簡単にビルド
Responsive Web DesignjQuery Mobile Docs
2カラムレイアウトとCollapsibleブロック
CSS Media Queries
デバイスのサイズごとに異なるスタイルを適用する
画面サイズ大きいものには、2カラムレイアウトのスタイルを。
IEは、respond.jsもしくはcss3-mediaqueries.jsを使う
2カラムレイアウト@media all and ( min-width: 650px ){ .content-primary { width: 45%; float: right; } .content-secondary { width: 45%; float: left; }}
スタイルによるCollapsibleブロックの展開
.content-secondary .ui-collapsible-heading { display: none;}.content-secondary .ui-collapsible-contain { margin:0;}.content-secondary .ui-collapsible-content { display: block; margin: 0; padding: 0;}
トランジションの切り替え$(window).bind("throttledresize", setDefaultTransition );
function setDefaultTransition(){ var winwidth = $(window).width(), trans = "slide";
if ( winwidth >= 1000 ){ trans = "none"; } else if ( winwidth >= 650 ) { trans = "fade"; }
$.mobile.defaultPageTransition = trans;}
トランジション速度の調整/* デフォルトのアニメーション時間は350ms */＠media all and ( min-width: 750px ) { .slide .in, .slide .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 700ms; }}
Page Animation:
link -> data-transition="none"
data-ajax="false" is bad knowhow.
Page Cache:
page -> data-dom-cache="true"
Page Prefetch:
link -> prefetch
$.mobile.loadPage();
Don't use too many custom select menu.
Don't use too many nested list.
Performance
latest build<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
jQuery Mobile design customize
jQuery Mobile Tutorial: Creating a Restaurant Picker
http://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a-restaurant-picker-web-app.html
jQuery Mobile Tutorial: Creating a Restaurant Picker
Home
jQuery Mobile Tutorial: Creating a Restaurant Picker
Choose the town
jQuery Mobile Tutorial: Creating a Restaurant Picker
Choose the restaurant
jQuery Mobile Tutorial: Creating a Restaurant Picker
Restaurant details
Next
今月中に1.1の正式版をリリース予定
Download Builder Toolを提供予定
ThemeRoller update?
春には1.2をリリース予定
popup component ( like Simple Dialog )
fetch links
ajax navigation system ( data-target )
auto enhancement ( data-fragment )
Roadmap
Questions
Question 1ajaxを使った画面遷移先でJavaScriptを動かしたいが、body内のJavaScriptが無視されてしまう。
Ajaxでの遷移は、遷移先の<div data-role="page"></div>のみ取得するので、どうしてもそのページで実行したい場合は、<div data-role="page"><script>...</script></div>としましょう。
できれば、共通スクリプトでpageinitイベントなどで実行するようにしてください。
Auto Ajax mechanism
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
ページ1 ページ2 ページ3
初回アクセス
ajax ajax
Auto Ajax mechanism
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
<html><head> <!-- link, head --></head><body> <div data-role="page"> ... </div></body></html>
ページ1 ページ2 ページ3
初回アクセス
ajax ajax
Question 2Mobile Bookmark Bubbleを使いたいが、JQMのajaxのせいでうまく動かない
iPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQuery Mobileと併用してみた
http://d.hatena.ne.jp/a_kimura/20110507/1304801259
Question 3header部分にsubmitを配置する為に、form要素をheaderも含めて囲むと、iPhoneで表示が崩れる。
現象を確認できませんでした。もしかしたら、marginやpaddingの設定があるのかもしれません。
どうしてもダメなら、スクリプトで。
Question 4ダブルタップを判定するために、タップしてからアクションするまでに タイムラグが生じますが、シングルタップのみしか使用しない設計を している場合、ダブルタップの判定を省略することは出来るのでしょうか？
vclickイベントを利用してください。
Question 5
jQueryMobileを採用して、格好いいUIを提供しているサイト（事例）があれば知りたい。とくに金融系で何かあれば。
jQuery Mobileの事例紹介など。
jQM GalleryにCoolなサイトはたくさん置いてあります！金融系かどうかはちょっとわかりません…
Question 6JavaScriptの実機での効率の良いデバッグ方法
最近だとAdobe Shadowがリモートデバッグに対応していますね。Chrome for Androidも同じくリモートデバッグができます。それ以外は、weinreというツールもあります。
Question 7アンカーリンクは使えないんでしょうか？代替はどのようなものがあるのでしょうか？
a要素にdata-ajax="false"を指定してください。
Question 8jQuery Mobile 1.0.1から1.1へアップデートする際の注意点など
基本的に動作はしますが、アニメーションのデフォルトがfadeになったことと固定ツールバーが変わっているのでそこだけ注意です
Question 9ページ遷移で発生するイベントの効果的な使い方等あれば参考にしたいです。
通常のページで簡単に利用できるGoogle Maps、Google Analytics、Google Adsenseなどはpageshowイベントなどでページ遷移の際に実行する必要があります。
loadイベントの代わりに各ページでpageinitイベントを利用してください。
共通パーツの作成などにpagecreateイベントが利用できます。
pageshow event and Google Analytics
$(document).on('mobileinit', function(){ $(':jqmData(role="page")').live('pageshow', function () { _gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]); });}
各ページの表示時にトラッキング
Question 10ネイティブアプリにするかhtml5で作るかの判断の仕方
まず、HTML5で対応できない機能用件があるかどうか、そしてパフォーマンスやユーザービリティを重視する案件であるかどうかが大きな判断材料になるかと思います。
Question 11iOS4での重さは改善したのか。
各種モバイル端末の動作具合（iOSやAndroid）
パフォーマンスは良くなっているはずですが、感覚のところもあるので是非試してみてください。
Question 12
スマートフォン対応の業務アプリ開発における課題。(もちろん主観で構いません。)
業務アプリの場合、jQuery Mobileのデメリットをあまり考え無くても良いので積極的に利用できるかと思います。
Question 13
ガラケーモバイルサイトからスマートフォン用のサイトへの移行。
UTF-8化、viewportタグ、jQuery Mobileの読み込み、data-role="page"によるページの切り出し、最後にdata-enhance="false"でネイティブのUIを利用しつつ少しずつ対応
Question 14陥りやすい落とし穴などあればぜひ教えていただきたいです。
Ajaxによるページ遷移の仕組みに起因する問題が多いです。
script等がうまく読み込めない、動作しない場合の対応（page関連のイベントを使う）
複数のファイルのページを同じページに取り込むので、id属性の重複に気をつけること
ローカル環境では、XHRの制約で別ファイルへ遷移ができないこと（サーバー環境では可能）
more?
Thank you!!( @yoshikawa_t)