材料
・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で表示した場合
アクセスされたデバイスを判定しよう
続いて、プログラムを次のように変更します。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向けのページを表示できるようになりました。