Recommended
More Related Content
What's hot
What's hot (12)
Similar to スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Similar to スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法 (20)
Recently uploaded
Recently uploaded (9)
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
- 5. 弊社スタッフの執筆書籍
- 7. はじめに
- 8. スマフォの やっかいな点
- 9. パフォーマンスは高くない Android 4.0.4 Mobile Safari 6.0 Chrome 26.0.1410 0 100,000 200,000 300,000 400,000 361,156回/秒 77,906回/秒 53,235回/秒 jsPerfにて1秒間に処理できる createElement の回数を計測：http://jsperf.com/loop-130517-01/2 GALAXY NEXUS iPhone 4S MacBook Air
- 10. 機種によって挙動が異なる
- 11. 端末の種類が山ほどある 0 10 20 30 40 50 2011 2012 2013（∼6月） 7 16 14 4 22 19 17 45 24 DoCoMo au SoftBank スマートフォンデータベースにて調査：http://smartphone.ultra-zone.net/
- 12. 事前の チェックポイント
- 13. 対応OSと 対応機種
- 15. iOS Ver別シェア（06, 2013） iOS4以下 1.4% iOS 5 9.5% iOS 6 89.1% http://stats.unity3d.com/mobile/os-ios.html
- 17. Android Ver別シェア（06, 2013） その他 2% Android 2.3 22% Android 4.0 34.9% Android 4.1 36.3% Android 4.2 4.2% http://stats.unity3d.com/mobile/os.html
- 18. •2.3.x •4.0.x / 4.1.x / 4.2.x •2.2.x以下は トレンド実現困難 Androidの対応範囲
- 20. できる端末から対応
- 21. 検証端末を決める •iPhone5, 4S / iOS6.1 •iPhone4 / iOS5.1 •GALAXY S4 / Android 4.2.2 •HTC J butterfly / Android 4.1.1 •Xperia AX / Android 4.0.4 •SH-06D / Android 2.3.5 クライアントや開発会社と握る
- 23. •タブレットはどうしますか？ •Android 3.x には 対応しますか？ © All rights reserved by Paymentmax
- 24. 基本をおさらい
- 27. 運用効率 ネイティブ Web <
- 30. 画像も倍の密度が必要
- 32. リキッドデザインで作成する
- 36. <meta name="viewport" content="width=device-width,initial- scale=1.0"> • width=device-width 端末の画面サイズに成行 • initial-scale=1.0 初期拡大率は等倍 • 拡大・縮小の不許可は要件などによる 一般的な指定
- 37. RWDか 専用サイトか
- 38. レスポンシブウェブデザイン （RWD） OK メリット NG デメリット •1ソースで マルチデバイス に対応可能 •設計やデザイン に十分な知識が 必要
- 45. 切り替えスイッチの実装 •スマフォ版とPC版の 表示を切り替えるボタン •表示モードを LocalStorage か Cookie に保存する •LocalStorage が一般的だが JavaScript以外からアクセス不可 •CookieはAndroidで難あり
- 48. UI別の注意点
- 55. 動画配信
- 56. video要素で再生できる動画 参照： http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/ SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html 拡張子 .mp4 映像 H.264 Baseline Profile Level 3.0 ∼640x480/30fps 音声 AAC-LC ∼48kHz 容量 ∼2GB
- 57. video要素でできないこと •動画のダウンロードを禁止すること •ブラウザ内でインライン再生すること （iPhone, Android 2.x系） •シークバーやボリューム操作 •ストリーミング配信
- 60. トラブル シューティング
- 61. viewport関連
- 62. 文字が大きくなる NG OK
- 63. 発生条件 ∼ Chrome $('head') .append('<meta name="viewport" content="width=device- width, initial-scale=1">'); $('.foo').hide(); • viewport で initial-scale が未指定 • JSでたくさんの要素を非表示にしてる • 他にも複合的な要因あり
- 64. 親要素に max-height: 999999px 参照： http://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font .foo{ max-height: 999999px; } <div class="foo"> <!-- !のp要素で現象が発生する場合 --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div>
- 65. form関連
- 67. 発生条件 ∼6.x <p><input type="text"></p> <p><textarea></textarea></p> [type="text"], textarea { font-size: 14px; } • テキストフィールドやテキストエリアなどの 文字入力が可能なフォームパーツ • フォントサイズが16px未満
- 68. font-size: 16px（相当）にする 参照： http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on- iphone :root { /* ブラウザのデフォルトフォントサイズは16px */ font-size: 1em; } [type="text"], textarea { /* デフォルトフォントサイズを継承する */ font-size: 1rem; }
- 70. 発生条件 6.x∼ <input type="text" placeholder="プレースホルダ"> • テキストフィールドに placeholder属性 が 指定されている • CSSで width が 100% に指定されている [type="text"]{ width: 100%; box-sizing: border-box; }
- 71. 親要素に overflow: hidden 参照： http://stackoverflow.com/questions/12582788/placeholder-attribute-on-text-input-with- ios-6-from-landscape-to-portrait /* input要素の親要素に指定する */ form > p { overflow: hidden; } form [type="text"] { width: 100%; box-sizing: border-box; } <form action=""> <p><input type="text" placeholder="プレースホルダ"></p> </form> http://qiita.com/items/58621961c1f81b017e8d
- 73. 発生条件 ∼ 2.3.x $('input').focus(function(){ window.scrollTo(0, $(this).offset().top); }); • フォーカス時に画面をスクロールさせる • JSでたくさんの要素のスタイルを変更する • 他にも複合的な要因あり
- 75. その他の困った
- 77. 発生条件 6.x∼ • font-family が指定されていない
- 78. font-familyを指定する 参照： http://ofsilvers.hateblo.jp/entry/font-family-for-ios6 /* スマートフォン専用サイトは"sans-serif"のみでも良い */ body{ font-family: sans-serif; } /* iOS,OSXの標準フォントは'Hiragino Kaku Gothic ProN' */ body{ font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
- 80. 発生条件 ∼ 4.x <a href="#foo">↑ページの先頭へ</a> • 同じアンカーをもう一度踏む • URLが変わらないとジャンプしない
- 82. スマホサイトの 検証・確認方法
- 84. Dev Tools
- 86. ResponsiView https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep
- 90. Step.3 local server •xampp •MAMP •python simplehttpserver python -m SimpleHTTPServer 8000
- 92. IPアドレス •ifcofing / ipconfig •My IP Address
- 93. Adobe Edge Inspect CC
- 94. iPhone＋Safari
- 95. Charles
- 97. スマホにおける パフォーマンス
- 98. reflow : リフロー repaint : リペイント
- 99. リフロー・リペイントとは
- 100. …その前に
- 104. リフローは高負荷
- 107. スタイル変更はクラス変更にまとめる $('#foo').addClass('bar'); $('#foo').width(100).height(50).css('color': '#FC0'); ▼ #foo.bar{ width: 100px; height: 50px; color: #FC0; } クラスの付け替えはできるだけ末端の要素で
- 108. その他のポイント •position: fixed を使わない •アニメーションさせる要素は position: absolute にする •アニメーションは60fpsを目標にする （Chromeのデベロッパーツールで計測可）
- 110. まとめ
- 114. ピクセルパーフェクト に こだわらない