PHP/PHPの基本・始め方

PHPレシピ3:スマートフォンとPCで振り分ける 1

今時のWebサイトは、スマートフォン(スマホ)への対応が必須です。スマホへの対応には、CSSで切り替える「レスポンシブWebデザイン」などの手法もありますが、ここではHTMLを切り替える方法で、しかもPHPを利用することでURLを変えずにデザインだけを変えるレシピを紹介します。

執筆者:谷口 允

※ 今回のレシピではiPhoneのみを対象にします。他のスマートフォンへの対応は、次回の連載で紹介します。

材料

・readfile
・strpos
・$_SERVER
・$_REQUEST

作成時間

15分

作り方

PC用とスマホ用それぞれのHTMLを作成します。

index_pc.html
<div style="background-color: #ff6f8d">
<p>PC向けです</p>
</div>

index_touch.html
<div style="background-color: #61ff95">
<p>スマホ向けです</p>
</div>
<p>スマートフォン | <a href="./?view=pc">PCサイト</a></p>

続いて、PHPファイルを作成します。まずは、無条件でPC向けのページを表示してみましょう。

index.php
<?php
readfile('index_pc.html');
これで、いったん画面を表示してみます。第1回の連載を参考に、環境を構築した方は次のURLで閲覧することができます。(recipe03ディレクトリに作成した場合)

http://localhost:8080/recipe03/

すると、PC向けのページが表示されました。現状は、スマートフォンで確認をしても同じページが表示されます。

PCで表示した場合

PCで表示した場合
 

アクセスされたデバイスを判定しよう

続いて、プログラムを次のように変更します。

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false) {
readfile('index_touch.html');
} else {
readfile('index_pc.html');
}

こうしてPCやiPhoneなどで、アクセスをしてみましょう。デバイスにあわせて、表示される内容が変化します。

スマホでアクセスした場合

スマホでアクセスした場合


ただし、まだ画面下のリンクをクリックしてもPC用には切り替わりません。

PC向けページを選べるようにする

このリンクが動作するように、プログラムを次のように変更します。

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false) {
    if ($_REQUEST['view'] == 'pc') {
        readfile('index_pc.html');
    } else {
        readfile('index_touch.html');
    }
} else {
    readfile('index_pc.html');
}

こうして、スマートフォンでアクセスをしてみましょう。最初は、スマートフォン向けのページが表示されます。しかし、先に追加したリンクをクリックすることでPC向けのページを表示できるようになりました。
  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます