こんにちは。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行のソースについて、各行の詳しい意味やカスタマイズ方法を紹介していきます。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう!
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら