アプリなどを開発するブログ

React Native / Swift / Ruby on Railsなどの学習メモ。


【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素晴らしいの一言。

http://memo.brdr.jp/post/87190072281/ios-mac-safari-web

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ほどの腐ったミルクっぷりはなく、一度癖を掴んでしまえばデザインの提案段階で工夫したり、低いシェアのパイのユーザーを取るか取らないかをクライアントと話しあえればそれほど苦にはならなそうです。