スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法

74,497 views
76,326 views

Published on

NTTレゾナント主催のセミナーで発表した内容です。

Published in: Technology
1 Comment
198 Likes
Statistics
Notes
No Downloads
Views
Total views
74,497
On SlideShare
0
From Embeds
0
Number of Embeds
17,734
Actions
Shares
0
Downloads
273
Comments
1
Likes
198
Embeds 0
No embeds

No notes for slide

スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法

  1. 1. 木村哲朗 / 西畑一馬 スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
  2. 2. 木村 哲朗 フロントエンドエンジニア
  3. 3. 西畑 一馬 フロントエンドエンジニア
  4. 4. •フロントエンド実装 •デザイン・設計 •スマフォサイト制作 •セミナー登壇
  5. 5. 弊社スタッフの執筆書籍
  6. 6. Outline •はじめに •事前のチェックポイント •トラブルシューティング •スマホサイトの検証・確認方法 •スマホにおけるパフォーマンス
  7. 7. はじめに
  8. 8. スマフォの やっかいな点
  9. 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. 10. 機種によって挙動が異なる
  11. 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. 12. 事前の チェックポイント
  13. 13. 対応OSと 対応機種
  14. 14. 国内OS別シェア(1Q, 2013) その他 5.0% Android 45.8% iOS 49.2% Kantar調査より
  15. 15. iOS Ver別シェア(06, 2013) iOS4以下 1.4% iOS 5 9.5% iOS 6 89.1% http://stats.unity3d.com/mobile/os-ios.html
  16. 16. iOSの対応範囲 •メジャー最新版 •5.1 / 6.1 •4.x以下は 検証ができない •iOS7登場 
  17. 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. 18. •2.3.x •4.0.x / 4.1.x / 4.2.x •2.2.x以下は トレンド実現困難 Androidの対応範囲
  19. 19. 端末ごとの対応 全機種対応は 大変
  20. 20. できる端末から対応
  21. 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 クライアントや開発会社と握る
  22. 22. 機種名とOS詳細バージョンは 必ずセットで指定 型番も!
  23. 23. •タブレットはどうしますか? •Android 3.x には 対応しますか? © All rights reserved by Paymentmax
  24. 24. 基本をおさらい
  25. 25. Webとネイティブの違い フリック可 アニメあり ネイティブ Web フリック不可 アニメなし
  26. 26. 表現力とパフォーマンス ネイティブ Web >
  27. 27. 運用効率 ネイティブ Web <
  28. 28. ハイブリットアプリ ネイティブ Web+ ネイティブで外側を用意し コンテンツはWebアプリで表示
  29. 29. 高精細なディスプレイ ページ上の 1px デバイス上の 4px =
  30. 30. 画像も倍の密度が必要
  31. 31. カンプは640pxで作る 640px •キャンバスは 640px •あらゆるものを 偶数サイズで
  32. 32. リキッドデザインで作成する
  33. 33. その他デザインの注意点 •テキストには ボールド(太字)体を使用しない •ドロップシャドウには ボケ足が必要 •画像を極力使用しない •CSS3で実現可能なデザインを 心がける
  34. 34. ピクセルパーフェクト に こだわらない お金と時間によるけどね!
  35. 35. viewportで画面を設定する •画面幅の指定 •拡大・縮小の 許可・不許可 •meta要素で設定
  36. 36. <meta name="viewport" content="width=device-width,initial- scale=1.0"> • width=device-width 端末の画面サイズに成行 • initial-scale=1.0 初期拡大率は等倍 • 拡大・縮小の不許可は要件などによる 一般的な指定
  37. 37. RWDか 専用サイトか
  38. 38. レスポンシブウェブデザイン (RWD) OK メリット NG デメリット •1ソースで マルチデバイス に対応可能 •設計やデザイン に十分な知識が 必要
  39. 39. RWDを導入するには 設計が肝心! •既存PCサイトを RWD化するのは茨の道 •モバイルファースト 予めスマフォ向けに設計をする
  40. 40. ブレイクポイント •どのくらいの画面サイズで レイアウトを切り替えるかを設定 640px 641px
  41. 41. InternetExplorerの取り扱い •RWDに対応できるのはIE9以上 •CSS3などを用いた表現も IEではサポートしていないことが多い •グレイスフルデグラデーション 古いIEではそれなりに
  42. 42. ピクセルパーフェクト に こだわらない
  43. 43. 専用サイト OK メリット •専用の画面設計 が可能なため 自由度が高い •PC版との 振り分けなどに 手間がかかる NG デメリット
  44. 44. 振り分け方法・URLルール 最初に決める! •PCサイトとの振り分け方法 •サーバーサイド or フロントサイド •URLのルール •同一URL or 別URL
  45. 45. 切り替えスイッチの実装 •スマフォ版とPC版の 表示を切り替えるボタン •表示モードを LocalStorage か Cookie に保存する •LocalStorage が一般的だが JavaScript以外からアクセス不可 •CookieはAndroidで難あり
  46. 46. 作らない① http://www.apple.com/jp
  47. 47. 作らない② http://canon.jp
  48. 48. UI別の注意点
  49. 49. カルーセル 固定配置 モーダルウィンドウ
  50. 50. •縦から横にしたときどうするの? •ヒアリング時に iPhoneでしか確認していない •バグ報告があがってきたが 提示された参考サイトでも 同じことがおきている •そもそも採用したプラグインが バグってる
  51. 51. カルーセル •ループ処理、自動スクロールの有無 •チラつきやガタつきを 完全になくすのはかなり大変 •画面の情報量が多いとバグりやすい
  52. 52. 固定配置 •CSSでもJSでも実装は大変 •まさにバグのデパート あらゆるバグの原因になるので もはや御法度レベル
  53. 53. これまでに出会ったバグ •期待通りの場所に表示されない •レイヤーの表示順が崩れる •画面の一番上をタップすると 画面の一番下にあるはずのリンクに 反応する •フォームパーツの表示や 文字入力が正常にできなくなる •描画パフォーマンスを著しく下げる
  54. 54. モーダルウィンドウ •モーダルウィンドウ内で 文字入力などをするのは危険 •モーダルウィンドウの大きさが 画面サイズを超える場合にどうするか •シンプルな使い方にとどめる
  55. 55. 動画配信
  56. 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. 57. video要素でできないこと •動画のダウンロードを禁止すること •ブラウザ内でインライン再生すること (iPhone, Android 2.x系) •シークバーやボリューム操作 •ストリーミング配信
  58. 58. 動画配信のファイナルアンサー YouTubeでみんな幸せ!
  59. 59. DRMつきストリーミング配信 •専門の会社やASPに相談する http://www.stream.co.jp/ http://uliza.jp/
  60. 60. トラブル シューティング
  61. 61. viewport関連
  62. 62. 文字が大きくなる NG OK
  63. 63. 発生条件 ∼  Chrome $('head') .append('<meta name="viewport" content="width=device- width, initial-scale=1">'); $('.foo').hide(); • viewport で initial-scale が未指定 • JSでたくさんの要素を非表示にしてる • 他にも複合的な要因あり
  64. 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. 65. form関連
  66. 66. フォーカス時にズームする NG OK
  67. 67. 発生条件 ∼6.x <p><input type="text"></p> <p><textarea></textarea></p> [type="text"], textarea { font-size: 14px; } • テキストフィールドやテキストエリアなどの 文字入力が可能なフォームパーツ • フォントサイズが16px未満
  68. 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; }
  69. 69. 端末回転後に表示が崩れる NG OK
  70. 70. 発生条件 6.x∼ <input type="text" placeholder="プレースホルダ"> • テキストフィールドに placeholder属性 が 指定されている • CSSで width が 100% に指定されている [type="text"]{ width: 100%; box-sizing: border-box; }
  71. 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
  72. 72. テキストフィールドがダブる OK 本来のテキストフィールド 謎のテキストフィールド NG
  73. 73. 発生条件 ∼  2.3.x $('input').focus(function(){ window.scrollTo(0, $(this).offset().top); }); • フォーカス時に画面をスクロールさせる • JSでたくさんの要素のスタイルを変更する • 他にも複合的な要因あり
  74. 74. 無茶しない •フォーカス時のスクロールは禁物 •translate3dなどでも発現する •スタイル変更の影響範囲を 最小限に抑える •4.x系ではテキスト入力自体が できなくなる端末も… 参照: http://blog.webcreativepark.net/2012/02/28-182744.html
  75. 75. その他の困った
  76. 76. 明朝体で表示されてしまう NG OK
  77. 77. 発生条件 6.x∼ • font-family が指定されていない
  78. 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; }
  79. 79. ページ内リンクが動かない タップしても反応しない NG
  80. 80. 発生条件 ∼  4.x <a href="#foo">↑ページの先頭へ</a> • 同じアンカーをもう一度踏む • URLが変わらないとジャンプしない
  81. 81. JSでスクロールさせる 参照: https://code.google.com/p/android/issues/detail?id=15437 $('a[href^="#"]').click(function(){ window.scrollTo(0, $(this.hash).offset().top); });
  82. 82. スマホサイトの 検証・確認方法
  83. 83. Step.1 Google Chrome
  84. 84. Dev Tools
  85. 85. Dev Tools •UserAgentの偽装 •ディスプレイサイズの変更 •タッチイベントのシミュレート •Geolocationや DeviceOrientationのシミュレート
  86. 86. ResponsiView https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep
  87. 87. QR-Code Tag Extension https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg
  88. 88. Step.2 iOSシミュレーター
  89. 89. iOSシミュレーター +Safari
  90. 90. Step.3 local server •xampp •MAMP •python simplehttpserver python -m SimpleHTTPServer 8000
  91. 91. Local Area Network
  92. 92. IPアドレス •ifcofing / ipconfig •My IP Address
  93. 93. Adobe Edge Inspect CC
  94. 94. iPhone+Safari
  95. 95. Charles
  96. 96. Charles #hosts 127.0.0.1 maboroshi.biz
  97. 97. スマホにおける パフォーマンス
  98. 98. reflow : リフロー repaint : リペイント
  99. 99. リフロー・リペイントとは
  100. 100. …その前に
  101. 101. レンダリングプロセス HTMLから DOMツリー構築 CSSから スタイルルール構成 ▲ レンダーツリー 構築・配置 ▲ 描画
  102. 102. HTMLから DOMツリー構築 CSSから スタイルルール構成 ▲ レンダーツリー 構築・配置 ▲ 描画 レンダリングプロセス JSで 変更 再構築 再配置 リフロー 再描画 リペイント
  103. 103. 発生トリガー •DOMの 追加・変更・削除 •スタイルの 追加・変更・削除 •アニメーション •大きさや座標の取得 •フォームの文字入力 •クラス属性の変更 •フォントの変更 •画面の回転 •ウィンドウリサイズ •スクロール(!) …などなど
  104. 104. リフローは高負荷
  105. 105. Androidでのバグ リフローの処理落ち≒
  106. 106. リフローを制する者 Androidを制する≒
  107. 107. スタイル変更はクラス変更にまとめる $('#foo').addClass('bar'); $('#foo').width(100).height(50).css('color': '#FC0'); ▼ #foo.bar{ width: 100px; height: 50px; color: #FC0; } クラスの付け替えはできるだけ末端の要素で
  108. 108. その他のポイント •position: fixed を使わない •アニメーションさせる要素は position: absolute にする •アニメーションは60fpsを目標にする (Chromeのデベロッパーツールで計測可)
  109. 109. 参考リンク •http://youtu.be/ZTnIxIA5KGw •http://tokkono.cute.coocan.jp/blog/slow/ index.php/web-technology/reflow-and- repaint-in-browser/ •http://tech.naver.jp/blog/?p=379 •http://dresscording.com/blog/ performance/layout_painting.html
  110. 110. まとめ
  111. 111. 痛し痒し •デザインカンプを作り込みすぎると Androidではまりやすくなる •プロトタイプを作って回していく •ウォーターフォール型のワークフローだと辛い
  112. 112. 終わらない戦い •今後もOSや端末ごとの バグや挙動の差違は増え続ける •スマフォに無茶させない •モバイルファーストな設計が重要
  113. 113. 線引きが重要 •どこまで対応するのか 何を優先するのか •予算や納期を全力で確保する •まぼろしでは 見積もりもアジャイル
  114. 114. ピクセルパーフェクト に こだわらない
  115. 115. ありがとうございました 木村哲朗 / 西畑一馬 スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法

×