67ws - スマートフォンサイトマークアップ...
TRANSCRIPT
スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!
67WS
西畑一馬
西畑一馬
西畑 一馬フロントエンドエンジニア
http://blog.webcreativepark.net
西畑 一馬フロントエンドエンジニア
西畑 一馬フロントエンドエンジニア
多様化するマークアップ業務
多様化するマークアップ業務
HTML+CSS
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
CSSプリプロセッサー
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
CSSポストプロセッサー
CSSプリプロセッサー
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナーCSSポストプロセッサー
CSSプリプロセッサー
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
マルチデバイス対応
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
マルチデバイス対応 jQuery
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
マルチデバイス対応
JavaScript
jQuery
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
マルチデバイス対応
JavaScript
jQuery
とわ求められるスキルは日々、増加していく
多様化するマークアップ業務
HTML5+CSS3 HTML+CSS
タスクランナー
パフォーマンス
CSSポストプロセッサー
CSSプリプロセッサー
マルチデバイス対応
JavaScript
jQuery
とわそして学んだことも変化していく
for(var i=0; i<100; i++){ $('.hoge')}
for(var i=0; i<100; i++){ $('ul.hoge')}
どっちが早い？
参考:http://blog.webcreativepark.net/2014/12/02-013527.html
HTML+CSSとわ日々、知識のINPUTとUPDATE
とわ
jQueryの読み込み方法
スマートフォンのviewport
Agenda
jQueryの読み込み方法
スマートフォンのviewport
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
読み込み方法
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
読み込み方法
jQueryのversion
2.1.x
1.11.x
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE6～
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE9～
IE6～
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE9～
IE6～
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE9～
IE6～ IE8～
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE9～
IE6～ IE8～
後方互換性 を重視
<!--[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/
<!--[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/
NG
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/
jQueryのversion
2.1.x
1.11.x
2.0.x
1.10.x
1.9.x1.8.3
3.x
3.xcompat
IE9～
IE6～ IE8～
後方互換性 を重視
<script src="//ajax.googleapis.com/ajax/libs/ jquery/2.1.1/jquery.min.js"></script>
CDNの活用
普通のサーバー
A B
CDN
A B
CDN
A B
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
<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のフォールバック
<head>(中略)<script src="jquery.min.js"></script></head>
読み込みの高速化
<script src="jquery.min.js"></script></body>
<head>(中略)<script src=“jquery.min.js" defer></script></head>
読み込みの高速化
<head>(中略)<script src=“jquery.min.js" async></script></head>
キャッシュを有効にするのが 簡単確実
ExpiresActive OnExpiresByType 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"
Expires
キャッシュバスター<script src=“jquery.min.js?2014120822021234"></script></body>
とわ
スマートフォンのviewport
PCモードとSPモード
PCモード
PCモード
980px
iPhone 980px !
Android 800px ～ 1000px
SPモード
viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
device-width
WebサイトをDevice Pixel Ratioに 応じて描画する設定
Device Pixel Ratio
1pxを何px使って描画するかの設定
SPモード(iPhone 3G/ 3GS)
CSS解像度 320px実解像度 320px
iPhone 4/ 4S / 5 / 5S / 5C
CSS解像度 320px実解像度 640px
Retinaディスプレイ (高精細ディスプレイ)
640個
iPhone 4/ 4S / 5 / 5S / 5CDevice Pixel Ratio 2
320個
iPhone 4/ 4S / 5 / 5S / 5C
(640/2)
Device Pixel Ratio 2
320個
Galaxy S
(480/1.5)
Device Pixel Ratio 1.5
360個
ARROWS X F-10D
(720/2)
Device Pixel Ratio 2
360個
HTC J butterfly
(1080/3)
Device Pixel Ratio 3
http://blog.webcreativepark.net/2011/01/25-173502.html
iPhone 6
750個
iPhone 6Device Pixel Ratio 2
1334個
375個
iPhone 6
(750/2)
Device Pixel Ratio 2
667個 (1334/2)
iPhone 6 Plus
1080個
iPhone 6 PlusDevice Pixel Ratio 3
1920個
360個
iPhone 6 PlusDevice Pixel Ratio 3
640個
(1080/3)
(1920/3)
downsampling
414個
iPhone 6 PlusDevice Pixel Ratio 3
736個
(1080/3*1.15)
(1920/3*1.15)
downsampling 1.15
Display Zoom(画面表示の拡大)
320個
iPhone 6
(750/2/1.1785)
Device Pixel Ratio 2
568個(1334/2/1.1785)
upsamping 1.171875
375個
iPhone 6 PlusDevice Pixel Ratio 3
667個
(1080/3*0.96)
(1920/3*0.96)
downsampling 0.96
マルチデバイス対応の基本はリキッド
viewportに対する数値指定
<meta name="viewport" content="width=320,initial-scale=1">
<meta name="viewport" content="width=330,initial-scale=1">
レスポンシブのブレークポイントは？
スマートフォン
portrate 320 ～ 414
landscape 480 ～ 736
タブレット
portrate 600 ～ 768
landscape 966 ～ 1028
最近の対応OS
iOSのバージョンシェア
https://developer.apple.com/support/appstore/
4%
33%
63%
iOS8 iOS7 Earlier
Androidのバージョンシェア
https://developer.android.com/about/dashboards/index.html?utm_source=ausdroid.net
1%7%8%
9%
20%
21%
34%
4.4 4.1 4.2 2.3 4.0 4.3 2.2
OSバージョンごとに確認
•メジャー最新版 •7.x / 8.x !
•マイナー最新版 •4.0.x / 4.1.x / 4.2.x / 4.3.x /4.4.x / 5.0.x
西畑一馬
Thank you!!
67WS