スマートフォンサイトの作成術 - 大川洋一
Apr. 2, 2011•0 likes•10,719 views
Download to read offline
Report
Design
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。
okyawaFollow
Recommended
High Performance Web DesignKoji Ishimoto
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
Game Development Using HTML 5osa_ora
Accessibility - A feature you can buildMonika Piotrowicz
Building Mobile Applications with IonicMorris Singer
More Related Content
What's hot
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Top 10 HTML5 features every developer should know!Gill Cleeren
Real World Web componentsJarrod Overson
Wordpress Beyond WebsitesScott Saunders
Real World Web Standardsgleddy
State of jQuery June 2013 - Portlanddmethvin
![Performance as User Experience [AEADC 2018]](https://cdn.slidesharecdn.com/ss_thumbnails/performanceasuserexperienceaeadc2018-180806174424-thumbnail.jpg?width=2048&height=1162&fit=bounds)
Viewers also liked
設計から実装まで、今すぐ始める高速化masaaki komori
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
ノンプログラマーのためのjQuery入門Hayato Mizuno
レスポンシブ・ウェブデザイン基礎masaaki komori
Webデザインのセオリーを学ぼうToshiaki Sasaki
ノンデザイナーのための配色理論tsukasa obara
Similar to スマートフォンサイトの作成術 - 大川洋一
Web app조 용구
Web app조 용구
HTML5 on MobileAdam Lu
Attractive HTML5~開発者の視点から~Sho Ito
About Best friends - HTML, CSS and JSNaga Harish M
Html5 on Mobile(For Developer)Adam Lu
Recently uploaded
paramountpictures.pptxssuser88cf801
VICTORIA MEMORIAL CASE STUDYJashanPreet56
Cushion chair | AMEDinesh397947
Amazon A Plus Content Visually Appealing.pptxSherylEleazar
MGM Research.pptxssuser88cf801
Chat.pptxChristianFazio2
スマートフォンサイトの作成術 - 大川洋一
- 1. 2011.04.02
- 2. • Hirokazu Okawa twitter : @okyawa •
- 3. • • CentOS Apache PostgreSQL PHP
- 4. PC
- 5. WebKit
- 6. WebKit • HTML
- 7. WebKit • Safari (iPhone Mobile Safari) • Chrome (Android ) • BlackBerry (OS6 )
- 9. • Web
- 10. • iPhone Web
- 11. • 980 • • 1500
- 12. • ( ) viewport
- 13. <meta name="viewport" width=”device-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no;" /> • width ( ) default 980 device-width • initial-scale 1.0 • maximum-scale • user-scalable yes/no
- 14. CSS
- 15. • body { -webkit-text-size-adjust: none; }
- 17. •
- 18. • • Ajax • HTML
- 19. • HTML • JSON (JavaScript Object Notation)
- 20. HTML • HTML • Javascript DOM • PHP
- 21. JSON • PHP JOSN → • Javascript • DOM •
- 22. DOM • HTML (appendChild , insertBefore ) • HTML
- 23. • Ajax •
- 24. Ajax Ajax Ajax
- 25. • Cookie • Web Storage ✴ ✴
- 26. Cookie • • • (4KB)
- 27. Web Storage • HTML5 API • Cookie • iPhone 5MB • Cookie key-value • (※ JSON )
- 28. • • • Cookie
- 29. • ( ) • •
- 30. WebStorage obj.setItem(key,value) ◦ • obj.getItem(key) ◦ • obj.removeItem(key) ◦ • obj.clear() ◦ • obj.key(n) ◦n (0 ) • obj.length ◦
- 31. • • • obj.getItem(key) • •
- 32. Chrome, Safari Developer Tools Resources Local Strage Session Strage • key Ajax value JSON
- 33. // if (window.sessionStorage) { sessionStorage.clear(); } // if (window.sessionStorage) { var key = 'go=product-list&mode=line&id=4page=1'; sessionStorage.setItem(key, jsonData); var obj = JSON.parse(jsonData); jQuery(obj).each(function(index, jsonElement) { // preload image new Image().src = jsonElement.photo.url; }); }
- 34. // var key = 'go=product-list&mode=line&id=4page=1'; var parseStrageData = null; if (window.sessionStorage) { var strageData = sessionStorage.getItem(key) if (key) { try { var parseStrageData = JSON.parse(strageData); } catch (e) { parseStrageData = null; } } } if (parseStrageData) { // } else { // Ajax }
- 36. • • GD PING • 80px
- 37. • <img src=”chair.jpg” width=”80” /> 80px 160px
- 38. • • CSS max-width: 100%;
- 39. • •
- 40. <li id="listbox_132"> <a href="javascript:void(0);"> <img id="thumbnail_132" class="thumbnail_btn" src="thumnail_product01.png"> </a> </li> var mainPhoto = []; mainPhoto[120] = 'product01.jpg'; mainPhoto[132] = 'product02.jpg'; mainPhoto[181] = 'product03.jpg'; mainPhoto[247] = 'product04.jpg'; jQuery('.thumbnail_btn').each(function(index, elem) { var num = elem.id.replace(/thumbnail_/,''); var mainImage = new Image(); mainImage.onload = function() { // }; mainImage.src = mainPhoto[num]; });
- 42. HTML input type • tel iPhone • number • email type • url
- 43. • <input type="tel" />
- 44. • <input type="number" />
- 45. • <input type="email" />
- 46. URL • <input type="url" />
- 47. • <input type=”text” placeholder=" " />
- 48. • • 2 → • •
- 49. var autoFitTextareaHeight = function (elem, keyCode, fit) { // backspace or delete or onblor if (keyCode === 8 || keyCode === 46 || fit) { elem.style.height = 'auto'; } if (elem.offsetHeight < elem.scrollHeight) { elem.style.height = elem.scrollHeight + 'px'; } } autoFitTextareaHeight(elem); jQuery(elem).bind('keyup', function (event) { autoFitTextareaHeight(event.target, event.keyCode, false); }); jQuery(elem).bind('blur', function (event) { autoFitTextareaHeight(event.target, event.keyCode, true); });
- 51. • window.orientation • 0 • 90 • -90 • 180
- 52. • orientationchange • iPhone •
- 53. <body onorientationchange="alert(' ');"> window.addEventListener('orientationchange', function () { alert(' '); }, false);
- 54. Android • orientationchange resize window.addEventListener('resize', orientFunc, false);
- 55. • window.onresize iPhone (maximum call stack size exceeded) • iPhone var eventName = 'resize'; if (-1 < navigator.userAgent.indexOf('iPhone') || -1 < navigator.userAgent.indexOf('iPod')) { eventName = 'orientationchange'; } window.addEventListener(eventName, sampleFunc, false);
- 57. • • • IE
- 59. PC
- 62. iPhone 20px • iPhone GS 60px 320px × 480px 356px • iPhone 640px × 960px ( 320px × 480px) 44px
- 63. Android • 320px × 480px • 480px × 800px • 480px × 854px • 640px × 960px • 960px × 480px • 320px
- 64. •
- 65. URL • URL (60px) •
- 66. URL function hideUrlBar() { setTimeout(function () { if (scrollY < 60) { scrollTo(0, 1); } }, 1); }
- 67. PC • PC
- 69. <a href="tel:1-408-555-5555">1-408-555-5555</a>
- 70. • 651-0096 651-0096 • meta <meta name="format-detection" content="telephone=no"/>
- 71. YouTube <a href="youtube: ID"> </a> <a href="http://www.youtube.com/v/ ID"> </a> <a href="http://www.youtube.com/watch?v= ID"> </a> •a YouTube • YouTube YouTube
- 73. <a href="maps:q= "> </a> <a href="http://maps.google.com/maps?q= "> </a> <a href="http://maps.google.co.jp/maps?q= "> </a> <a href="http://maps.google.co.jp/maps?q= , + "> </a>
- 75. iPhone • Mac • iOS SDK
- 77. Android • Android SDK • Windows Mac OS X (intel) Linux (i386) • Andorid Platform
- 78. [Ctrl]+[F12] [Ctrl]+[F11]
- 79. Opera Mobile • Opera Mobile emulator •
- 80. Opera Mini • Opera Mini Simulator • • Opera • Opera
- 81. BlackBerry • BlackBerry Smartphone Simulators • Windows XP 7 Java JDK, Eclipse3.6 • Eclipse MDS Services Simulator Package
- 87. Windows Phone • Windows Phone Developer Tools • Windows Vista Windows7
- 89. •
- 90. • CSS
- 91. PC <link media="screen and (min-device- width:481px)" rel="stylesheet" type="text/ css" href="pcsite.css" /> iPhone <link media="only screen and (max- device-width:480px)" href="smartphone.css" type="text/css" rel="stylesheet" />
- 92. • iUi • iWebKit • Universal iPhone UI Kit • jQTouch • WebKit • jQueryMobile •
- 94. • Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/ 528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16 • Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/ 528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16 • Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3 • Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 • Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.0176/1150; U; ja) Presto/2.4.15 • BlackBerry9000/4.6.0.224 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/220
- 96. • • • touchstart • gesturestart • touchend • gesturechange • touchmove • gestureend • touchcancel
- 97. • mousewheel • 2 • 2 1
- 99. • • • •