マークアップ講座 03 スマートフォン・デバイス最適化
DESCRIPTION
Mu seminor2014 03TRANSCRIPT
![Page 1: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/1.jpg)
マークアップ講座
![Page 2: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/2.jpg)
デバイス最適化
![Page 3: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/3.jpg)
1. スマートフォン端末
2. スマートフォン・マークアップ
3. フロントエンドパフォーマンス
4. コーディングレギュレーション
![Page 4: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/4.jpg)
1. スマートフォン端末
2. スマートフォン・マークアップ
3. フロントエンドパフォーマンス
4. コーディングレギュレーション
![Page 5: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/5.jpg)
1. 解像度
2. Retinaディスプレイ
3. スマートフォン・ブラウザ
1. スマートフォン端末
![Page 6: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/6.jpg)
1. 解像度
2. Retinaディスプレイ
3. スマートフォン・ブラウザ
1. スマートフォン端末
![Page 7: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/7.jpg)
1-1. 解像度
スマートフォン解像度 代表的な解像度
デバイス CSSピクセル (ブラウザピクセル)
デバイス ピクセル比
解像度 インチ
iPhone 6 Plus 414 ✕ 736 2.61 1080 ✕ 1920 5.5
iPhone 6 375 ✕ 667 2 750 ✕ 1334 4.7
iPhone 5S 320 ✕ 568 2 640 ✕ 1136 4
iPhone 5 320 ✕ 568 2 640 ✕ 1136 4
iPhone 4S 320 ✕ 480 2 640 ✕ 960 3.5
iPhone 4 320 ✕ 480 2 640 ✕ 960 3.5
iPhone 3GS 320 ✕ 480 1 320 ✕ 480 3.5
iPhone 3G 320 ✕ 480 1 320 ✕ 480 3.5
![Page 8: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/8.jpg)
1-1. 解像度
スマートフォン解像度 iPhone 6 Plusの解像度の仕組み
『PaintCode』 http://www.paintcodeapp.com/news/iphone-6-screens-demystified
![Page 9: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/9.jpg)
スマートフォン解像度 代表的な解像度
デバイス CSSピクセル (ブラウザピクセル)
デバイス ピクセル比
解像度 インチ
GALAXY Note 3 SC-01F 360 ✕ 640 3 1080 ✕ 1920 5.7
GALAXY S4 SC-04E 360 ✕ 640 3 1080 ✕ 1920 5
GALAXY S III SC-06D 360 ✕ 640 2 720 ✕ 1280 4.8
GALAXY S II 320 ✕ 533 1.5 480 ✕ 800 4.3
Nexus S 320 ✕ 533 1.5 480 ✕ 800 4
Xperia Z Ultra(ファブレット) 540 ✕ 918 2 1080 ✕ 1920 6.4
XPERIA A SO-04E 360 ✕ 598 2 720 ✕ 1280 4.6
GALAXY Note 3 SC-01F 360 ✕ 640 3 1080 ✕ 1920 5.7
1-1. 解像度
![Page 10: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/10.jpg)
タブレット解像度 代表的な解像度
デバイス CSSピクセル (ブラウザピクセル)
デバイス ピクセル比
解像度 インチ
iPad Air 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 3 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 768 ✕ 1024 1 768 ✕ 1024 9.7
iPad mini 768 ✕ 1024 1 768 ✕ 1024 7.9
Nexus 10 800 ✕ 1280 2 1600 ✕ 2560 10
Nexus 7 (2013) 600 ✕ 960 2 1200 ✕ 1920 7
iPad Air 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 3 768 ✕ 1024 2 1536 ✕ 2048 9.7
1-1. 解像度
![Page 11: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/11.jpg)
1. 解像度
2. Retinaディスプレイ
3. スマートフォン・ブラウザ
1. スマートフォン端末
![Page 12: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/12.jpg)
Retinaディスプレイ(高精細ディスプレイ)
“Retinaディスプレイ”はApple社の高精細ディスプレイ 高精細ディスプレイはデバイスピクセル比が1より大きいディスプレイのこと
1-2. Retinaディスプレイ
![Page 13: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/13.jpg)
Retinaディスプレイ向けデザイン
2014年現在、制作上おもに重要とされる高精細ディスプレイはスマートフォン、タブレット搭載のもの
※ PCの高精細ディスプレイへのデザイン対応はまだ一般的とは言えない
1-2. Retinaディスプレイ
![Page 14: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/14.jpg)
iPhone 5S、iPhone 5の場合• デザインカンプは短辺横640pxで作成 • 短辺横320pxのリキッドレイアウトでマークアップ(※)
• デザインの最小単位(最も細い罫線など)を2pxでデザイン
(※) 次項で説明
1-2. Retinaディスプレイ
![Page 15: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/15.jpg)
iPhone 6 Plus(予想)の場合
※ iPhone 6 Plus発売後、徐々に3倍psdに移行することが予想される
• デザインカンプは短辺横1080px(または1242px)で作成
• 短辺横414px(予想)のリキッドレイアウトでマークアップ(※)
• デザインの最小単位(最も細い罫線など)を3px(予想)でデザイン
(※) 次項で説明
1-2. Retinaディスプレイ
![Page 16: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/16.jpg)
1. 解像度
2. Retinaディスプレイ
3. スマートフォン・ブラウザ
1. スマートフォン端末
![Page 17: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/17.jpg)
browser 最新ver vendor engine browser
iOS Mobile Safari 7 Apple WebKit iOS Mobile Safari
iOS Chrome(ネイティブアプリ UIWebView)
36 Google WebKitiOS Chrome(ネイティブアプリ UIWebView)
Android Mobile Safari(標準ブラウザ)
4 Apple WebKit Android Mobile Safari(標準ブラウザ)
Android Mobile Safari - Chrome(新標準ブラウザ)
1(Chrome 18)
Google WebKit Android Mobile Safari - Chrome(新標準ブラウザ)
Android Chrome 36 Google Blink Android Chrome
1-3. スマートフォン・ブラウザ
![Page 18: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/18.jpg)
1. スマートフォン端末
2. スマートフォン・マークアップ
3. フロントエンドパフォーマンス
4. コーディングレギュレーション
![Page 19: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/19.jpg)
1. マークアップ実践
2. 検証環境
2. スマートフォン・マークアップ
![Page 20: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/20.jpg)
1. マークアップ実践
2. 検証環境
2. スマートフォン・マークアップ
![Page 21: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/21.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 22: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/22.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 23: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/23.jpg)
viewport2-1-1. viewport
!<meta name="viewport" content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
• width=device-width • initial-scale=1.0 • maximum-scale=1.0 • user-scalable=no
![Page 24: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/24.jpg)
width2-1-1. viewport
• ウィンドウの横幅を設定 • device-widthにして端末毎のCSSピクセルのデフォルトの横幅に設定
initial-scale• デフォルト表示時の拡大率 • 1.0に設定して拡縮をさせない
![Page 25: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/25.jpg)
maximum-scale2-1-1. viewport
• 表示拡大率の最大値 • 1.0に設定して拡大表示を抑止
user-scalable• ピンチ動作の可否を設定 • noに設定してピンチ動作を抑止
![Page 26: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/26.jpg)
2-1-1. viewport※ デバイスのorientation• ユーザーがスマートフォンを持っている時の位置 • ポートレート(縦位置)とランドスケープ(横位置) • ユーザーの設定によりオリエンテーション変更は止めることがで
きる • スマホブラウザではコンテンツ側からオリエンテーション変更を
止めることはできない
Portrait Landscape
![Page 27: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/27.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 28: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/28.jpg)
format-detection2-1-2. format-detection
!<meta name="format-detection" content="telephone=no,address=no,email=no">
• 自動的にリンクを生成する機能
• 不要な動作を防ぎたい場合はオフにしておく
![Page 29: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/29.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 30: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/30.jpg)
画像表示 1 img要素の場合2-1-3. 画像表示 1 img要素の場合
!■ HTML <img src="sample.png" class="sample-image"> !■ CSS .sample-image { width: 100px; }
短辺横640px(デバイスピクセル比2)のデザインカンプにおいて、画像の横幅値が200pxの画像の場合
• CSSによって横幅値をデザインカンプの半分に表示されるよう設定する
![Page 31: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/31.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 32: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/32.jpg)
画像表示 2 背景画像の場合2-1-4. 画像表示 2 背景画像の場合
■ HTML <div class="sample-block"></div> !■ CSS .sample-block { width: 100px; height: 100px; background-image: url(sample.png); background-repeat: no-repeat; background-size: 100px 100px; }
短辺横640px(デバイスピクセル比2)のデザインカンプにおいて、画像の縦・横幅値が200pxの正方形画像の場合
• CSSによって縦・横幅値をデザインカンプの半分に表示されるよう設定する
![Page 33: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/33.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 34: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/34.jpg)
font2-1-5. スマートフォン最適化CSS
!html { font-family: Helvetica, Roboto, 'Droid Sans', 'Hiragino Kaku Gothic Pro', sans-serif; }
• font-familyの一例
![Page 35: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/35.jpg)
text-size-adjust2-1-5. スマートフォン最適化CSS
!html { -webkit-text-size-adjust: 100%; }
• ランドスケープ表示時にフォントが拡大されるのを抑止
![Page 36: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/36.jpg)
tap-highlight-color2-1-5. スマートフォン最適化CSS
!a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
• Androidにおいてタップ時に表示される枠を解消
![Page 37: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/37.jpg)
break-all2-1-5. スマートフォン最適化CSS
!* { word-break: break-all; }
• 横幅表現に限りがあるスマートフォンにおける英文の表示トラブルを防止
![Page 38: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/38.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 39: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/39.jpg)
減色・圧縮2-1-6. 画像最適化
ImageAlpha (Mac)
『ImageAlpha ̶ image minifier』 http://pngmini.com/
Pngyu (Win、Mac)『 Pngyu』 http://nukesaq88.github.io/Pngyu/
![Page 40: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/40.jpg)
適正化2-1-6. 画像最適化
ImageOptim (Mac)
『ImageOptim ̶ better Save For Web』 http://imageoptim.com/
• 余分な情報をクリーンアップして軽量化 • gruntに組み込むことも可能
![Page 41: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/41.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 42: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/42.jpg)
ジェネレータ2-1-7. ホームアイコン
『Makeappicon - Generate app icons of all sizes in a click!』 http://makeappicon.com/
• 1024✕1024で出力した画像(jpg, png, psd)をドラッグドロップ
![Page 43: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/43.jpg)
ホームアイコンデザインの注意点2-1-7. ホームアイコン
• アイコンの角を丸めなくてもiOS側で角は丸められる
• ただしAndroidでは直角のまま出力される • 角を丸めてデザインする場合はテンプレートを利用する
『App Icon Template』 http://appicontemplate.com/ http://appicontemplate.com/ios7
![Page 44: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/44.jpg)
ホームアイコンの設置2-1-7. ホームアイコン
!<link rel="apple-touch-icon" sizes="152x152" href="/icon/[email protected]"> <link rel="apple-touch-icon" sizes="144x144" href="/icon/[email protected]"> <link rel="apple-touch-icon" sizes="120x120" href="/icon/[email protected]"> <link rel="apple-touch-icon" sizes="114x114" href="/icon/[email protected]"> <link rel="apple-touch-icon" sizes="76x76" href="/icon/Icon-76.png"> <link rel="apple-touch-icon" sizes="72x72" href="/icon/Icon-72.png"> <link rel="apple-touch-icon" sizes="60x60" href="/icon/Icon-60.png"> <link rel="apple-touch-icon" sizes="57x57" href="/icon/Icon.png"> <link rel="shortcut icon" href="/icon/favicon.ico">
※ 「favicon.ico」自作 16✕16pxのpngを出力し拡張子を.icoに変更
![Page 45: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/45.jpg)
iOS6までの記述 「-precomposed」がiOS7で不要に
2-1-7. ホームアイコン
!<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icon/[email protected]"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icon/[email protected]"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icon/[email protected]"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icon/[email protected]"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icon/Icon-76.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icon/Icon-72.png"> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icon/Icon-60.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icon/Icon.png"> <link rel="shortcut icon" href="/icon/favicon.ico">
![Page 46: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/46.jpg)
iOS6までの記述 「-precomposed」がiOS7で不要に
2-1-7. ホームアイコン
• iOS6までは rel="apple-touch-icon-precomposed" のよう
に「-precomposed」接尾辞をつけて、アイコンに自動でかけ
られてしまう反射効果を明示的にかからないように設定していた • iOS7からのフラットデザインにより効果は付与されなくなった
ため、「-precomposed」は不要になる • Android OSのアイコン選択にも影響があった「-
precomposed」が不要になるのは歓迎できる
![Page 47: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/47.jpg)
2-1. マークアップ実践
1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み
![Page 48: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/48.jpg)
画像遅延読み込み2-1-8. 画像遅延読み込み
• ファーストビューから外れる画像は初期レンダリング時にロードしないでおく
• スクロール、タップなどのユーザーアクションに応じて残りを読み込む
• リクエスト数削減に効果大
『Lazy Load Plugin for jQuery』 http://www.appelsiini.net/projects/lazyload http://www.appelsiini.net/projects/lazyload/enabled_timeout.html
![Page 49: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/49.jpg)
画像遅延読み込み2-1-8. 画像遅延読み込み【補足】
!
<script src="[ファイルパス]/jquery-2.1.1.min.js”></script>
※ jQueryバージョン
• スマートフォンにはver.2が利用可能
![Page 50: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/50.jpg)
【TOPIC】スマートフォンとSEO2-1. マークアップ実践
• SPサイトにおいても基本はPCと同じ、重要なSEO要素はtitle要
素、description、keywords、h1、etc… • レスポンシブそのもののSEO効果は特別に高くはない • レスポンシブにおいてPCとSPが同構造であるためキーワード運用
効率は高いと言える • PCとSPが同URL構造であることも評価される • SPサイトにおけるSEO重要項目は、"スマートフォン適正化サイト
が存在すること"
(2014年9月現在)
![Page 51: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/51.jpg)
1. マークアップ実践
2. 検証環境
2. スマートフォン・マークアップ
![Page 52: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/52.jpg)
シミュレーター2-2. 検証環境
iOS : iOSシミュレーター (Mac)
『Xcode』 https://developer.apple.com/jp/xcode/
※ iOSシミュレーターを一発起動
『iWebInspector』 http://www.iwebinspector.com/
![Page 53: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/53.jpg)
シミュレーター2-2. 検証環境
Android : Genymotion(Win、Mac、Linux)
『Genymotion』 http://www.genymotion.com/
![Page 54: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/54.jpg)
Browser2-2. 検証環境
『Chrome Developer Tools』 https://developer.chrome.com/devtools
![Page 55: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/55.jpg)
リンクツール2-2. 検証環境
Chrome to Mobile 拡張機能 (Chrome Mobile)
『Chrome to Mobile 拡張機能』 https://support.google.com/chrome/answer/2451559?p=ib_chrome_to_mobile&rd=1
![Page 56: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/56.jpg)
リンクツール2-2. 検証環境
Chrome to Phone 拡張機能 (Android)
『Google Chrome to Phone 拡張機能』 https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco
![Page 57: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/57.jpg)
1. スマートフォン端末
2. スマートフォン・マークアップ
3. フロントエンドパフォーマンス
4. コーディングレギュレーション
![Page 58: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/58.jpg)
3. フロントエンドパフォーマンス
目標にすべき表示速度• 0.1 秒
• 1 秒
• 10 秒
『フロントエンドエンジニア養成読本』 http://www.amazon.co.jp/gp/product/4774165786 佐藤 歩氏(http://twitter.com/ahomu)記
: 即応を実感
: 遅延を感じる
: 関心の限界Jakob Nielse
http://www.nngroup.com/articles/response-times-3-important-limits/ より引用
![Page 59: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/59.jpg)
1. リソース記述位置
2. リクエスト数
3. minify、画像最適化
3. フロントエンドパフォーマンス
![Page 60: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/60.jpg)
1. リソース記述位置
2. リクエスト数
3. minify、画像最適化
3. フロントエンドパフォーマンス
![Page 61: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/61.jpg)
✕ worst case3-1. リソース記述位置
JS → HTML → CSS
http://test0001.s-ej.com/54/s01.html http://www.webpagetest.org/result/140911_Y0_6AK/
• Start Render遅延
![Page 62: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/62.jpg)
△ bad case3-1. リソース記述位置
HTML → JS → CSS
http://test0001.s-ej.com/54/s02.html http://www.webpagetest.org/result/140911_GD_6B1/
• FOUC(Flash of Unstyled Content)発症
![Page 63: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/63.jpg)
◯ good case3-1. リソース記述位置
CSS → HTML → JS
http://test0001.s-ej.com/54/s03.html http://www.webpagetest.org/result/140911_01_6BS/
![Page 64: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/64.jpg)
1. リソース記述位置
2. リクエスト数
3. minify、画像最適化
3. フロントエンドパフォーマンス
![Page 65: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/65.jpg)
✕ bad case3-2. リクエスト数
10 requests each
http://test0001.s-ej.com/54/s11.html http://www.webpagetest.org/result/140911_M5_74P/
• Speed Index遅延
style1~10.css img1~10.jpg script1~10.js
![Page 66: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/66.jpg)
3-2. リクエスト数
concated 1 request each
http://test0001.s-ej.com/54/s12.html http://www.webpagetest.org/result/140911_3M_753/
style.all.css img.all.jpg script.all.js
◯ good case
![Page 67: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/67.jpg)
1. リソース記述位置
2. リクエスト数
3. minify、画像最適化
3. フロントエンドパフォーマンス
![Page 68: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/68.jpg)
✕ bad case3-3. minify、画像最適化
concated 1 request each
http://test0001.s-ej.com/54/s12.html http://www.webpagetest.org/result/140911_3M_753/
• Speed Index遅延
style.all.css img.all.jpg script.all.js
![Page 69: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/69.jpg)
concated and minified 1 request each
http://test0001.s-ej.com/54/s13.html http://www.webpagetest.org/result/140911_84_7F5/
style.all.min.css img.all.comp.jpg script.all.min.js
◯ good case3-3. minify、画像最適化
![Page 70: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/70.jpg)
1. スマートフォン端末
2. スマートフォン・マークアップ
3. フロントエンドパフォーマンス
4. コーディングレギュレーション
![Page 71: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/71.jpg)
1. PC
2. SP
4. コーディングレギュレーション
![Page 72: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/72.jpg)
HTMLテンプレート・サンプル4-1. PC
https://github.com/sekiyaeiji/html_template/blob/master/pc.html
フロントエンド・コーディング・レギュレーション
http://qiita.com/sekiyaeiji/items/a0bb846a8e87efc8d406
![Page 73: マークアップ講座 03 スマートフォン・デバイス最適化](https://reader038.vdocuments.site/reader038/viewer/2022102901/556421c9d8b42a2a0a8b55a8/html5/thumbnails/73.jpg)
HTMLテンプレート・サンプル4-2. SP
https://github.com/sekiyaeiji/html_template/blob/master/sp.html
フロントエンド・コーディング・レギュレーション
http://qiita.com/sekiyaeiji/items/2f43a4f8683492d6df9b