※ 今回のレシピでは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向けのページを表示できるようになりました。