インソースマーケティングデザイン
2016.03.16 コーディング
新しいレスポンシブサイト制作の手法
こんにちは。
フロントエンドエンジニアの虎澤です。
数年前からよく、「ひすいこうたろう」さんの本を買っては読んでいます。
あ、しんどいな…って時に読んだりします。
ぐさっとささって泣いたりすることも、笑ったりすることもあります。
そういう考え方もあるんだな、と気づかされることが多いです。
心が折れた時にはぜひ読んでみてください。おすすめです。
目次
今、マリンロードで実践しているスマートフォン向けコーディングの手法
今回は、今マリンロードのフロントエンドチームで取り組んでいる、新しいスマートフォン向けコーディングの手法についてご紹介いたします。
ざっくり説明すると、この方法では、PC画面上でブラウザ幅を縮めても、レイアウトは変わりません。
PC用のレイアウトがそのまま表示されます。
ただ、スマートフォンでそのページを表示すると、ちゃんとスマートフォン用に最適化されたスタイルで見ることができます。
少し前までは、この動きをPC用とスマートフォン用にhtmlファイルなどを用意し、リダイレクト処理などさせることで実現させていました。
が、今取り組んでいるのは、この仕組みをワンソース…単一ファイルで実現するという手法です。
メリット
従来のレスポンシブサイトですと、ほとんどが%指定によるリキッドレイアウトとなります。
画面幅によって表示が最適化されるのはいいのですが、長いテキストがあった場合、デザイン上では意図していない改行が入ってしまうことがままあります。
ボタン内の文章をテキストにしている場合はこれが嫌です（個人的に）
どのスマートフォンで見ても、デザインカンプ通りの見た目で見せたい…いい方法はないか…ソリッドレイアウト（pxコーディング）だったらいけるのになぁと思い、試行錯誤した結果できたのが、先述の手法となります。
どのサイズのスマートフォンでみても、画面幅は固定となるので、見せたいデザインをそのままユーザーに見せることが可能です。
一部、古いAndroidでは表示が崩れますが、それ以外では問題なく表示させることが可能です。
解説①ユーザーエジェントの判定でviewportの値を設定する
この手法を実現するために必要なこととして、まず、ユーザーエージェントによってviewportの値を切り替えることです。
この設定や実際の処理はjavascriptを使います。
$(document).ready(function(){
switch(true){
case $.browser.smart:
case $.browser.android || $.browser.iphone:
//スマホ閲覧時の処理
$(‘html’).addClass(‘spMode’);
$(‘meta[name=viewport]’).attr(“content”,’width=750′);
break;
default:
//PC閲覧時の処理
//PCならviewportはデバイス幅
$(‘meta[name=viewport]’).attr(“content”,’width=device-width’);
}
});
※UA判定部分は、弊社独自のjsライブラリを使用しております。
上記では、スマートフォンで閲覧している時、meta=viewportの値を750にし、それ以外の場合だとmeta=viewportの値を現在のブラウザの画面幅に設定しています。
これにより、スマートフォンで閲覧している時は必ず画面幅が750px固定になって表示されます。
解説 ②htmlタグにspModeクラスを付与する
2つ目に必要な処理として、htmlタグにスマートフォン閲覧時用のクラスを付与してあげることです。
この手法は、古いieブラウザ向けのスタイル適応にも使用したりします。その応用です。
$(document).ready(function(){
switch(true){
case $.browser.smart:
case $.browser.android || $.browser.iphone:
//スマホ閲覧時の処理
$(‘html’).addClass(‘spMode’);
$(‘meta[name=viewport]’).attr(“content”,’width=750′);
break;
default:
//PC閲覧時の処理
//PCならviewportはデバイス幅
$(‘meta[name=viewport]’).attr(“content”,’width=device-width’);
}
});
※UA判定部分は、弊社独自のjsライブラリを使用しております。
これにより、ソース上ではhtmlタグは<html class=”spMode”>となります。
解説 ③スマートフォン用スタイルを適応するクラス名の頭にhtml.spModeを付加する
例えばPC用のスタイルとして、
color: red;
}
というCSSがある場合、スマホ表示時に青字にしたい！となったら、
color: blue;
}
と書くことで実現できます。
ちゃんと「htmlタグ」の「spMode」クラスであることを書くことや、スマホ用のスタイルの優先度が高くなるように気をつけて記述する必要があります。
例えば、下記の場合だとスマートフォン閲覧時にきちんとスタイル適応されません。
color: red;
}
html.spMode .sample{
color: blue;
}
これだと、PC用に書いているスタイルの方が優先度が高くなってしまい、スマホのスタイルが優先されません。
解説④新しい手法は、CSS設計ありき
先ほどのCSSの優先度のこともあり、この手法を無難に扱うには、CSSの設計を考慮してコーディングすることが必須となります。
要素毎に優先度がバラバラだと、管理がしにくく、スマートフォン向けのスタイルを書く時もコードが煩雑になり、メンテナンスが困難となります。
そもそもCSS設計は、CSSのメンテナンス性や拡張性などを確保するにあたっては必須となります。CSS設計は必ず考慮しなければいけないものと思ってサイト制作にあたるとよいと思います。
まとめ
上記の通り、非常にざっくりとですが、弊社で取り組んでいるレスポンシブサイト制作の新しい手法をご紹介させていただきました。
特別難しいことはしていない（あえてネックとするならCSS設計を覚える必要がある）ので、簡単にソリッドレイアウトでのレスポンシブサイト制作が実現できます。
%じゃなくてpxでコーディングすればコーディングスピードもあがるし、個人的にはとても気に入っている手法です。
%じゃなくpxでレスポンシブサイトを作ってみたい方、デザインカンプ通りの表示を実現したい方、よかったら試してみてください。
以上、虎澤でした。
