【HTML/CSS】スマホサイトのマークアップやって得た知見まとめ
今までWEBサイトを作る際は、スマホ向けにははPCサイトのソースをそのままレスポンシブ対応して終わりということが多かったのですが、今回スマホ向けにガッツリHTML / CSSコーディングをやってみて色々わかった事がありました。
備忘録ですが、意外とスマホ向けのTIPSや注意点などのノウハウはネット上に記事が少ないなと感じたので、その辺にも貢献できればと思います。
環境を整える
Chrome デベロッパーツールは最強
Chromeに標準で搭載されているデベロッパーツールは、スマホサイズにウィンドウを変更したり、ユーザーエージェントを切り替えたりして、簡易的にスマホエミュレータになってくれます。
ほんとコレなしでは開発できないですわ。
1分で使える!Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備
さらにChrome Developrt Toolは色々と強力な機能盛りだくさんなので、一度機能をざっと見ておくとよいと思います。ざっくり見たい人にはdotinstallの流し見がよいかと。
動作確認用スマホ実機 / エミュレータ
僕の感覚値では、基本的にエミュレータで見えてるものが実機でも見えると考えて大丈夫そうですが、何点か、エミュレータでは再現しないレイアウトずれが実機では再現されるということがありました。
とは言えiOS / Android全てのバージョンの実機を揃えるのは不可能でしょうから、
適宜エミュレータを使うのがいいかと思います。
iOS
Safari + iOSシミュレータが最高
Chromeのデベロッパーツールみたいなノリで、iOSエミュレータ上で見ているWEBサイトをデバッグできます。
動作も軽いしすごく快適。Apple素晴らしいの一言。
Android
実機 + Chrome拡張「ADB」が最強
実機をPCにつなげば、Chrome デベロッパーツールでAndroidで表示しているWEBサイトのデバッグができます。これは素晴らしい。
一方、Androidエミュレータは難あり
Android Studio に付属のAVD Managerを使ってエミュレータを立ち上げ、それでデバッグしました。
iOS以上に様々なバージョン / 画面サイズがあるAndroidはエミュレータでのデバッグが不可欠ですが、お世辞にも性能がいいとは言えません。
x86 と HAXで高速化したとは言え、動作が重く、頻繁に落ちるので、
僕はAndroid向けのデバッグで想定の3倍ほどの時間を食ってしまいました。
しかもバグの多いAndroid 2.X系はエミュレータでの動作も重く、闇は深いですね。。
Google 公式以外のエミュレータを使う
私は結局使いませんでしたが、AndyやGenyMotionなどのサードパーティーが開発しているエミュレータもあります。
マークアップのためにわざわざAndroid StudioをDLしたくない人などにはよさそうですね。
Androidエミュレータ『Andy』登場、Google Playとスマホのリモコン化に対応―BlueStacksとの比較表
ブラウザから動かせるエミュレータもあります。
手軽に確認したければアリかも。
サポート対象バージョンの考え方
iOS
iOS8 / iOS7で動作確認すれば大丈夫でしょう。
8, 7以外は3%です。 (2014年12月時点)
8, 7で動作が違うというケースも今回は全くありませんでした。
さらに、PC版Chromeでの見た目ともほとんど違いがないというお利口さんぶりでした。
iOS、愛してるよ。
Android
バージョン毎にユーザーがそこそこ分布しており、 一応全部サポートしないとな〜という状況です。
特にバグの多いAndroid2.X系がまだ8%います。(2014年12月時点)
このしぶとい感じは昔のIE6を思い出しますね。はぁ...笑
■ 対応必須のバージョン - 5系 (Loli Pop。これから増えるでしょう ) - 4.4 ( KitKat ) - 4.1~3 ( Jelly Bean )
■ 予算、時間とご相談のバージョン - 2.X系 ( Ginger Bread )
2.3対応するかどうかはまず最初にクライアントに確認すべきでしょう。
現状8%でこれからも減っていくと考えると、年配の方々もターゲットにしているサイトでなければ切ってしまってもいいのかなと個人的には思います。
その分、他のパートのブラッシュアップに時間を使ったほうが有意義かと。
{逆に言えば、全く不毛だと思えるほど、じゃじゃ馬2.X系に今回振り回されました。。笑}
それぞれのOSで気をつけるべきこと
OS / バージョン毎につまずきやすいポイントが何点かあるので、挙げてみます。
iOSで気をつけること
iOS7 / 8 のSafari は割りと優秀なのですが、数点挙げてみます。
iOS7 で position: fixed が鬼門
例えばヘッダーをposition: fixedで固定している画面で、
フォームのinputをタップしてフォーカスすると、何故かヘッダーの表示ががズレるという現象が起こります。
原因はよくわかってないのですが、バグと見ていいのでしょうか。
iOS の position:fixed バグ回避方法【日記】 - 魔法使いの森
回避方法としては、input text, search, email, passwordなどの要素の focus イベントを
jQueryで見張って、そのときだけヘッダーにposition: absoluteをしてしてやる。
blur (focusが外れる) イベントを検出したら、またfixedに戻す、という処理が必要です。
overflow: scroll で慣性スクロールを適応するために必要な-webkit-overflow-scrollingプロパティ
モーダルウィンドウなどでoverflow: scroll や auto を指定した際に、
iOSだとデフォルトでは慣性スクロールが適応されず、詰まった様な動きになります。
以下を設定してあげると、慣性スクロールが有効に。
-webkit-overflow-scrolling: touch;
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方
フォームパーツのカスタマイズ
フォームパーツをカスタマイズしたい時は、appearaceプロパティにnoneを指定してあげると、checkboxやボタンの見た目が全てリセットされて好きにカスタマイズできます。
が、iOSではappearace以外にも、角丸が適応されているのでborder-radiusも0にしてやる必要があります。
@include appearance(none); // compass @include border-radius(0); // compass
また、フォームのパーツにフォーカスがあたった時にパーツの外側に線が付きますが、
それも消したい場合は以下で消せます。
outline: none
色を変えたい場合などもこのoutlineに設定してやればOK。
outline−スタイルシートリファレンス
Android で気をつけること
というかアレですね。気をつけるのは2.X系のみと言っても過言ではない。
タイトルを改めます。
Android 2.X で気をつけること
overflow: scroll ( or auto ) が効かない
これはバグだろコラ!!おいコラーーー!!!
モーダルウィンドウなどを使っている場合、上にかぶせた要素をoverflow: scroll と設定すると思いますが、
それが 2.X系だと効きません。JSを使って対処するしかない。
こちらには便利なライブラリもございます。
JSでAndroidのバージョンを取得して、3未満ならこのjsを適応、みたいなロジックを書いて対処しました。
transformが効かない
rotate とか translate とか効きませんでした。
先祖要素にposition: fixed指定してなければ効くとか色々情報出てきましたが、
指定してないのになぜか全部聴きませんでした。うーむ。
仕方ないので transformは使わない方針に。
どちらのOSでも気をつけること
CSS3を使うなら、Compassを使うべし
スマホサイトでCSS3 を積極的に使っていくとなると、ひっかかるのがベンダープレフィックス。
全てのベンダープレフィックスをカバーして書いていると自覚していたとしても、
意外と記入もれしてたりして詰まったりします。
それなら最初からCompassのmixinを使っちゃいましょう。
特に僕は、Android2.Xレイアウトがガタガタにくずれていて、
box-sizingのベンダープレフィックスを忘れていたことに気づいて
box-sizingの指定を全て @include box-sizing に切り替えたらほとんどのレイアウト崩れが直ったということがありました。
無駄に悩む時間を減らすためにも、Compass必須です。
だいぶ長くなりましたが、スマホサイトコーディング、なかなか骨の折れる作業でした。
しかし、久しぶりにガッツリコーディングやって楽しかったです。
CSS3もあんまりちゃんと勉強してなかったので、「最近はこんなこともできるのか〜」と感動しながらできたので、よかったです。
ただやっぱりAndroid 2.X がIE6みたいに呪いをかけられているので、新しいCSS3 プロパティをドンドン試せないのはもどかしい。
いつの時代にも問題児はいて、開発者を苦しめますね。
ただし、Android2.XはIEほどの腐ったミルクっぷりはなく、一度癖を掴んでしまえばデザインの提案段階で工夫したり、低いシェアのパイのユーザーを取るか取らないかをクライアントと話しあえればそれほど苦にはならなそうです。