jQuery Mobile 最新情報 & Tips
27 likes4,972 views
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。
![pageshow event and Google Analytics
各ページの表示時にトラッキング
$(document).on('mobileinit', function(){
$(':jqmData(role="page")').live('pageshow', function () {
_gaq.push(['_trackPageview',
$.mobile.activePage.jqmData('url')]);
});
}](https://image.slidesharecdn.com/jqm-120315221741-phpapp01/85/jQuery-Mobile-Tips-64-320.jpg)
jQuery Mobile 最新情報 & Tips
- 1. jQuery Mobile 最新情報 & Tips 2012/3/15(木) Web CAT Studio Toru Yoshikawa ( @yoshikawa_t )
- 2. 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/
- 3. Agenda jQuery Mobile 1.1 jQuery Mobile tips jQuery Mobile design customize Questions
- 7. 固定ツールバーの最適化 固定ツールバーがスムーズに スクロール中に固定ツールバーが消えたり（旧仕様）、固定ツールバーが へんな位置に来ることがなくなった JavaScriptによるエミュレートは削除、position:fixedを利用した 固定ツールバーに変更 サポートしていないブラウザでは、固定ツールバーは動作しない（固定さ れない） サポートブラウザ Android 2.2+ iOS5+
- 8. 固定ツールバーの最適化 <div data-role="footer" data-position="fixed" data-tap- toggle="false"> 固定フッター </div> data-position="fixed"でフッターの固定 data-tap-toggle="false"で画面をタップし たときのフッターの表示・非表示の切り替えをし ない
- 9. ページアニメーションの最適化 スクロール位置を維持したまま2つのページを同時 にアニメーションするのが難しかったため、fade in/outを組み合わせた方式に変更 デフォルトのアニメーションは、slideからfade に変更 Android2.x系は、CSS周りが遅いので強制的に fadeに変更（Android4.0のデフォルトブラウザ でもfade）
- 10. 新たなページアニメーションの追加 Turn ページの左端を基準にして、回転するように現在ページ がめくれ、次のページも回転しながら表示される Flow いったんページが縮小され、その後に左に移動して消え る。縮小された次のページが右から笑われて拡大される <a data-transition="turn">turn</a> <a data-transition="flow">flow</a>
- 12. コンパクトなフォーム フォームへの指定方法 <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>
- 15. 各種デザイン変更 フリップスイッチ（記述は変更なし） <select data-role="slider"> <option>OFF</option> <option>ON</option> </select> スライダーのhighlight指定 <input type="range" value="0" min="0" max="100" step="5" data-highlight="true">
- 16. 各種デザイン変更 Ajaxローダー No text Text only
- 18. サードパーティ製のUIライブラリが利用できるように 初期設定 $(document).on('mobileinit', function(){ $.mobile.ignoreContentEnabled = true; }); data-enhance="true" <div data-enhance="false"> <!-- third party ui markup --> </div>
- 21. Tips オンラインオーサリングツール Third Party Plugin ThemeRoller jQM Gallery PhoneGap Responsive Web Design Performance latest build
- 22. オンラインオーサリングツール codiqa http://www.codiqa.com/
- 23. オンラインオーサリングツール その他 Application Craft Proto.io Tiggzi NS Basic/App Studio MobDis Mobjectify
- 24. Third Party Plugin Pagination http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
- 25. Third Party Plugin PhotoSwipe http://www.photoswipe.com/
- 26. Third Party Plugin DateBox http://dev.jtsage.com/jQM-DateBox/
- 27. Third Party Plugin Simple Dialog http://dev.jtsage.com/jQM-SimpleDialog/
- 28. Third Party Plugin Actionsheet https://github.com/hiroprotagonist/jquery.mobile.actionsheet
- 29. Third Party Plugin 960 Grid on JQuery Mobile http://jeromeetienne.github.com/jquery-mobile-960/index.html
- 30. Third Party Plugin その他 jquery-ui-map … jQueryとjQuery Mobile用の Google Maps Plugin Bartender … iOS風のタブバー Camera slideshow … リッチなスライドショー mobiscroll … ドラムロール式のDate Picker Multiview … レスポンシブな2カラムビュー Splitview … レスポンシブな2カラムビュー
- 32. jQuery Mobile Gallery http://www.jqmgallery.com/
- 33. PhoneGap HTML/CSS/JavaScriptのWebア プリケーションをネイティブアプリ に変換可能 iOS、Android、Windows Phone など様々なプラットフォームに対応 カメラなどのネイティブの機能を利 用可能 http://phonegap.com/
- 34. PhoneGap Build 開発環境がなくてもクラウド上で簡単にビルド https://build.phonegap.com/
- 35. Responsive Web Design jQuery Mobile Docs
- 38. 2カラムレイアウト @media all and ( min-width: 650px ){ .content-primary { width: 45%; float: right; } .content-secondary { width: 45%; float: left; } }
- 39. スタイルによる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; }
- 40. トランジションの切り替え $(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; }
- 41. トランジション速度の調整 /* デフォルトのアニメーション時間は350ms */ ＠media all and ( min-width: 750px ) { .slide .in, .slide .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 700ms; } }
- 42. Performance 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.
- 43. 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>
- 44. jQuery Mobile design customize
- 45. jQuery Mobile Tutorial: Creating a Restaurant Picker http://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a- restaurant-picker-web-app.html
- 46. jQuery Mobile Tutorial: Creating a Restaurant Picker Home
- 47. jQuery Mobile Tutorial: Creating a Restaurant Picker Choose the town
- 48. jQuery Mobile Tutorial: Creating a Restaurant Picker Choose the restaurant
- 49. jQuery Mobile Tutorial: Creating a Restaurant Picker Restaurant details
- 50. Next
- 51. Roadmap 今月中に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 )
- 52. Questions
- 53. Question 1 ajaxを使った画面遷移先でJavaScriptを動かしたいが、 body内のJavaScriptが無視されてしまう。 Ajaxでの遷移は、遷移先の<div data-role="page"></ div>のみ取得するので、どうしてもそのページで実行した い場合は、<div data-role="page"><script>...</ script></div>としましょう。 できれば、共通スクリプトでpageinitイベントなどで実行 するようにしてください。
- 54. Auto Ajax mechanism 初回アクセス ページ1 ページ2 ページ3 <html> <html> <html> <head> <head> <head> <!-- link, head --> <!-- link, head --> <!-- link, head --> </head> </head> </head> <body> <body> <body> <div data-role="page"> <div data-role="page"> <div data-role="page"> ... ... ... </div> </div> </div> </body> </body> </body> </html> </html> </html> ajax ajax
- 55. Auto Ajax mechanism 初回アクセス ページ1 ページ2 ページ3 <html> <html> <html> <head> <head> <head> <!-- link, head --> <!-- link, head --> <!-- link, head --> </head> </head> </head> <body> <body> <body> <div data-role="page"> <div data-role="page"> <div data-role="page"> ... ... ... </div> </div> </div> </body> </body> </body> </html> </html> </html> ajax ajax
- 56. Question 2 Mobile Bookmark Bubbleを使いたいが、JQM のajaxのせいでうまく動かない iPhoneでWebアプリのホーム画面登録を促す 「Mobile Bookmark Bubble」をjQuery Mobileと併用してみた http://d.hatena.ne.jp/a_kimura/ 20110507/1304801259
- 59. Question 5 jQueryMobileを採用して、格好いいUIを提供し ているサイト（事例）があれば知りたい。とくに金 融系で何かあれば。 jQuery Mobileの事例紹介など。 jQM GalleryにCoolなサイトはたくさん置いてあ ります！金融系かどうかはちょっとわかりません…
- 60. Question 6 JavaScriptの実機での効率の良いデバッグ 方法 最近だとAdobe Shadowがリモートデバッグ に対応していますね。Chrome for Android も同じくリモートデバッグができます。それ以 外は、weinreというツールもあります。
- 62. Question 8 jQuery Mobile 1.0.1から1.1へアップ デートする際の注意点など 基本的に動作はしますが、アニメーション のデフォルトがfadeになったことと固定 ツールバーが変わっているのでそこだけ注 意です
- 63. Question 9 ページ遷移で発生するイベントの効果的な使い方等あれば参考に したいです。 通常のページで簡単に利用できるGoogle Maps、Google Analytics、Google Adsenseなどはpageshowイベントなど でページ遷移の際に実行する必要があります。 loadイベントの代わりに各ページでpageinitイベントを利用し てください。 共通パーツの作成などにpagecreateイベントが利用できます。
- 64. pageshow event and Google Analytics 各ページの表示時にトラッキング $(document).on('mobileinit', function(){ $(':jqmData(role="page")').live('pageshow', function () { _gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]); }); }
- 69. Question 14 陥りやすい落とし穴などあればぜひ教えていただきたいです。 Ajaxによるページ遷移の仕組みに起因する問題が多いです。 script等がうまく読み込めない、動作しない場合の対応 （page関連のイベントを使う） 複数のファイルのページを同じページに取り込むので、id 属性の重複に気をつけること ローカル環境では、XHRの制約で別ファイルへ遷移ができ ないこと（サーバー環境では可能）
- 70. more?
- 71. Thank you!! ( @yoshikawa_t)