スマートフォン対応ページの作り方(PC/スマートフォン両用)

パソコン対応のウエブページをレスポンシブウェブデザインのページにして、PHPによるRESSで、スマートフォンにも対応したページにしてみました。ユーザーエージェントでスマートフォンかどうかを判定して、PHPを使ってHTMLの表示をサーバー側でPCとスマホなどに切り替えています。

スマートフォンとは

スマートフォン（smartphone）とは、パソコンの機能が付いた多機能携帯電話のことです。「スマフォ」とか「スマホ」と呼ばれていて最近急激に普及してきています。

タブレット端末楽天もスマートフォンと同様な機能を持っていますが、これはスマートフォンに比べると表示画面が7~10インチ程度と大きいのが特徴です。

スマートフォンの画面のサイズは最低320x480pxあります。その解像度は480px以上のものもあります。しかし、一般的にスマートフォンは画面のサイズが3~6インチと小さいのが特徴です。

PC用のページをスマートフォンで見る問題

パソコン用に作られたページをそのままスマートフォンで見ると、画面が小さい為に、非常に見にくい画面になります。文字が小さすぎて読むのに目が疲れます。文字が小さいので指で操作すると、隣のメニューが邪魔になってメニューの選択がうまくできません。

前記のように文字が小さい場合、拡大して見ると縦と横の両方のスクロールが必要になることがあります。両方のスクロールが必要では読む気力が失せてしまいます。また、段組をしてある場合や、横幅の広いページでも、横スクロールが必要になります。

スマートフォンでは、段組をやめる事や、横幅を狭くする事や、横幅を指定しないリキッドレイアウト等が必要です。また、メタタグでviewportの設定が必要です。

スマートフォンの判定(ユーザーエージェントで判定)

ユーザーエージェントでスマートフォンかどうかをPHPで判定します。この方法は次のページを参考にしました。http://www.kens-web.com/2011/06/1244

下記の例では、アンドロイドタブレット端末はスマートフォンと判定されずに除外されます。アンドロイドタブレット端末をスマートフォンと判定したいのなら「Android.*Mob」を「Android」と変更してください。

iPadはタブレット端末ですが、ユーザーエージェントに「iPhone」の文字列があるという情報もありますが、一般的にはユーザーエージェントで「iPad」を探せば判定できるようです。

スマートフォン版 Googlebot-Mobileのユーザーエージェントには、「iPhone」という文字列があり、このままで、グーグルの検索やアドセンスでも問題無いと思います。

