実践！iPhone＆Androidサイト制作ガイド ― 第8回

JavaScriptで振り分けてスマホサイト完成！

2010年10月06日 13時01分更新

文● たにぐちまこと／H2O Space.

スマートフォンサイトへ移動する

　スマートフォン向けのサイトに自動的に移動するには次のように記述するだけです。


location.href = 'http://iphone.playgroup-kiba.com';

　ただし、今回のスマートフォンサイトは地図や電話番号といったアクセス情報に絞ったシンプルなサイトなので、ニュースやブログなどのコンテンツはPCサイトでしか見られません。強制的にスマートフォンサイトに移動してしまうとPCサイトの情報を求めているユーザーに不便なので、スマートフォンサイトへ移動してよいか、事前に確認するようにしましょう。

　次のようなプログラムを用意します。


    if(confirm('プレイグループ木場へようこそ。このサイトにはスマートフォン用のサイトがあります。表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }

　このプログラムは次のような確認ダイアログを表示し、「OK」が選択されるとスマートフォンサイトへ移動します。


iPhone/Androidからアクセスすると確認のダイアログが表示される

PCサイトとスマートフォンサイトを行き来する

　スマートフォンサイトとPCサイトとで別々のコンテンツを表示している場合は、互いに行き来できたほうが便利です。そこで、ページの一番下に次のようなリンクを用意し、PCサイトとスマートフォンサイトを移動できるようにします。


<p><a href="http://playgroup-kiba.com/">PC</a> | スマートフォン</a></p>


PCサイトとスマートフォンサイトを移動できるようにリンクを用意する

　ただし、このままではPCサイトへ移動するたびに確認ダイアログが表示されてしまうので、プログラムを次のように変更します。


<script type="text/javascript">
// iPhoneまたは、Androidの場合は振り分けを判断
if (document.referrer.indexOf('playgroup-kiba.com') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
    if(confirm('プレイグループ木場へようこそ。\nこのサイトにはスマートフォン用のサイトがあります。\n表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }
}
</script>

　変更した部分だけ見てみましょう。


if (document.referrer.indexOf('playgroup-kiba.com') == -1 && (....)) {
...

　document.referrerは「リファラー情報」と呼ばれ、直前に見ていたページのURLを取得できます。たとえば、今回のスマートフォンサイトを見ていた場合のリファラー情報は次のようになります。

http://iphone.playgroup-kiba.com/

　リファラー情報の文字列に「playgroup-kiba.com」が含まれていた場合はサイト内の遷移と分かるので、確認ダイアログを出さずに処理を終了します。これで、スマートフォンサイトとPCサイトを切り替えるたびに確認を求められる煩わしさがなくなります。

◆

　以上で、3回に渡って解説してきた「プレイグループ木場校」のスマートフォンサイトが完成しました。次回は別のサンプルを使って、マルチデバイス対応サイトの制作方法を紹介します。

navigator.platformの利用

　JavaScriptには、navigator.userAgentのほかにnavigator.platformというプラットフォームを表す情報があります。navigator.platformを使うと、iPhoneの場合は「iPhone」、iPadの場合は「iPad」と、振り分けに必要な情報が簡単に取得でき、よりシンプルなプログラムになります。

　ただし、navigator.platformでAndroidのプラットフォーム情報を取得すると「Linux armv7l」（HTC Desireの場合）のようになり、Androidであることが特定できません。AndroidはLinux OSをベースに作られているので、PlatformとしてはLinuxに分類されるためです。そこで今回はnavigator.platformではなくnavigator.userAgentを利用しています。

PHPでの振り分け

　本文ではJavaScriptを使った振り分けの方法を解説しましたが、そのほかのプログラム言語でも同じ考え方でプログラムを作成できます。たとえばPHPの場合は次のようなプログラムになります。


<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($agent, 'iPhone') !== false && strpos($agent, 'iPad') === false) || strpos($agent, 'iPod') !== false || strpos($agent, 'Android') !== false) {
?>
<script type="text/javascript">
    if(confirm('プレイグループ木場へようこそ。このサイトにはスマートフォン用のサイトがあります。表示しますか？')) {
        location.href = 'http://iphone.playgroup-kiba.com';
    }
</script>
<?php
}
?>

著者：たにぐちまこと

東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。

前へ 1 2 3 4 5 次へ

ツイートする

カテゴリートップへ