[Web] YoheiM.NETをスマートフォン対応しました。スマホ対応の方法を書きます☆

YoheiM.NETのサイトをスマートフォン対応しました(*´∇｀*)
ずっとやりたいと思っていて、でもスキル的に不安を感じていて躊躇していましたが、 今日やっと、indexページとblogページの2つをスマホ対応しました。

ブログでは、スマホ対応に利用した技術やその採用理由などを書きたいと思います。

スマートフォン対応する基本方針

基本方針は、以下と考えました。

1. 出来る限り簡単に行いたい。
2. PC用表示とスマホ用表示でページやURLは一緒にしたい。（*1）
3. スマホページでもGoogle Adsenseは入れたい。
4. 読みやすさ／使いやすさを損ないたくない。

(*1) ページやURLを一緒にしたい理由として、ユーザーの利便性を損ないたくなかったのと、 SEO対策ためです。同じURLでPCでもスマホでも、同様の内容が見えるようにして、 アクセスURLを意識せずに、サイトを訪れて欲しいと考えました。

上記の要件から、今回は、CSSで出来る限り対応する。CSSやJSで対応が難しい箇所だけ、 PHPを用いてスマホ対応するという事にしました。

CSSを用いたスマホ対応

メディアクエリーの利用

CSSでは、メディアクエリーと呼ばれる技術を使って、デバイスの表示横幅に合わせて、 利用するスタイルを変更するようにしました。
メディアクエリーは、以下のように利用しました。

@media screen and (max-width:480px) {
    .right {display:none;}
    /* 他にも色々と表示制御をここに書く */
}

max-width:480pxを指定して、iPhoneなどの端末では、mediaQuery内で指定したCSSを利用できるようにしました。
例えば、上記のように、右カラム（.rightのところ）を非表示にして、シングルカラム表示を実現します。

viewportの指定

iPhoneで上記のCSSがちゃんと適用されるように、viewportの設定も必要です。

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

iPhoneのSafariでは、初期表示時に倍率0.5となっており、そのまましていると、横幅980pxとメディアクエリが 認識してしまいます。
上記のようにwidthやinitial-scaleを指定する事で、mediaQueryが正しく動くように制御しています。

なくなくPHPでスマホ対応したGoogle Adsense

表示に関する部分はCSSで対応出来たんですが、Google Adsenceのところは、PHPでの対応が必要でした。

Google Adsenseは、ルール上、１ページに広告は3つまでしか表示することができず、4つ以上を 配置すると4つ目から表示されない仕組みとなっています。

モバイル用のGoogle Adsenseを追加したら、PC用の広告が非表示になってしまいました。

Google Adsenseの部分をCSSで非表示にするだけではダメで（広告を表示するリクエストは飛んでしまう）、 PHPでGoogle AdsenseをHTMLに書き出すか否かを制御するようにしました。

以下がサンプルソースとなります。

<?php
  // ユーザーエージェントを取得する。
  // 大文字や小文字の揺れは気にしなくていいように、小文字に統一する。
  $agent = strtolower($_SERVER['HTTP_USER_AGENT']);

  // iPhoneかAndroidの場合には、モバイル用の広告を表示する。
  if (!ereg("iphone",$agent) && !ereg("android",$agent)) {
?>
  <!-- Google Adsense（モバイル用）を表示するコードをここに書く -->

<?php
  // 上記以外は、PC用の広告を表示する。
  } else {
?>
  <!-- Google Adsense（PC用）を表示するコードをここに書く -->

<?php } ?>

これで、PCでもモバイルでも、１ページ上の広告数を３以下にすることが出来ました。

最後に

モバイル対応をするにあたり、見やすさを重視していたので、文字サイズとかたくさんテストしました。

また多くのモバイルサイトで嫌だった、広告から受けるプレッシャーを撲滅する設計にしてみました。

まだまだ改善点はありますので、今後もストレスフリーに閲覧できるサイトを目指し、UIを洗礼していきたいと思います。

最後までお読み頂きましてありがとうございました(*ﾟ▽ﾟ)ﾉ