各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

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

  • attract_users
2012/02/14

こんにちは。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行のソースについて、各行の詳しい意味やカスタマイズ方法については、次回にご紹介いたします。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.02.16
PC版とスマートフォン版サイトを自動振り分けする方法(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る