jQuery Mobileバレしないモバイルサイトの作り方

• 1. jQuery Mobile 2012/10/20 ICT ERA + ABC 2012 Toru Yoshikawa ( @yoshikawa_t)

2. Who? / Toru Yoshikawa@yoshikawa_t C.A.Mobile Web html5j.org/HTML5 Google API Expert ( Chrome ) jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/ 3. jQuery Mobile HTML5 http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/ 484433266X 4844332937 4. Agenda1. jQuery Mobile 2. jQuery Mobile 3. jQuery Mobile 4. 5. 1. jQuery Mobile http://www.jqmgallery.com/ 6. Not cool :( 7. Cool :) 8. jQuery Mobile jQuery Mobile jQuery Mobile 9. jQuery Mobile 10. 2. jQuery Mobile 11. 1. ThemeRoller2. 12. ThemeRollerUIhttp://jquery.mobile.com/themeroller/ 13. UI.ui-header .ui-title {/* customize */} 14. jQuery Mobile jQuery Mobile 15. jQuery Mobile - .ui-body-a .ui-body-e - .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c - .ui-corner-all, .ui-shadow, .ui-li-has-thumb 16. 17. .ui-header .ui-page .ui-content.ui-dialog.ui-footer 18. Tips 1 .ui-header { /* */background: linear-gradient(top,#fff 0%, #fdfcfc 50%, #f5efef 50%,#ebe1e1 100%);border: 1px solid #bbb;}.ui-content { /* */background: url(images/bg.gif);} 19. 20. .ui-btn.ui-btn-inner.ui-icon.ui-btn-text 21. Tips2 .ui-btn-corner-all { /* .ui-btn-up-c, .ui-btn-hover-c,*/ .ui-btn-down-c { /* */ border-radius: 0.2em;}border: 1px solid #bbb; background: #fff;.ui-btn-inner { /* */ box-shadow: none;font-size: 1em;}padding: 0.6em 20px;} .ui-btn-active { /* */ background: #aaa; box-shadow: inherit; text-shadow: inherit; } 22. 23. .ui-listview.ui-li-has-thumb .ui-li.ui-btn-inner .ui-btn-text.ui-btn .ui-li-heading .ui-link-inherit .ui-icon.ui-li-desc.ui-li-thumb 24. Tips3 .ui-li-thumb { /* */padding: 10px;max-height: 70px;max-width: 70px;}.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit { /* */min-height: 70px;padding-left: 75px;}.ui-li-heading { /* */font-size: 1.1em;} 25. Tips4 icons-18-white.pngicons-36-white.png 26. Tips 5$(document).on(mobileinit, function(){$.mobile.defaultPageTransition = none;}); Android 2.x fade 27. 3. jQuery Mobile 28. flexslider 29. jQuery Mobile data-ajax Ajax data-enhance jQuery Mobile pageinit pageshow 30. jQuery Mobile JS $(document).on(mobileinit, function(){ $.mobile.ignoreContentEnabled = true; }); data-ajaxdata-enhance

31. : pageinit jQuery Mobile load$(document).on(pageinit, #page-id, function(){/* DOM */}); 32. : pageshow Google Analytics $(document).on(pageshow, #page-id, function(){/* */}); 33. pageinit pageshow1 $(document).on(pageinit, #page-id, function(){$(this).one(pageshow, function(){/* */});}); 34. $(document).on(mobileinit, function(){$.mobile.ignoreContentEnabled = true;});$(document).on(pageinit, #page-id, function(){$(this).one(pageshow, function(){/* */$(this).find(.flexslider).flexslider();});});

35. 4. 36. jQuery Mobile ThemeRoller jQuery Mobile 37. 1.32012420121012 1.420132201313 1.520132201346 1.620133201379 1.72013420131012 38. jQuery Mobile https://groups.google.com/group/jqm-jp/jQuery Mobile 39. Thank you!! ( @yoshikawa_t ) 40. ResourcesjQuery Mobile ( http://jquerymobile.com/ )jQuery Mobile ( http://www.jqmgallery.com/ )jQuery Mobile ( http://www.impressjapan.jp/books/3266 ) jQuery Mobile ( https://groups.google.com/group/jqm-jp/ )