jQuery Mobile 最新情報 & Tips
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Mobile 最新情報 & Tips

on

  • 12,169 views

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

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

Statistics

Views

Total Views
12,169
Views on SlideShare
12,164
Embed Views
5

Actions

Likes
27
Downloads
100
Comments
0

3 Embeds 5

https://twitter.com 3
http://duckduckgo.com 1
http://s.deeeki.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobile 最新情報 & Tips Presentation Transcript

  • 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. AgendajQuery Mobile 1.1jQuery Mobile tipsjQuery Mobile design customizeQuestions
  • 4. Samplehttp://jqmworks.appspot.com/1.1tips/
  • 5. jQuery Mobile 1.1
  • 6. SummaryjQuery 1.7.1のサポート固定ツールバーの最適化ページアニメーションの最適化新たなページアニメーションの追加(Turn、Flow)コンパクトなフォームの追加と各種デザイン変更サードパーティ製のUIライブラリが利用できるように今月中には、1.1正式版がリリース予定
  • 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>
  • 11. コンパクトなフォームの追加と各種デザイン変更 ツールバーなどに入れるために小さいフォームを用意
  • 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. 各種デザイン変更フリップスイッチ
  • 14. 各種デザイン変更スライダー(ハイライト)
  • 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
  • 17. 各種デザイン変更デフォルトのロード中アイコン表示$.mobile.showPageLoadingMsg();ローディングメッセージ表示(※RC1では動作しない)$.mobile.showPageLoadingMsg(a, message);メッセージのみ表示$.mobile.showPageLoadingMsg(a, message, true);
  • 18. サードパーティ製のUIライブラリが利用できるように初期設定$(document).on(mobileinit, function(){ $.mobile.ignoreContentEnabled = true;});data-enhance="true"<div data-enhance="false"> <!-- third party ui markup --></div>
  • 19. その他ページアニメーションのFirefoxのサポート$.mobile.touchOverflowEnabledは非推奨に(削除予定)スライダーのstep属性をサポートiOSのOrientation Changeのズームバグに対応AMD(非同期モジュール読み込み)対応コンテナへのdata-ajax="false"の有効化
  • 20. jQuery Mobile Tips
  • 21. TipsオンラインオーサリングツールThird Party PluginThemeRollerjQM GalleryPhoneGapResponsive Web DesignPerformancelatest build
  • 22. オンラインオーサリングツール codiqa http://www.codiqa.com/
  • 23. オンラインオーサリングツール その他Application CraftProto.ioTiggziNS Basic/App StudioMobDisMobjectify
  • 24. Third Party Plugin Paginationhttp://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 Dialoghttp://dev.jtsage.com/jQM-SimpleDialog/
  • 28. Third Party Plugin Actionsheethttps://github.com/hiroprotagonist/jquery.mobile.actionsheet
  • 29. Third Party Plugin 960 Grid on JQuery Mobilehttp://jeromeetienne.github.com/jquery-mobile-960/index.html
  • 30. Third Party Plugin その他jquery-ui-map … jQueryとjQuery Mobile用のGoogle Maps PluginBartender … iOS風のタブバーCamera slideshow … リッチなスライドショーmobiscroll … ドラムロール式のDate PickerMultiview … レスポンシブな2カラムビューSplitview … レスポンシブな2カラムビュー
  • 31. ThemeRollerGUI上簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/
  • 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
  • 36. 2カラムレイアウトとCollapsibleブロック
  • 37. CSS Media Queriesデバイスのサイズごとに異なるスタイルを適用する画面サイズ大きいものには、2カラムレイアウトのスタイルを。IEは、respond.jsもしくはcss3-mediaqueries.jsを使う
  • 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. 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. 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 Pickerhttp://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 1ajaxを使った画面遷移先で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 2Mobile Bookmark Bubbleを使いたいが、JQMのajaxのせいでうまく動かないiPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQueryMobileと併用してみたhttp://d.hatena.ne.jp/a_kimura/20110507/1304801259
  • 57. Question 3header部分にsubmitを配置する為に、form要素をheaderも含めて囲むと、iPhoneで表示が崩れる。現象を確認できませんでした。もしかしたら、marginやpaddingの設定があるのかもしれません。どうしてもダメなら、スクリプトで。
  • 58. Question 4ダブルタップを判定するために、タップしてからアクションするまでに タイムラグが生じますが、シングルタップのみしか使用しない設計を している場合、ダブルタップの判定を省略することは出来るのでしょうか?vclickイベントを利用してください。
  • 59. Question 5jQueryMobileを採用して、格好いいUIを提供しているサイト(事例)があれば知りたい。とくに金融系で何かあれば。jQuery Mobileの事例紹介など。jQM GalleryにCoolなサイトはたくさん置いてあります!金融系かどうかはちょっとわかりません…
  • 60. Question 6JavaScriptの実機での効率の良いデバッグ方法最近だとAdobe Shadowがリモートデバッグに対応していますね。Chrome for Androidも同じくリモートデバッグができます。それ以外は、weinreというツールもあります。
  • 61. Question 7アンカーリンクは使えないんでしょうか?代替はどのようなものがあるのでしょうか?a要素にdata-ajax="false"を指定してください。
  • 62. Question 8jQuery Mobile 1.0.1から1.1へアップデートする際の注意点など基本的に動作はしますが、アニメーションのデフォルトがfadeになったことと固定ツールバーが変わっているのでそこだけ注意です
  • 63. Question 9ページ遷移で発生するイベントの効果的な使い方等あれば参考にしたいです。通常のページで簡単に利用できるGoogle Maps、GoogleAnalytics、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)]); });}
  • 65. Question 10ネイティブアプリにするかhtml5で作るかの判断の仕方まず、HTML5で対応できない機能用件があるかどうか、そしてパフォーマンスやユーザービリティを重視する案件であるかどうかが大きな判断材料になるかと思います。
  • 66. Question 11iOS4での重さは改善したのか。各種モバイル端末の動作具合(iOSやAndroid)パフォーマンスは良くなっているはずですが、感覚のところもあるので是非試してみてください。
  • 67. Question 12スマートフォン対応の業務アプリ開発における課題。(もちろん主観で構いません。)業務アプリの場合、jQuery Mobileのデメリットをあまり考え無くても良いので積極的に利用できるかと思います。
  • 68. Question 13ガラケーモバイルサイトからスマートフォン用のサイトへの移行。UTF-8化、viewportタグ、jQuery Mobileの読み込み、data-role="page"によるページの切り出し、最後にdata-enhance="false"でネイティブのUIを利用しつつ少しずつ対応
  • 69. Question 14陥りやすい落とし穴などあればぜひ教えていただきたいです。Ajaxによるページ遷移の仕組みに起因する問題が多いです。 script等がうまく読み込めない、動作しない場合の対応 (page関連のイベントを使う) 複数のファイルのページを同じページに取り込むので、id 属性の重複に気をつけること ローカル環境では、XHRの制約で別ファイルへ遷移ができ ないこと(サーバー環境では可能)
  • 70. more?
  • 71. Thank you!! ( @yoshikawa_t)