遅ればせながら、サイトのモバイルユーザーフレンドリー対応に挑戦。 | 在宅ネットでコツコツお金を稼ぐ

当サイトを作って、しばらく経ちますが、 Googleアナリティクスで、 モバイルユーザーフレンドリーではない、という表示がずっとされていました。

このモバイルユーザーフレンドリーというのは、 スマートフォンやタブレットなどの携帯端末でサイトを表示した時に見やすく表示されるか、 というもののようです。

私は普段、PCでネットをしているので、 ついつい対応を後回しにしていましたが、 これだけスマートフォンを利用している方が多くなった時代なので、 モバイル対応もしっかりしないと、と考えました。

ちなみに、無料ブログなどを使っている場合は、 そちらのサービスでモバイル対応してくれていると思いますし、 WordPressなどを使っている場合もそちらで対応してくれていると思うので、 何も対応しなくても良いのではないかと思います。

phpやperlなどで自前でサイトを作った時は、 自分でモバイル対応をしなければならない場合が多いのではないかと思います。

モバイルフレンドリーサイト作りを開始

さて、モバイルユーザーフレンドリーのサイトを作ろうと思いましたが、 実現するには無数の方法があるようです。

その中で自分に合ったやり方をすることになると思いますが、 あまり難しい方法だと大変なので、簡単な方法を試してみることに。

今回、私がやってみたのは以下のような方法です。

・ユーザーエージェントを取得して、スマートフォンからのアクセスかどうかを判定。

・PC用、モバイル用とスタイルシート(.css)を2つ用意して、 もしもスマートフォンからのアクセスだったら、モバイル用のスタイルシートを表示する。

という方法にしてみました。

私のサイトはphpで書いているので、以下phpでの例です。

ユーザーエージェントでスマートフォンからのアクセスを判定

まずは、phpでユーザーエージェントを取得して、 スマートフォンからのアクセスかどうかを調べます。 以下のサイトが参考になりました。

ユーザーエージェントでスマホとPCを判別し、処理を変化させるPHPネタ

こちらのサイトのコードを使わせていただけばよいのですが、 私はちょっとまだるっこしいプログラムにしてみました。

$sumafo_Flag=0として、 $sumafo_Flag変数を用意して、 スマートフォンなら、1を代入します。

$ua = $_SERVER['HTTP_USER_AGENT'];

$sumafo_pos1 = strpos($ua,'iPhone');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}

$sumafo_pos1 = strpos($ua,'iPad');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}

$sumafo_pos1 = strpos($ua,'iPod');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}

$sumafo_pos1 = strpos($ua,'Android');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}

こういう風にして、

$sumafo_Flagが0ならPC用、$sumafo_Flagが1ならスマートフォン用のスタイルシートを表示します。

HTMLを表示するページの修正

HTMLを表示する部分を書き換えます。

まずは、タグ内に、ビューポートというメタタグを書かないといけないようです。 いろいろメタタグが並んでいるところの最後に

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

と書きました。

続いて、スタイルシートを切り替えます。 タグないの、スタイルシートを指定している部分を書き換えます。

$sumafo_Flagが1なら、スマートフォン用のスタイルシートを表示します。 0なら、PC用のスタイルシートを表示しておきます。

if($sumafo_Flag==1){
print '<link rel="stylesheet" href="article_style_mobile.css">';
}
else{//PCサイト
print '<link rel="stylesheet" href="article_style.css">';
}

スタイルシートの修正

最後に、スタイルシートですが、 PC用の他に、モバイル用も作ります。 モバイル用のスタイルシートはコンテナのWidthを100%にしておけばそれで良さそうです。 あと、FlexBoxを使っている場合などは横並びから、縦並びに変える必要もありそうです。

これで基本的なモバイル対応が出来ました。

モバイルフレンドリーができたかどうか、テストする

モバイル対応がされているかテストしてみましょう。

モバイル対応がちゃんとできたかどうか確認するにもいくつかの方法があります。

一番簡単なのは、自分のスマートフォンでサイトを表示してみる、ということだと思います。

また、Chromeの拡張機能で、

FireMobileSimulator for Google Chrome

というものがあります。こちらをインストールすると、PCからスマートフォンの表示を確認することが出来ます。 私もこちらを入れて確認してみました。 ページを表示させたら、リンク先をクリックしたり戻ったりすると、 黒枠が表示されますね。その黒枠の中に収まっていれば良いようです。

さらに、 モバイルフレンドリーテスト

というサイトもあります。こちらはGoogleが用意してくれたものでしょうか。 自分のサイトのURLを入れるだけで、モバイルフレンドリーになっているかどうか判定してくれます。

最終的には、このモバイルフレンドリーテストで確認するのが良さそうです。 これらで確認して表示がおかしなところがあったら、修正を繰り返す、ということになります。

今回のまとめ

ということで、簡単でしたが、サイトのモバイル対応について書いてみました。 今回はphpを使ったサイトでのやり方でした。

HTMLを表示するファイルは一つで、スタイルシートによって切り替えるという方法にしてみましたが、 意外と簡単にモバイル対応することができました。

実際にモバイル対応をする場合は、各サイトに合わせて細かな修正が必要になると思いますが、 基本的な流れはこのようにすると良さそうです。


(2018/11/8)

トップページ

その他のコラム

コンテンツ

トップページ