PC版とスマートフォン版サイトを自動振り分けする方法（第1回）

こんにちは。All About ホームページ作成ガイドの西村文宏です。

PC用サイトに加えてスマートフォン用サイトを開設した際には、スマートフォン利用者へ向けて存在を知らせる必要があります。

リンクを掲載しておくだけでも構いませんが、スマートフォンを使ってアクセスされた場合に、自動的にスマートフォン用サイトへ移動する仕様にしておく方が便利です。

そこで今回は、アクセス者の利用端末を判別して、PC版サイトとスマートフォン版サイトを自動振り分けする方法をご紹介いたします。

●自動振り分けの概要

今回ご紹介する自動振り分けの動作は、以下のようになります。

例えば、

(A) PC用サイトのURLが http://www.example.com/
(B) スマートフォン用サイトのURLが http://www.example.com/sp/

のとき、PC用のURLである「(A) http://www.example.com/」に

(1) スマートフォンでアクセスすると

→ (B) http://www.example.com/sp/ へ移動

(2) スマートフォン以外でアクセスすると

→ (A) http://www.example.com/ のまま

(3)    スマートフォンでアクセスしても、

URLが http://www.example.com/?mode=pc であれば移動しない

となります。
スマートフォンを使っていても、PC用サイトの方を閲覧したいと望む利用者もいるでしょう。

そこで、上記(3)のように「PC用サイトを閲覧できる選択肢」も用意しています。

なお、自動移動するのは「PC用サイトのトップページ」にアクセスした場合だけです。それ以外のページにアクセスした場合には自動移動はしません。

●利用機器の判別方法

アクセス者の利用端末は、ブラウザからサーバに伝えられる情報の1つである「ユーザエージェント名」を調べれば分かります。
ユーザエージェント名は閲覧環境によってさまざまですが、端末ごとに共通している文字列があります。

例えば、iPhoneを使ってアクセスされた場合のユーザエージェント名には、「iPhone」という文字列が含まれます。Windows Phoneの場合には、「Windows Phone」という文字列が含まれます。

Androidスマートフォンの場合には、「Android」と「Mobile」という文字列が含まれます。（Android OSを利用したタブレット型端末からアクセスされた場合にも「Android」の文字列が含まれるため、スマートフォンに限定するには「Mobile」という文字列の存在も同時にチェックする必要があります。）

したがって、ユーザエージェント名に上記の文字列が含まれているかどうかを調べることで、スマートフォンからのアクセスかどうかを判別できます。

●自動振り分け方法

今回ご紹介する自動振り分け方法は、

(1) ウェブサーバが「Apache」であり、
(2) 設定ファイル「.htaccess」の設置が許可されていて、
(3) mod_rewriteモジュールが利用可能

という上記の3条件をすべて満たしているサーバでのみ利用できます。
以下の6行を、.htaccessファイルに記述してください。すでに.htaccessファイルが存在する場合は、既存のファイル内に追記します。

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone)
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]

上記のソースでは、スマートフォン用サイトが、spディレクトリにある場合を例にしています。使用する際には、実際のディレクトリ名に合わせて5行目を修正してください。

なお、スマートフォン利用者が「PC用サイトの方を閲覧したい」と望んだ場合のために、スマートフォン用サイト内には、PC用サイトへのリンクとして、以下のようなリンクを記述しておきましょう。

<a href=”/?mode=pc”>PC版サイト</a>

上記のように、URLの末尾に「?mode=pc」という文字列が付加されていれば、利用機器が何であっても自動移動はしない仕様にしてあります。

先ほどの6行のソースについて、各行の詳しい意味やカスタマイズ方法については、次回にご紹介いたします。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