Tech Blogスマートフォン対応しました！

こんにちは！　Yahoo!ニュースのブラウザフロントエンドを担当している吉澤（@Yeshi）です。

社内のアドベントカレンダーの執筆募集を見て、社内チャットで「Tech Blogってまだスマートフォン対応していないんだ。ブログネタはないけれど、ブログのスマホ対応ならできそう…」とぼやいていたところ、無事にTech Blog担当者の目に止まってしまい、気がつけばブログのデザインをいじる権限をいただいてしまったのでした。

そこで業務の合間の時間を割いて、ブログのテンプレートやCSSを書き直して、スマートフォンでの表示最適化（レスポンシブ化）対応をしてみました。
対応しながら考えていたことや、普段からCSSを書く時に気を付けていることなどを簡単に紹介してみようかと思います。

1.対応ブラウザを考える

新たにサービスを引き継いだ時はまずアクセスログを見て、どのようなブラウザからのアクセスが多いかを調査するようにしています。

（蛇足：1年近く前の記事となりますが、Yahoo!ニュースでのブラウザシェアについてはこちらの記事で紹介しております。最近の傾向もほぼ変わらず、IE6-10が少しずつ減り、代わりにIE11やEdgeの割合が増えている状況です。）

そこでTech Blogへアクセス頂いているブラウザのシェア率を簡単に調査してみたところ、なんと驚いたことにIE8のシェア率が10％以上という衝撃のデータが出てきました（ちなみにシェア1位はGoogle Chrome）。
しかしIE8は2016年1月にベンダーのサポートが終了予定となっています。そこで諸々考えた結果、今回の対応では以下の方針とすることにしました。

• IE6,7は完全に切る。
• 使うHTML,CSSは基本IE8対応のもののみにする（コアなレイアウト部分にはHTML5,CSS3は使わない）。
• とはいえ無理してIE8完全対応を目指すことはせず、アップデートを促すメッセージを表示する。
• そして新たにスマホ対応。Android4~、iOS7~あたりの対応を目指す。

2.使われていないCSSを消す。削減できる機能を探す

このTech Blogは2008年に開設し多くの過去記事も存在することから、表示崩れのリスクを減らすため、ゼロからCSSを書き直すのではなく現在の資産を活用することとしました。

読まれていた複数のCSSファイルやHTMLベタ書きのCSSを一つにまとめてSass化していきました。その過程で使われていない記述を見つけてはバッサリと削除していきます。

一般的にCSSファイルが肥大化しやすく共同作業に向かないと言われている理由の一つに「UI改修の過程で使われなくなった記述が残りやすい」という問題があるかと思います。そこで自分はなるべく使わなくなったCSSはすぐに消すようにし、定期的に不要な記述が残っていないかチェックするようにしています。新たにCSSファイルを引き継いだ時も、まずは本番で動いているフロントエンドのソースをgitから落としてきて、git grepでIDやclass名を検索しながらマッチしなかったものはどんどん消していく作業から始めることが多いです。

たまに機能としては残っているけれど、現状は条件分岐により99%表に出てくることのないようなモジュールを見つけてしまうことがあります。そういう場合も「この機能は今後どれくらい使われる可能性がありますか？」と確認するようにしています。するとだいたい出る結論は「もう廃止しましょう」です。気兼ねなくバッサリ削除します。

今回のリファクタリングでは、トラックバック機能を削除させていただきました。

3.スマホ用のmetaタグを追記し、width:auto; float:none; してみる。

CSSがひととおりきれいになったら、今度はHTMLに手をつけていきます。とはいえスマホ対応に向けてまずやることは

<meta name="viewport" content="width=device-width,initial-scale=1.0">

のmetaタグを追加するだけです。

そしてスマホ向け表示に切り替えるブレイクポイントを決めて（今回は850pxにしました）、おもむろに2カラム化を解除するスタイルを追記すればOKです。

今回はこのようにしました。

#container {
    width: 950px;
    margin: 0 auto;
}
/*メインカラム*/
#alpha{
    float: left;
    width: 645px;
}
/*サブカラム*/
#beta{
    float: right;
    width: 280px;
}


/*=====================
 幅850px以下で1カラム化
=====================*/
@media all and (max-width: 850px) {
    #container,
    #alpha,
    #beta{
        float: none;
        width: auto;
    }
}

これだけでうまくいけば8割がたは完成しちゃいます！

4.レスポンシブにできないPC向けモジュールを洗い出し、そこだけ作り直す。

しかし、幅固定であることが前提にCSSが組まれているモジュールがあるとそうはうまくいきません。そこだけは新たに作り直します。
落とし穴としては、iframeなどで読み込む外部リソースはレスポンシブ対応していないことが多いです。そういったモジュールには max-width:100%;を追加指定してあげます。

また、Yahoo! JAPANには定められた共通のヘッダーがあり、PC用のものはPC向けに最適化されています。こういったモジュールに対しては無理してワンソースレスポンシブレイアウトを目指したりせず、HTMLごと出し分けてしまいます。サーバー側で出力するHTMLを出し分けることが多いですが、今回はheader_pc,header_spの2つのdivを用意して、CSSのmediaqueryでdisplayの値を切り替わるようにしました。

.header_sp,
.footer_sp {
    display: none;
}

@media all and (max-width: 850px) {
    .header_pc,
    .footer_pc {
        display: none;
    }
    .header_sp,
    .footer_sp {
        display: block;
    }
}

これだけでOKです！

5.細かく作り込んでいく

HTMLのマークアップやclass名のルールを整えていったりと、あとはいつものように細かい見た目を調整していきます。

と、だいたいこんな感じでスマホ対応が完了できました。

今回はスマホ対応がメインで見た目はあまりいじれませんでしたが、今後もUI改善していきたいですね。

まとめ

ワンソースレスポンシブレイアウトにこだわることをゴールにするのではなく、あくまでソースコードを統一して省力化する一つの手段として捉えると良いと思います。ページの「外側のデザイン」はデバイスごとに用意し、中身だけをソース統一するイメージだとやりやすいです。

また、大規模開発が必要なWebアプリの世界が広がり、CSSが時代に合わなくなったとも言われてきています。Webはもともとテキストベースの世界から発展したこともあり、HTMLやCSSはスタティックなテキストコンテンツを装飾するのが得意です。テキストベースの世界ではCSSはむしろどんどん使いやすくなっているとも感じています。

特に最近はIE8のサポートも終了間近で、flexboxといった強力なCSS3プロパティが気兼ねなく使える時代がすぐそこまできており、以前と比べてCSSそのものの難易度も格段に下がったと感じています。

昨今のCSSの話題といえばフレームワークやプリプロセッサの話題が浮かぶかと思いますが、これからCSSを学びたい人は、まずは純粋にCSSの世界を楽しんでみることをおすすめします！