Your SlideShare is downloading. ×
0
jQuery Mobile 最新情報 & Tips           2012/3/15(木) Web CAT Studio        Toru Yoshikawa ( @yoshikawa_t )
Who?吉川 徹/Toru Yoshikawa  html5j.org/HTML5とか勉強会スタッフ  Google API Expert ( Chrome API )  Chrome API Developers JP  allWebクリエイ...
AgendajQuery Mobile 1.1jQuery Mobile tipsjQuery Mobile design customizeQuestions
Samplehttp://jqmworks.appspot.com/1.1tips/
jQuery Mobile 1.1
SummaryjQuery 1.7.1のサポート固定ツールバーの最適化ページアニメーションの最適化新たなページアニメーションの追加(Turn、Flow)コンパクトなフォームの追加と各種デザイン変更サードパーティ製のUIライブラリが利用できるよう...
固定ツールバーの最適化固定ツールバーがスムーズに スクロール中に固定ツールバーが消えたり(旧仕様)、固定ツールバーが へんな位置に来ることがなくなった JavaScriptによるエミュレートは削除、position:fixedを利用した 固定ツ...
固定ツールバーの最適化<div data-role="footer" data-position="fixed" data-tap-toggle="false">    固定フッター</div>    data-position="fixed"...
ページアニメーションの最適化 スクロール位置を維持したまま2つのページを同時 にアニメーションするのが難しかったため、fade in/outを組み合わせた方式に変更 デフォルトのアニメーションは、slideからfade に変更 Android2...
新たなページアニメーションの追加    Turn       ページの左端を基準にして、回転するように現在ページ       がめくれ、次のページも回転しながら表示される    Flow       いったんページが縮小され、その後に左に移動し...
コンパクトなフォームの追加と各種デザイン変更 ツールバーなどに入れるために小さいフォームを用意
コンパクトなフォームフォームへの指定方法<input type="button" value="ボタン" data-mini="true">複数の要素を持つフォームへの指定方法<fieldset data-role="controlgroup"...
各種デザイン変更フリップスイッチ
各種デザイン変更スライダー(ハイライト)
各種デザイン変更フリップスイッチ(記述は変更なし)<select data-role="slider">    <option>OFF</option>    <option>ON</option></select>スライダーのhighligh...
各種デザイン変更Ajaxローダー No text   Text only
各種デザイン変更デフォルトのロード中アイコン表示$.mobile.showPageLoadingMsg();ローディングメッセージ表示(※RC1では動作しない)$.mobile.showPageLoadingMsg(a, message);メッ...
サードパーティ製のUIライブラリが利用できるように初期設定$(document).on(mobileinit, function(){  $.mobile.ignoreContentEnabled = true;});data-enhance=...
その他ページアニメーションのFirefoxのサポート$.mobile.touchOverflowEnabledは非推奨に(削除予定)スライダーのstep属性をサポートiOSのOrientation Changeのズームバグに対応AMD(非同期モ...
jQuery Mobile Tips
TipsオンラインオーサリングツールThird Party PluginThemeRollerjQM GalleryPhoneGapResponsive Web DesignPerformancelatest build
オンラインオーサリングツール       codiqa    http://www.codiqa.com/
オンラインオーサリングツール             その他Application CraftProto.ioTiggziNS Basic/App StudioMobDisMobjectify
Third Party Plugin               Paginationhttp://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
Third Party Plugin    PhotoSwipe   http://www.photoswipe.com/
Third Party Plugin      DateBox http://dev.jtsage.com/jQM-DateBox/
Third Party Plugin  Simple Dialoghttp://dev.jtsage.com/jQM-SimpleDialog/
Third Party Plugin             Actionsheethttps://github.com/hiroprotagonist/jquery.mobile.actionsheet
Third Party Plugin   960 Grid on JQuery Mobilehttp://jeromeetienne.github.com/jquery-mobile-960/index.html
Third Party Plugin             その他jquery-ui-map … jQueryとjQuery Mobile用のGoogle Maps PluginBartender … iOS風のタブバーCamera slid...
ThemeRollerGUI上簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/
jQuery Mobile Gallery http://www.jqmgallery.com/
PhoneGap       HTML/CSS/JavaScriptのWebア       プリケーションをネイティブアプリ       に変換可能       iOS、Android、Windows Phone       など様々なプラット...
PhoneGap Build開発環境がなくてもクラウド上で簡単にビルド  https://build.phonegap.com/
Responsive Web Design jQuery 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;    }    .conte...
スタイルによるCollapsibleブロックの展開.content-secondary .ui-collapsible-heading {    display: none;}.content-secondary .ui-collapsible...
トランジションの切り替え$(window).bind("throttledresize", setDefaultTransition );function setDefaultTransition(){  var winwidth = $(wi...
トランジション速度の調整/* デフォルトのアニメーション時間は350ms */@media all and ( min-width: 750px ) {  .slide .in, .slide .out {	   -webkit-animati...
PerformancePage Animation:   link -> data-transition="none"   data-ajax="false" is bad knowhow.Page Cache:   page -> data-...
latest build<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http:/...
jQuery Mobile design customize
jQuery Mobile Tutorial:  Creating a Restaurant Pickerhttp://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a-     ...
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
Roadmap今月中に1.1の正式版をリリース予定 Download Builder Toolを提供予定 ThemeRoller update?春には1.2をリリース予定 popup component ( like Simple Dialog...
Questions
Question 1ajaxを使った画面遷移先でJavaScriptを動かしたいが、body内のJavaScriptが無視されてしまう。Ajaxでの遷移は、遷移先の<div data-role="page"></div>のみ取得するので、どうし...
Auto Ajax mechanism               初回アクセスページ1                       ページ2                       ページ3<html>                  ...
Auto Ajax mechanism                                          初回アクセスページ1                       ページ2                       ペ...
Question 2Mobile Bookmark Bubbleを使いたいが、JQMのajaxのせいでうまく動かないiPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQueryMobileと併用...
Question 3header部分にsubmitを配置する為に、form要素をheaderも含めて囲むと、iPhoneで表示が崩れる。現象を確認できませんでした。もしかしたら、marginやpaddingの設定があるのかもしれません。どうして...
Question 4ダブルタップを判定するために、タップしてからアクションするまでに タイムラグが生じますが、シングルタップのみしか使用しない設計を している場合、ダブルタップの判定を省略することは出来るのでしょうか?vclickイベントを利用...
Question 5jQueryMobileを採用して、格好いい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、GoogleAnalytics、Google Adsenseなどはpageshowイベントなどでペー...
pageshow event and Google Analytics各ページの表示時にトラッキング$(document).on(mobileinit, function(){  $(:jqmData(role="page")).live(pa...
Question 10ネイティブアプリにするかhtml5で作るかの判断の仕方まず、HTML5で対応できない機能用件があるかどうか、そしてパフォーマンスやユーザービリティを重視する案件であるかどうかが大きな判断材料になるかと思います。
Question 11iOS4での重さは改善したのか。各種モバイル端末の動作具合(iOSやAndroid)パフォーマンスは良くなっているはずですが、感覚のところもあるので是非試してみてください。
Question 12スマートフォン対応の業務アプリ開発における課題。(もちろん主観で構いません。)業務アプリの場合、jQuery Mobileのデメリットをあまり考え無くても良いので積極的に利用できるかと思います。
Question 13ガラケーモバイルサイトからスマートフォン用のサイトへの移行。UTF-8化、viewportタグ、jQuery Mobileの読み込み、data-role="page"によるページの切り出し、最後にdata-enhance=...
Question 14陥りやすい落とし穴などあればぜひ教えていただきたいです。Ajaxによるページ遷移の仕組みに起因する問題が多いです。 script等がうまく読み込めない、動作しない場合の対応 (page関連のイベントを使う) 複数のファイル...
more?
Thank you!! ( @yoshikawa_t)
Upcoming SlideShare
Loading in...5
×

jQuery Mobile 最新情報 & Tips

11,028

Published on

3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。

Published in: Technology
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,028
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
102
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Mobile 最新情報 & Tips"

  1. 1. jQuery Mobile 最新情報 & Tips 2012/3/15(木) Web CAT Studio Toru Yoshikawa ( @yoshikawa_t )
  2. 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. 3. AgendajQuery Mobile 1.1jQuery Mobile tipsjQuery Mobile design customizeQuestions
  4. 4. Samplehttp://jqmworks.appspot.com/1.1tips/
  5. 5. jQuery Mobile 1.1
  6. 6. SummaryjQuery 1.7.1のサポート固定ツールバーの最適化ページアニメーションの最適化新たなページアニメーションの追加(Turn、Flow)コンパクトなフォームの追加と各種デザイン変更サードパーティ製のUIライブラリが利用できるように今月中には、1.1正式版がリリース予定
  7. 7. 固定ツールバーの最適化固定ツールバーがスムーズに スクロール中に固定ツールバーが消えたり(旧仕様)、固定ツールバーが へんな位置に来ることがなくなった JavaScriptによるエミュレートは削除、position:fixedを利用した 固定ツールバーに変更 サポートしていないブラウザでは、固定ツールバーは動作しない(固定さ れない)サポートブラウザ Android 2.2+ iOS5+
  8. 8. 固定ツールバーの最適化<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 固定フッター</div> data-position="fixed"でフッターの固定 data-tap-toggle="false"で画面をタップし たときのフッターの表示・非表示の切り替えをし ない
  9. 9. ページアニメーションの最適化 スクロール位置を維持したまま2つのページを同時 にアニメーションするのが難しかったため、fade in/outを組み合わせた方式に変更 デフォルトのアニメーションは、slideからfade に変更 Android2.x系は、CSS周りが遅いので強制的に fadeに変更(Android4.0のデフォルトブラウザ でもfade)
  10. 10. 新たなページアニメーションの追加 Turn ページの左端を基準にして、回転するように現在ページ がめくれ、次のページも回転しながら表示される Flow いったんページが縮小され、その後に左に移動して消え る。縮小された次のページが右から笑われて拡大される<a data-transition="turn">turn</a><a data-transition="flow">flow</a>
  11. 11. コンパクトなフォームの追加と各種デザイン変更 ツールバーなどに入れるために小さいフォームを用意
  12. 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>
  13. 13. 各種デザイン変更フリップスイッチ
  14. 14. 各種デザイン変更スライダー(ハイライト)
  15. 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. 16. 各種デザイン変更Ajaxローダー No text Text only
  17. 17. 各種デザイン変更デフォルトのロード中アイコン表示$.mobile.showPageLoadingMsg();ローディングメッセージ表示(※RC1では動作しない)$.mobile.showPageLoadingMsg(a, message);メッセージのみ表示$.mobile.showPageLoadingMsg(a, message, true);
  18. 18. サードパーティ製のUIライブラリが利用できるように初期設定$(document).on(mobileinit, function(){ $.mobile.ignoreContentEnabled = true;});data-enhance="true"<div data-enhance="false"> <!-- third party ui markup --></div>
  19. 19. その他ページアニメーションのFirefoxのサポート$.mobile.touchOverflowEnabledは非推奨に(削除予定)スライダーのstep属性をサポートiOSのOrientation Changeのズームバグに対応AMD(非同期モジュール読み込み)対応コンテナへのdata-ajax="false"の有効化
  20. 20. jQuery Mobile Tips
  21. 21. TipsオンラインオーサリングツールThird Party PluginThemeRollerjQM GalleryPhoneGapResponsive Web DesignPerformancelatest build
  22. 22. オンラインオーサリングツール codiqa http://www.codiqa.com/
  23. 23. オンラインオーサリングツール その他Application CraftProto.ioTiggziNS Basic/App StudioMobDisMobjectify
  24. 24. Third Party Plugin Paginationhttp://filamentgroup.com/lab/jquery_mobile_pagination_plugin/
  25. 25. Third Party Plugin PhotoSwipe http://www.photoswipe.com/
  26. 26. Third Party Plugin DateBox http://dev.jtsage.com/jQM-DateBox/
  27. 27. Third Party Plugin Simple Dialoghttp://dev.jtsage.com/jQM-SimpleDialog/
  28. 28. Third Party Plugin Actionsheethttps://github.com/hiroprotagonist/jquery.mobile.actionsheet
  29. 29. Third Party Plugin 960 Grid on JQuery Mobilehttp://jeromeetienne.github.com/jquery-mobile-960/index.html
  30. 30. Third Party Plugin その他jquery-ui-map … jQueryとjQuery Mobile用のGoogle Maps PluginBartender … iOS風のタブバーCamera slideshow … リッチなスライドショーmobiscroll … ドラムロール式のDate PickerMultiview … レスポンシブな2カラムビューSplitview … レスポンシブな2カラムビュー
  31. 31. ThemeRollerGUI上簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/
  32. 32. jQuery Mobile Gallery http://www.jqmgallery.com/
  33. 33. PhoneGap HTML/CSS/JavaScriptのWebア プリケーションをネイティブアプリ に変換可能 iOS、Android、Windows Phone など様々なプラットフォームに対応 カメラなどのネイティブの機能を利 用可能http://phonegap.com/
  34. 34. PhoneGap Build開発環境がなくてもクラウド上で簡単にビルド https://build.phonegap.com/
  35. 35. Responsive Web Design jQuery Mobile Docs
  36. 36. 2カラムレイアウトとCollapsibleブロック
  37. 37. CSS Media Queriesデバイスのサイズごとに異なるスタイルを適用する画面サイズ大きいものには、2カラムレイアウトのスタイルを。IEは、respond.jsもしくはcss3-mediaqueries.jsを使う
  38. 38. 2カラムレイアウト@media all and ( min-width: 650px ){ .content-primary { width: 45%; float: right; } .content-secondary { width: 45%; float: left; }}
  39. 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. 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. 41. トランジション速度の調整/* デフォルトのアニメーション時間は350ms */@media all and ( min-width: 750px ) { .slide .in, .slide .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 700ms; }}
  42. 42. PerformancePage Animation: link -> data-transition="none" data-ajax="false" is bad knowhow.Page Cache: page -> data-dom-cache="true"Page Prefetch: link -> prefetch $.mobile.loadPage();Dont use too many custom select menu.Dont use too many nested list.
  43. 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. 44. jQuery Mobile design customize
  45. 45. jQuery Mobile Tutorial: Creating a Restaurant Pickerhttp://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a- restaurant-picker-web-app.html
  46. 46. jQuery Mobile Tutorial:Creating a Restaurant Picker Home
  47. 47. jQuery Mobile Tutorial:Creating a Restaurant Picker Choose the town
  48. 48. jQuery Mobile Tutorial:Creating a Restaurant Picker Choose the restaurant
  49. 49. jQuery Mobile Tutorial:Creating a Restaurant Picker Restaurant details
  50. 50. Next
  51. 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. 52. Questions
  53. 53. Question 1ajaxを使った画面遷移先でJavaScriptを動かしたいが、body内のJavaScriptが無視されてしまう。Ajaxでの遷移は、遷移先の<div data-role="page"></div>のみ取得するので、どうしてもそのページで実行したい場合は、<div data-role="page"><script>...</script></div>としましょう。できれば、共通スクリプトでpageinitイベントなどで実行するようにしてください。
  54. 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. 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. 56. Question 2Mobile Bookmark Bubbleを使いたいが、JQMのajaxのせいでうまく動かないiPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQueryMobileと併用してみたhttp://d.hatena.ne.jp/a_kimura/20110507/1304801259
  57. 57. Question 3header部分にsubmitを配置する為に、form要素をheaderも含めて囲むと、iPhoneで表示が崩れる。現象を確認できませんでした。もしかしたら、marginやpaddingの設定があるのかもしれません。どうしてもダメなら、スクリプトで。
  58. 58. Question 4ダブルタップを判定するために、タップしてからアクションするまでに タイムラグが生じますが、シングルタップのみしか使用しない設計を している場合、ダブルタップの判定を省略することは出来るのでしょうか?vclickイベントを利用してください。
  59. 59. Question 5jQueryMobileを採用して、格好いいUIを提供しているサイト(事例)があれば知りたい。とくに金融系で何かあれば。jQuery Mobileの事例紹介など。jQM GalleryにCoolなサイトはたくさん置いてあります!金融系かどうかはちょっとわかりません…
  60. 60. Question 6JavaScriptの実機での効率の良いデバッグ方法最近だとAdobe Shadowがリモートデバッグに対応していますね。Chrome for Androidも同じくリモートデバッグができます。それ以外は、weinreというツールもあります。
  61. 61. Question 7アンカーリンクは使えないんでしょうか?代替はどのようなものがあるのでしょうか?a要素にdata-ajax="false"を指定してください。
  62. 62. Question 8jQuery Mobile 1.0.1から1.1へアップデートする際の注意点など基本的に動作はしますが、アニメーションのデフォルトがfadeになったことと固定ツールバーが変わっているのでそこだけ注意です
  63. 63. Question 9ページ遷移で発生するイベントの効果的な使い方等あれば参考にしたいです。通常のページで簡単に利用できるGoogle Maps、GoogleAnalytics、Google Adsenseなどはpageshowイベントなどでページ遷移の際に実行する必要があります。loadイベントの代わりに各ページでpageinitイベントを利用してください。共通パーツの作成などにpagecreateイベントが利用できます。
  64. 64. pageshow event and Google Analytics各ページの表示時にトラッキング$(document).on(mobileinit, function(){ $(:jqmData(role="page")).live(pageshow, function () { _gaq.push([_trackPageview, $.mobile.activePage.jqmData(url)]); });}
  65. 65. Question 10ネイティブアプリにするかhtml5で作るかの判断の仕方まず、HTML5で対応できない機能用件があるかどうか、そしてパフォーマンスやユーザービリティを重視する案件であるかどうかが大きな判断材料になるかと思います。
  66. 66. Question 11iOS4での重さは改善したのか。各種モバイル端末の動作具合(iOSやAndroid)パフォーマンスは良くなっているはずですが、感覚のところもあるので是非試してみてください。
  67. 67. Question 12スマートフォン対応の業務アプリ開発における課題。(もちろん主観で構いません。)業務アプリの場合、jQuery Mobileのデメリットをあまり考え無くても良いので積極的に利用できるかと思います。
  68. 68. Question 13ガラケーモバイルサイトからスマートフォン用のサイトへの移行。UTF-8化、viewportタグ、jQuery Mobileの読み込み、data-role="page"によるページの切り出し、最後にdata-enhance="false"でネイティブのUIを利用しつつ少しずつ対応
  69. 69. Question 14陥りやすい落とし穴などあればぜひ教えていただきたいです。Ajaxによるページ遷移の仕組みに起因する問題が多いです。 script等がうまく読み込めない、動作しない場合の対応 (page関連のイベントを使う) 複数のファイルのページを同じページに取り込むので、id 属性の重複に気をつけること ローカル環境では、XHRの制約で別ファイルへ遷移ができ ないこと(サーバー環境では可能)
  70. 70. more?
  71. 71. Thank you!! ( @yoshikawa_t)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×