67WS - スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!
•
6 likes•2,760 views
2014年12月10日(水)に67WSで行われた無料のイベント「スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!」のスライドです。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
67WS - スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!
- 2. 西畑一馬
- 3. フロントエンドエンジニア 西畑 一馬 http://blog.webcreativepark.net
- 9. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS
- 10. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS CSSポストプロセッサー
- 11. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS CSSポストプロセッサータスクランナー
- 12. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー
- 13. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー マルチデバイス対応
- 14. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー マルチデバイス対応jQuery
- 15. 多様化するマークアップ業務 CSSプリプロセッサー HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー マルチデバイス対応 JavaScript jQuery
- 16. 多様化するマークアップ業務 CSSプリプロセッサー 求められるスキルはと日わ々、増加していく HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー マルチデバイス対応 JavaScript jQuery
- 17. 多様化するマークアップ業務 CSSプリプロセッサー そして学んだことも変化していく HTML5+CSS3 HTML+CSS パフォーマンス タスクランナー CSSポストプロセッサー マルチデバイス対応 JavaScript jQuery とわ
- 18. どっちが早い？ for(var i=0; i<100; i++){ $('ul.hoge') } for(var i=0; i<100; i++){ $('.hoge') } 参考:http://blog.webcreativepark.net/2014/12/02-013527.html
- 20. とわ Agenda jQueryの読み込み方法 スマートフォンのviewport
- 22. 読み込み方法 <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
- 23. 読み込み方法 <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
- 25. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x
- 26. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.9.x
- 27. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x
- 28. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x
- 29. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE6～
- 30. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE9～ IE6～
- 31. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE9～ IE6～
- 32. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE9～ IE6～ IE8～
- 33. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE9～ IE6～ IE8～ 後方互換性 を重視
- 34. 読み込み方法 <!--[if lt IE 9]> <script src="jquery-1.11.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.1.1.js"></script> <!--<![endif]--> jQuery 2.0 Beta 3 Released | Official jQuery Blogより http://blog.jquery.com/2013/04/09/jquery-2-0-beta-3-released/
- 35. 読み込み方法 <!--[if lt IE 9]> NG <script src="jquery-1.11.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.1.1.js"></script> <!--<![endif]--> jQuery 2.0 Beta 3 Released | Official jQuery Blogより http://blog.jquery.com/2013/04/09/jquery-2-0-beta-3-released/
- 36. 読み込み方法 If you want, you can serve 2.0 to newer browsers and 1.9 to older ones using our conditional comment trick, but that is not required. jQuery 2.0 Released | Official jQuery Blogより http://blog.jquery.com/2013/04/18/jquery-2-0-released/
- 37. jQueryのversion 2.1.x 1.11.x 2.0.x 1.10.x 1.8.3 1.9.x 3.x compat 3.x IE9～ IE6～ IE8～ 後方互換性 を重視
- 38. CDNの活用 <script src="//ajax.googleapis.com/ajax/libs/ jquery/2.1.1/jquery.min.js"></script>
- 39. 普通のサーバー A B
- 40. CDN A B
- 41. CDN A B
- 42. CDN ホスト jQuery公式のCDN http://code.jquery.com/ ! Google Hosted Libraries https://developers.google.com/speed/libraries/devguide?hl=ja#jquery ! Microsoft Ajax Content Delivery Network http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0
- 43. <script src=“//ajax.googleapis.com/ajax/libs/jquery /1.2.1/jquery.min.js"></script> <script> (window.jQuery || document .write('<script src="/script/jquery-1.2.1.min.js"></script>')); </script> CDNのフォールバック
- 44. 読み込みの高速化 <head> (中略) <script src="jquery.min.js"></script> </head> <script src="jquery.min.js"></script> </body>
- 45. 読み込みの高速化 <head> (中略) <script src=“jquery.min.js" defer></script> </head> <head> (中略) <script src=“jquery.min.js" async></script> </head>
- 47. Expires ExpiresActive On ExpiresByType image/gif "access plus 30 days" ExpiresByType image/jpeg "access plus 30 days" ExpiresByType image/png "access plus 30 days" ExpiresByType text/css "access plus 30 days" ExpiresByType application/x-javascript "access plus 30 days"
- 50. PCモードとSPモード
- 51. PCモード
- 52. PCモード 980px iPhone 980px ! Android 800px ～ 1000px
- 53. SPモード
- 54. viewport <meta name="viewport" content="width=device-width,initial-scale=1">
- 55. device-width WebサイトをDevice Pixel Ratioに 応じて描画する設定
- 56. Device Pixel Ratio 1pxを何px使って描画するかの設定
- 57. SPモード(iPhone 3G/ 3GS) 実解像度 320px CSS解像度 320px
- 58. iPhone 4/ 4S / 5 / 5S / 5C 実解像度 640px CSS解像度 320px
- 60. iPhone 4/ 4S / 5 / 5S / 5C Device Pixel Ratio 2 640個
- 61. iPhone 4/ 4S / 5 / 5S / 5C Device Pixel Ratio 2 320個 (640/2)
- 62. Galaxy S Device Pixel Ratio 1.5 320個 (480/1.5)
- 63. ARROWS X F-10D Device Pixel Ratio 2 360個 (720/2)
- 64. HTC J butterfly Device Pixel Ratio 3 360個 (1080/3)
- 66. iPhone 6
- 67. iPhone 6 Device Pixel Ratio 2 750個 1334個
- 68. iPhone 6 Device Pixel Ratio 2 375個 (750/2) 667個(1334/2)
- 69. iPhone 6 Plus
- 70. iPhone 6 Plus Device Pixel Ratio 3 1080個 1920個
- 71. iPhone 6 Plus Device Pixel Ratio 3 360個 640個 (1080/3) (1920/3)
- 72. downsampling
- 73. iPhone 6 Plus Device Pixel Ratio 3 414個 736個 (1080/3*1.15) (1920/3*1.15) downsampling 1.15
- 76. iPhone 6 Device Pixel Ratio 2 320個 (750/2/1.1785) 568個 (1334/2/1.1785) upsamping 1.171875
- 77. iPhone 6 Plus Device Pixel Ratio 3 375個 667個 (1080/3*0.96) (1920/3*0.96) downsampling 0.96
- 79. viewportに対する数値指定 <meta name="viewport" content="width=320,initial-scale=1"> <meta name="viewport" content="width=330,initial-scale=1">
- 80. レスポンシブのブレークポイントは？ スマートフォン portrate 320 ～ 414 landscape 480 ～ 736 タブレット portrate 600 ～ 768 landscape 966 ～ 1028
- 81. 最近の対応OS
- 82. iOSのバージョンシェア 4% 33% https://developer.apple.com/support/appstore/ 63% iOS8 iOS7 Earlier
- 83. Androidのバージョンシェア 7%1% 8% 9% 20% 21% 34% 4.4 4.1 4.2 2.3 4.0 4.3 2.2 https://developer.android.com/about/dashboards/index.html?utm_source=ausdroid.net
- 84. OSバージョンごとに確認 •メジャー最新版 •7.x / 8.x ! •マイナー最新版 •4.0.x / 4.1.x / 4.2.x / 4.3.x / 4.4.x / 5.0.x
- 86. Thank you!! 67WS 西畑一馬