<?php
function is_mobile () {
$useragents = array('iPhone','iPod','Android.*Mob','Opera.*Mini','blackberry','Windows.*Phone');
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

このPHPスクリプトはヘッドタグ内の先頭付近またはそれ以前に置いてください。もちろん外部ファイルにしてインクルードしてもかまいません。

viewport の指定

メタタグの「viewport」は、下記のようにCSSで横幅の最大値のみを設定しているので、「width=device-width,initial-scale=1.0」と設定することにより、スマートフォンの最適な横幅に表示させています。

initial-scale=1.0の指定は、iphoneでスマホを横にした時、拡大され過ぎるのを防止する為です。

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

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no と指定する人があるようですが、私はナンセンスだと思います。文字の大きさはユーザーが自由に変更できるようにするべきです。タブレット端末などで文字の大きさが変更できないと、文字が小さくて全く使い物になりません。文字が変更できないページなら私は即閉じてしまいます。

minimum-scale　と　maximum-scale　と　user-scalable　はデフォルトのままにしておくのが良いでしょう。その為のデフォルトです。

CSSでデザインを切り替える

PC用のスタイルシートを読み込んだ後に、スマートフォンであればスマートフォン用のスタイルシートを読み込みます。

<?php if (is_mobile()) { ?>
<link rel="stylesheet" href="ファイルへのパス/mobile.css" />
<?php } ?>

又は、スマートフォン用のスタイルシートは短いので、別ファイルにしないで、インラインスタイルシートとしてHTMLファイルに直接記述しても良いでしょう。別ファイルにしてインクルードで取り込んだらもっとスマートになり良いかも知れません。

次のようにスマートフォン用に変更したスタイルシートをmobile.css として用意します。そしてスマートフォンでのスタイルシートの変更点のみ上書きします。現在はインラインスタイルシートとしています。

body {font-size:1.2em}
#main {max-width:640px;margin:0}
#side {max-width:640px}
.sp_lh {line-height:1.8}

私の場合は、フォントサイズを大きくして見やすくしています。また、段組を解消して、最大の横幅を640ピクセルとしました。これは最近のスマホの横幅はdevice-widthが最大640ピクセルあるからです。

元々PCページでもリキッドレイアウト(画面の横幅に応じて改行位置が自動的に変化)ですのでそのままリキッドレイアウトを踏襲しました。PCページでは左側にあったサイドバーのメニュー部分をメインコンテンツ後ろに持ってきました。

タブレット端末では、右側に余白ができることがありますが、ダブルタップで適度に拡大して見ると見易いかも知れません。また、スマートフォンの幅に収まらない大きい画像は、横幅の最大値を指定して画面内に収めています。

ナビゲーション部のリンクはスマートフォンで押し間違いがないように、行間を少し広げています。以上の事をしただけで、スマートフォンでは使いやすいページになったと思います。

HTML部分のデザインをPHPで切り替えて表示(RESS)

ページの一部をPHPを使ってサーバーサイドで処理して、レスポンシブWebデザインも適用します。そうすると一つのテンプレートで全デバイス向けのウェブサイトを構築できます。これはRESS(Responsive Web Design with Server Side Components)と呼んでいます。

PCページでは横幅728pxの広告がありましたが、これをスマートフォンでは横幅300pxまたは320pxの広告に変更しました。これらを切り替えるのが次のスクリプトです。

<?php if (is_mobile()) { ?>
スマートフォンで表示するHTML
<?php } else { ?>
PCで表示するHTML
<?php } ?>

スマートフォンで表示させたくない画像や、フェイスブックのコメントなどは次のスクリプトで、スマートフォンでアクセスした時だけに表示させないようにしました。PHPで動作させていますので表示させないだけでなく、読み込みもしませんので、表示が速くなります。(!is_mobile())の「!」は否定の意味です。

<?php if (!is_mobile()) { ?>
スマートフォンで表示させないHTML
<?php } ?>

もちろん、全てPHPスクリプトで記述する場合は次のようにします。

<?php if (is_mobile()) {
スマートフォンで動作させるPHPスクリプト ;
} else {
PCで動作させるPHPスクリプト ;
} ?>

Vary HTTPヘッダーを適切に設定する必要があります

同じURLでパソコンからとスマートフォンからのアクセスの違いで、コンテンツを出し分けていると、これを検索ロボットに適切に伝える必要があります。

これをしないと、パソコン用の検索ロボットがページの内容を調べて、その後にモバイル向けの検索ロボットが同じページをインデックスする時、以前のパソコン用のキャッシュを利用する可能性があります。その反対の可能性もあります。

Vary HTTPヘッダーというのは、ブラウザからサーバーにアクセスがあると、サーバーがデータと一緒に返す「Vary」という名前のHTTPヘッダーことです。この内容はユーザーエージェントやgzipやクッキーの状態などによって変わることがあります。

今回の場合はユーザーエージェントでコンテンツを出し分けてはいないのですが、もし、コンテンツを出し分けていれば、htaccessファイルに次の行を追加します。

Header set Vary User-Agent

もし、ブラウザのgzipなどの受信形式とユーザーエージェントの両方でコンテンツやキャッシュなどが変化するのなら、htaccessファイルに次の行を追加します。

Header set Vary Accept-Encoding,User-Agent

その他の変更点

メニューの文字の大きさが少し小さいかなと思ったので、PC向けページも含めて見直しました。他には、表(Table)の横幅ができるだけ右に、はみ出さないようにしました。

結果

スマートフォン用に別のページを用意して作成するのは、労力が掛かり過ぎです。今回は簡単な方法でスマートフォンに対応させました。

もし、スマートフォンの判定がうまくいかなくても、元々、レスポンシブWebデザインでページを作成してありますので問題は無いでしょう。スマートフォンで見て、お気づきの点がありましたらお知らせくださると嬉しく思います。