Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobileではじめるモバイルサイト/アプリ制作

10,761 views

Published on

Published in: Technology, Business

jQuery Mobileではじめるモバイルサイト/アプリ制作

  1. 1. jQuery Mobile 2011/12/13 at #ragtech1213 Toru Yoshikawa ( @yoshikawa_t )
  2. 2. Toru Yoshikawa@yoshikawa_t• Google API Expert Chrome• html5j.org HTML5• allWeb jQuery Mobile• Web• Blog http://d.hatena.ne.jp/pikotea/
  3. 3. • jQuery Mobile• jQuery Mobile•• Web API•
  4. 4. http://jquerymobile.com/
  5. 5. jQuery Mobile
  6. 6. jQuery Mobile•• jQuery••
  7. 7. jQuery Mobile• Cross-platform• Markup-driven• Progressive Enhancement
  8. 8. Cross-platformApple iOS 3.2 5.0 AAndroid 2.1 2.3 Honeycomb AWindows Phone 7.0 7.5 A 6.0 7.0 Playbook ABlackberry 5.0 BPalm WebOS 1.4 2.0 3.0 AFirefox Mobile Beta AOpera Mobile 11.0 AOpera Mini 5.0 6.0 BMeeGo 1.2 AKindle 3 Fire ANokia Symbian Symbian^3 BChrome 11 15 AFirefox 4 8 AInternet Explorer 7 9 AOpera 10 11 A http://jquerymobile.com/gbs/
  9. 9. Markup-driven JavaScript<!-- --><a href="#" data-role="button">Button</a>
  10. 10. Progressive Enhancement JavaScript ON JavaScript OFF
  11. 11. jQuery Mobile•••
  12. 12. jQuery Mobile•• jQuery Mobile
  13. 13. jQuery Mobile CMS jQuery Mobile
  14. 14. jQuery Mobile
  15. 15. jQuery Mobile<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title> </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- --> <div data-role="page" id="main"> <!-- --> <div data-role="header"> <h1> </h1> </div> <!-- --> <div data-role="content"> </div> <!-- --> <div data-role="footer"> <h4> </h4> </div> </div> </body></html>
  16. 16. jQuery Mobile<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title> </title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script></head> http://jquerymobile.com/download/
  17. 17. ‣ • • •
  18. 18. <!-- --><div data-role="page">  <!-- -->  <div data-role="header">    <h1> </h1>  </div>  <!-- -->  <div data-role="content">      </div>  <!-- -->  <div data-role="footer">    <h1> </h1>  </div></div>
  19. 19. • ajax‣ • slide • slideup • slidedown • pop • fade • flip
  20. 20. <!-- slide --><a href="#next">slide</a><!--  --><a href="#next" data-transition="slideup">slide</a> sample/page_transition.html
  21. 21. ••
  22. 22. <!-- data-rel dialog --><a href="#confirm" data-rel="dialog"> </a><!-- ---><div data-role="page" id="confirm">  <div data-role="header">    <h1> </h1>  </div>  <div data-role="content">    ...  </div></div>sample/dialog.html
  23. 23. http://d.hatena.ne.jp/pikotea/20101019/
  24. 24. • <a data-role="button">• <button>‣ <input type=""> - button - submit - reset - image• : data-role="inline"• : class="ui-bar"
  25. 25. ‣ : data-icon • arrow-l • etc...‣ : data-iconpos • left • right • notext • etc...
  26. 26. • <input type=""> - text - search - range• <textarea>
  27. 27. • data-role="fieldcontain" label width < 480px width >= 480px
  28. 28. <!-- data-role="fieldcontain" label  --><div data-role="fieldcontain">  <label for="text-search"> :</label>  <input type="search" id="text-search"placeholder=" ..."></div>
  29. 29. ‣ <input type=""> - checkbox - radio• <label>
  30. 30. • : data-role="controlgroup" - button - checkbox - radio - select• : data-type - vertical - horizontal
  31. 31. • : <select data-role="slider"><option> ×2‣ : <select> - - : data-native- menu="false"
  32. 32. • <div data-role="collapsible">• : data-collapsed - : false - : true• data-collapsible-set :
  33. 33. 1• : <ul data-role="listview"> - - - : <li><a> - -• - : <li> divider="true" data-list- - - - : <li><img> - - : <li><span class="ui-li- aside"> -
  34. 34. 2• : <ul data-role="listview"> - - - - -• - - - - - : <li><img class="ui-li- icon"> - - : <ul data-inset="true"
  35. 35. 3• : <ol data-role="listview"> - - <ol> - - : <li><ul> -• - - : <li><span class="ui-li-count"> - - - - -
  36. 36. 4• : <ul data-role="listview"> - - - - - : <li>2 <a>• - - - : data-filster="true" - - - -
  37. 37. • : data-fullscreen="true"• : data- position="fixed"• : <div data- role="navbar"><ul><li>< a>
  38. 38. •‣ <div class="ui-grid-a"> - <div class="ui-block-a"> - <div class="ui-block-b">
  39. 39. • data-theme• "a" "e" 4• "f" "z"
  40. 40. • ★ThemeRoller ★
  41. 41. ThemeRollerjQuery Mobile http://jquerymobile.com/themeroller/
  42. 42. ThemeRoller••• 30•• Adobe Kuler http://kuler.adobe.com/
  43. 43. ThemeRoller
  44. 44. Demohttp://jquerymobile.com/themeroller/index.php?style_id=20111212-57 30
  45. 45. jQuery Mobile<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><link rel="stylesheet" href="custom.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  46. 46. data-theme<div data-role="page" data-theme="f"> <div data-role="header" data-theme="f"> ... </div> <div data-role="content"> ... </div></div>
  47. 47. ThemeRoller1. ThemeRoller2.
  48. 48. iOShttp://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
  49. 49. • ✦ ✦ ✦ ✦
  50. 50. DOMChrome
  51. 51. • Internet Explorer -• Chrome -• Firefox - firebug• Opera - Dragonfly• Dreamweaver
  52. 52. 1. <h1>2.3.4.
  53. 53. Demo
  54. 54. <h1>.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0!important;}
  55. 55. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><style>.ui-header .ui-title { margin: .6em 45px .8em;}</style>
  56. 56. .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;}
  57. 57. ID<a href="#" data-role="button" id="btn1" > 1</a><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><style>#btn1.ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;}</style>
  58. 58. DOM ex) <input><input type="button" value=" 2" id="btn2"><div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadowui-btn-up-c" aria-disabled="false"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"> <span class="ui-btn-text"> 2</span> </span> <input type="button" value=" 2" id="btn2" class="ui-btn-hidden" aria-disabled="false"></div>
  59. 59. "ui-btn-active"<div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">Menu1</a></li> <li><a href="#page2" data-transition="fade">Menu2</a></li> <li><a href="#page3" data-transition="fade">Menu3</a></li> </ul></div>
  60. 60. ui-body-aui-bar-aui-btn-activeui-btn-up-aui-btn-down-aui-btn-hover-aui-corner-allui-corner-topui-corner-bottom
  61. 61. • <div> - ui-body-e - ui-corner-all
  62. 62. jQuery Mobile anything!<input type="button" value=" 1" data-role="none" >
  63. 63. jQuery Mobile Gallery http://www.jqmgallery.com/
  64. 64. Web API
  65. 65. jQuery MobilejQuery jQuery Mobile<link rel="stylesheet" href="jquery.mobile.css" /><script src="jquery.js"></script><!-- jQuery jQuery Mobile --><script>$(document).bind("mobileinit", function(){ $.mobile.foo = bar;});</script><script src="jquery.mobile.js"></script>
  66. 66. 1$.mobileloadingMessage ajax : "loading"pageLoadErrorMessage ajax : "Error Loading Page"
  67. 67. 2$.mobiletouchOverflowEnabledoverflow-scrolling: touch iOS5 : truepushStateEnabledURL history.pushState URL : true
  68. 68. 3$.mobileajaxEnabled ajax : true
  69. 69. UI<link rel="stylesheet" href="jquery.mobile.css" /><script src="jquery.js"></script><!-- jQuery jQuery Mobile --><script>$(document).bind("mobileinit", function(){ //data-role="page" $.mobile.page.prototype.options.foo = bar;});</script><script src="jquery.mobile.js"></script>
  70. 70. //$.mobile.page.prototype.options.backBtnText = ;<!-- --><div data-role="page" data-back-btn-text=" ">  ...</div>※ data
  71. 71. //$(document).bind(mobileinit, function(){ // $.mobile.loadingMessage = ; $.mobile.pageLoadErrorMessage = ; $.mobile.dialog.prototype.options.closeBtnText = ; $.mobile.selectmenu.prototype.options.closeText= ; $.mobile.listview.prototype.options.filterPlaceholder = ; $.mobile.page.prototype.options.backBtnText = ;});
  72. 72. jQuery Mobile API
  73. 73. API1$.mobile.changePage(to, options)• to: URL jQuery $(‘#pageid’)• options : - type :”get” get post - data - transition : - reverse : false - changeHash : true - reloadPageI : false
  74. 74. $.mobile.changePage(to, options)// id="next"$.mobile.changePage(#next);//$.mobile.changePage(next.html, { type: get, data: $(#formId).serialize() //});// pop$.mobile.changePage(#next, { transition: pop, changeHash: false});
  75. 75. API2$.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg()
  76. 76. $.mobile.showPageLoadingMsg()$.mobile.hidePageLoadingMsg()//$.mobile.showPageLoadingMsg();// :var list = $(#listview-id); //for ( var i = 0; i < 10; i++ ) { list.append($(<li> + i + </li>));}list.listview(refresh);//$.mobile.hidePageLoadingMsg();
  77. 77. API3$.mobile.silentScroll(yPos) y• yPos : y :0
  78. 78. $.mobile.silentScroll(yPos)//$.mobile.silentScroll();//$.mobile.silentScroll($(#target).position().top);
  79. 79. UI API1page()button(method)• method : - refresh β1 - enable - disable
  80. 80. page()//$(#target).append($(<input type="button" value=" ">));$(#target).page();button()//$(#buttonid).button(disable);
  81. 81. UI API2dialog(method)• method : - closelistveiw(method)• method : - refresh
  82. 82. jQuery Mobile
  83. 83. • - pageinit - - pagebeforeshow - tap - pagebeforehide - taphold - pageshow - swipe swipeleft - pagehide - swiperight •• - pagebeforechange - - pagechange - scrollstart scrollstop - pagechangefailed• • - - mobileinit - pagebeforecreate - orientationchange pagecreate - throttledresize
  84. 84. 1mobileinitjQuery Mobile jQuery Mobile//jQuery Moible$(document).bind(mobileinit, function(){ // $.mobile.loadingMessage = ;});
  85. 85. 2pagebeforecreate pagecreate 1//$(#pageId).bind("pagebeforecreate", function(evt){ // //Home $(#target).append(<a href="#home" data-role="button"data-icon="home" data-iconpos="notext">Home</a>); //false //return false;});
  86. 86. 3pagebeforechange pagechange pagebeforecreate pagebeforeshowpagechangefailed
  87. 87. pagebeforeloadpageload pageloadfailedpagebeforecreatepagecreatepageinitpagebeforechangepagebeforeshowpageshowpagechange pagechangefailed
  88. 88. //$(document).ready( function(){ $(:jqmData(role=page)).live("pagebeforecreate", function(evt){ // $(this).find(:jqmData(role=header)).append( $(<a href="#main" data-role="button" data-icon="home"data-iconpos="notext" class="ui-btn-right">Home</a>) ); });});
  89. 89. <div data-role="page" data-dom-cache="true">...</a><a href="next.html" data-prefetch>...</a>> git clone git://github.com/jquery/jquery-mobile.gitbuild.xml> cd jquery-mobile> make
  90. 90. PhoneGapWeb http://phonegap.com/
  91. 91. PhoneGap• Web HTML/CSS/ JavaScript• One source Android iPhone•• Dreamweaver CS5.5
  92. 92. PhoneGap BuildPhoneGap Buildhttps://build.phonegap.com/
  93. 93. • git• zip index.html
  94. 94. • iPhone
  95. 95. Demo
  96. 96. PhoneGap• HTML/CSS/JavaScript•• PhoneGap Build
  97. 97. jQuery Mobile Publickeyhttp://www.publickey1.jp/m/ http://kokucheese.com/s/
  98. 98. jQuery MobileFinal fantasy XI Forum http://forum.square-enix.com/ffxi/ http://www.junkudo.jp/ forum.php
  99. 99. jQuery MobileWALLPAPER COLLECTION http://machiuke.v-colors.com/ http://baito.mynavi.jp/sp/
  100. 100. jQuery Mobile Design Spice http://design-spice.com/
  101. 101. jQuery Mobile• jQuery Mobile• UI• Date Picker UI
  102. 102. Thank You!!Toru Yoshikawa ( @yoshikawa_t )
  103. 103. http://jquerymobile.com/http://jquerymobile.com/demos/jQuery Mobilehttp://d.hatena.ne.jp/pikotea/20101019/jQuery Mobilehttp://dev.screw-axis.com/doc/jquery_mobile/jQuery Mobilehttp://www.jqmgallery.com/
  104. 104. jQuery Mobilehttp://www.adobe.com/jp/joc/devnet/dreamweaver/articles/jq_snippets.htmlGithub jquery-mobilehttps://github.com/jquery/jquery-mobile

×