アフィリエイトは2001年から運営実績がある安心のアクセストレード

アフィリエイトのアクセストレード

パートナーログイン

ID・パスワードを忘れたかたはこちら

広告主(マーチャント)ログイン

サイト運用

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

情報更新日:2012/02/14

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。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ファイルが存在する場合は、既存のファイル内に追記します。

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

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

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

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

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

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


All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

同じ著者の記事

関連コンテンツ

ご注意ください

  • ・本ページの内容は、2012/02/14更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • ・一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合があります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合は責任を負いかねますので、内容を御確認のうえ、ご自身の判断のもとでご利用ください。
  • ・掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。