![<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];
});](https://image.slidesharecdn.com/20110402ocnksmartphone2-110402124239-phpapp02/85/-40-320.jpg)
![[Ctrl]+[F12]
[Ctrl]+[F11]](https://image.slidesharecdn.com/20110402ocnksmartphone2-110402124239-phpapp02/85/-78-320.jpg)
![Performance as User Experience [AEADC 2018]](https://cdn.slidesharecdn.com/ss_thumbnails/performanceasuserexperienceaeadc2018-180806174424-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (7)
Similar to スマートフォンサイトの作成術 - 大川洋一 (20)
Recently uploaded (20)
スマートフォンサイトの作成術 - 大川洋一
- 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
- 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
- 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. • • • •