スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
DESCRIPTION
NTTレゾナント主催のセミナーで発表した内容です。TRANSCRIPT
木村哲朗 / 西畑一馬
スマートフォンサイト制作 よくあるトラブルと解決方法・回避方法
木村 哲朗フロントエンドエンジニア
西畑 一馬フロントエンドエンジニア
•フロントエンド実装•デザイン・設計•スマフォサイト制作•セミナー登壇
弊社スタッフの執筆書籍
Outline•はじめに•事前のチェックポイント•トラブルシューティング•スマホサイトの検証・確認方法•スマホにおけるパフォーマンス
はじめに
スマフォのやっかいな点
パフォーマンスは高くない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
機種によって挙動が異なる
端末の種類が山ほどある
0
10
20
30
40
50
2011 2012 2013（～6月）
7
1614
4
2219
17
45
24
DoCoMo au SoftBank
スマートフォンデータベースにて調査：http://smartphone.ultra-zone.net/
事前のチェックポイント
対応OSと対応機種
国内OS別シェア（1Q, 2013）
その他5.0%
Android45.8%
iOS49.2%
Kantar調査より
iOS Ver別シェア（06, 2013）
iOS4以下1.4%
iOS 59.5%
iOS 689.1%
http://stats.unity3d.com/mobile/os-ios.html
iOSの対応範囲•メジャー最新版•5.1 / 6.1•4.x以下は検証ができない•iOS7登場
Android Ver別シェア（06, 2013）
その他2%
Android 2.322%
Android 4.034.9%
Android 4.136.3%
Android 4.24.2%
http://stats.unity3d.com/mobile/os.html
•2.3.x•4.0.x / 4.1.x / 4.2.x•2.2.x以下はトレンド実現困難
Androidの対応範囲
端末ごとの対応
全機種対応は
大変
できる端末から対応
検証端末を決める•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
クライアントや開発会社と握る
機種名とOS詳細バージョンは必ずセットで指定
型番も！
•タブレットはどうしますか？•Android 3.x には対応しますか？
© All rights reserved by Paymentmax
基本をおさらい
Webとネイティブの違い
フリック可アニメあり
ネイティブ Web
フリック不可アニメなし
表現力とパフォーマンス
ネイティブ Web
>
運用効率
ネイティブ Web
<
ハイブリットアプリネイティブ Web＋
ネイティブで外側を用意しコンテンツはWebアプリで表示
高精細なディスプレイ
ページ上の1px
デバイス上の4px
=
画像も倍の密度が必要
カンプは640pxで作る640px
•キャンバスは640px•あらゆるものを偶数サイズで
リキッドデザインで作成する
その他デザインの注意点•テキストにはボールド（太字）体を使用しない
•ドロップシャドウにはボケ足が必要
•画像を極力使用しない•CSS3で実現可能なデザインを心がける
ピクセルパーフェクトに
こだわらないお金と時間によるけどね！
viewportで画面を設定する
•画面幅の指定•拡大・縮小の許可・不許可•meta要素で設定
<meta name="viewport" content="width=device-width,initial-scale=1.0">
• “width=device-width”端末の画面サイズに成行• “initial-scale=1.0”初期拡大率は等倍• 拡大・縮小の不許可は要件などによる
一般的な指定
RWDか専用サイトか
レスポンシブウェブデザイン （RWD）
OK メリット NG デメリット
•1ソースでマルチデバイスに対応可能
•設計やデザインに十分な知識が必要
RWDを導入するには
設計が肝心！
•既存PCサイトをRWD化するのは茨の道•モバイルファースト予めスマフォ向けに設計をする
ブレイクポイント
•どのくらいの画面サイズでレイアウトを切り替えるかを設定
~640px 641px~
InternetExplorerの取り扱い•RWDに対応できるのはIE9以上•CSS3などを用いた表現もIEではサポートしていないことが多い•グレイスフルデグラデーション古いIEではそれなりに
ピクセルパーフェクトに
こだわらない
専用サイト
OK メリット
•専用の画面設計が可能なため自由度が高い
•PC版との振り分けなどに手間がかかる
NG デメリット
振り分け方法・URLルール
最初に決める！
•PCサイトとの振り分け方法•サーバーサイド or フロントサイド•URLのルール•同一URL or 別URL
切り替えスイッチの実装•スマフォ版とPC版の表示を切り替えるボタン•表示モードをLocalStorage かCookie に保存する•LocalStorage が一般的だがJavaScript以外からアクセス不可•CookieはAndroidで難あり
UI別の注意点
カルーセル 固定配置 モーダルウィンドウ
•縦から横にしたときどうするの？•ヒアリング時にiPhoneでしか確認していない•バグ報告があがってきたが提示された参考サイトでも同じことがおきている•そもそも採用したプラグインがバグってる
カルーセル
•ループ処理、自動スクロールの有無•チラつきやガタつきを完全になくすのはかなり大変•画面の情報量が多いとバグりやすい
固定配置
•CSSでもJSでも実装は大変•まさにバグのデパートあらゆるバグの原因になるのでもはや御法度レベル
これまでに出会ったバグ•期待通りの場所に表示されない •レイヤーの表示順が崩れる•画面の一番上をタップすると画面の一番下にあるはずのリンクに反応する•フォームパーツの表示や文字入力が正常にできなくなる•描画パフォーマンスを著しく下げる
モーダルウィンドウ
•モーダルウィンドウ内で文字入力などをするのは危険•モーダルウィンドウの大きさが画面サイズを超える場合にどうするか•シンプルな使い方にとどめる
動画配信
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
video要素でできないこと
•動画のダウンロードを禁止すること•ブラウザ内でインライン再生すること（iPhone, Android 2.x系）•シークバーやボリューム操作•ストリーミング配信
動画配信のファイナルアンサー
YouTubeでみんな幸せ！
DRMつきストリーミング配信
•専門の会社やASPに相談するhttp://www.stream.co.jp/ http://uliza.jp/
トラブルシューティング
viewport関連
文字が大きくなる
NGOK
発生条件 ～ Chrome$('head')
.append('<meta name="viewport" content="width=device-width, initial-scale=1">');
$('.foo').hide();
• viewport で initial-scale が未指定• JSでたくさんの要素を非表示にしてる• 他にも複合的な要因あり
親要素に 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>
form関連
フォーカス時にズームするNGOK
発生条件 ～6.x<p><input type="text"></p><p><textarea></textarea></p>
[type="text"],textarea { font-size: 14px;}
• テキストフィールドやテキストエリアなどの文字入力が可能なフォームパーツ• フォントサイズが16px未満
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;}
端末回転後に表示が崩れる
NGOK
発生条件 6.x～<input type="text" placeholder="プレースホルダ">
• テキストフィールドに placeholder属性 が指定されている• CSSで width が 100% に指定されている
[type="text"]{ width: 100%; box-sizing: border-box;}
親要素に 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
テキストフィールドがダブる
OK 本来のテキストフィールド
謎のテキストフィールド
NG
発生条件 ～ 2.3.x$('input').focus(function(){ window.scrollTo(0, $(this).offset().top);});
• フォーカス時に画面をスクロールさせる• JSでたくさんの要素のスタイルを変更する• 他にも複合的な要因あり
無茶しない•フォーカス時のスクロールは禁物•translate3dなどでも発現する•スタイル変更の影響範囲を最小限に抑える
•4.x系ではテキスト入力自体ができなくなる端末も…
参照： http://blog.webcreativepark.net/2012/02/28-182744.html
その他の困った
明朝体で表示されてしまうNGOK
発生条件 6.x～
• font-family が指定されていない
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;}
ページ内リンクが動かない
タップしても反応しない
NG
発生条件 ～ 4.x
<a href="#foo">↑ページの先頭へ</a>
• 同じアンカーをもう一度踏む• URLが変わらないとジャンプしない
JSでスクロールさせる
参照： https://code.google.com/p/android/issues/detail?id=15437
$('a[href^="#"]').click(function(){ window.scrollTo(0, $(this.hash).offset().top);});
スマホサイトの検証・確認方法
Step.1 Google Chrome
Dev Tools
Dev Tools
•UserAgentの偽装•ディスプレイサイズの変更•タッチイベントのシミュレート•GeolocationやDeviceOrientationのシミュレート
ResponsiView
https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep
QR-Code Tag Extension
https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg
Step.2 iOSシミュレーター
iOSシミュレーター ＋Safari
Step.3 local server
•xampp•MAMP•python simplehttpserver
python -m SimpleHTTPServer 8000
Local Area Network
IPアドレス•ifcofing / ipconfig•My IP Address
Adobe Edge Inspect CC
iPhone＋Safari
Charles
Charles
#hosts127.0.0.1 maboroshi.biz
スマホにおけるパフォーマンス
reflow : リフローrepaint : リペイント
リフロー・リペイントとは
…その前に
レンダリングプロセスHTMLから
DOMツリー構築
CSSからスタイルルール構成
▲ レンダーツリー構築・配置
▲ 描画
HTMLからDOMツリー構築
CSSからスタイルルール構成
▲ レンダーツリー構築・配置
▲ 描画
レンダリングプロセス
JSで変更
再構築再配置
リフロー
再描画
リペイント
発生トリガー•DOMの追加・変更・削除
•スタイルの追加・変更・削除
•アニメーション•大きさや座標の取得•フォームの文字入力
•クラス属性の変更•フォントの変更•画面の回転•ウィンドウリサイズ•スクロール（！）
…などなど
リフローは高負荷
Androidでのバグ
リフローの処理落ち
≒
リフローを制する者
Androidを制する
≒
スタイル変更はクラス変更にまとめる
$('#foo').addClass('bar');
$('#foo').width(100).height(50).css('color': '#FC0');
▼
#foo.bar{ width: 100px; height: 50px; color: #FC0;}
クラスの付け替えはできるだけ末端の要素で
その他のポイント
•position: fixed を使わない•アニメーションさせる要素はposition: absolute にする
•アニメーションは60fpsを目標にする（Chromeのデベロッパーツールで計測可）
参考リンク• 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
まとめ
痛し痒し
•デザインカンプを作り込みすぎるとAndroidではまりやすくなる
•プロトタイプを作って回していく•ウォーターフォール型のワークフローだと辛い
終わらない戦い
•今後もOSや端末ごとのバグや挙動の差違は増え続ける
•スマフォに無茶させない•モバイルファーストな設計が重要
線引きが重要•どこまで対応するのか何を優先するのか
•予算や納期を全力で確保する•まぼろしでは見積もりもアジャイル
ピクセルパーフェクトに
こだわらない
ありがとうございました
木村哲朗 / 西畑一馬
スマートフォンサイト制作よくあるトラブルと解決方法・回避方法