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

木村哲朗 / 西畑一馬

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

木村 哲朗フロントエンドエンジニア

西畑 一馬フロントエンドエンジニア

•フロントエンド実装•デザイン・設計•スマフォサイト制作•セミナー登壇

弊社スタッフの執筆書籍

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で難あり

作らない①http://www.apple.com/jp

作らない②http://canon.jp

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や端末ごとのバグや挙動の差違は増え続ける

•スマフォに無茶させない•モバイルファーストな設計が重要

線引きが重要•どこまで対応するのか何を優先するのか

•予算や納期を全力で確保する•まぼろしでは見積もりもアジャイル

ピクセルパーフェクトに

こだわらない

ありがとうございました

木村哲朗 / 西畑一馬

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