.htaccessファイルを使ってアクセス先を自動振り分けする方法

.htaccessファイルを記述して、自動振り分け機能を作る

.htaccessファイルを記述して、自動振り分け機能を作る

それでは、ウェブサーバ「Apache」の設定ファイルである「.htaccess」を記述して、アクセス者の環境(端末)に応じて閲覧先を自動振り分けする方法をご紹介いたします。

なお、「.htaccess」ファイルそのものに関しての説明は本記事では割愛しています。詳しくは、記事「.htaccessファイルの作り方と設置方法」をご参照下さい。


 
【このページの目次】

※「PC用サイト」と「スマートフォン用サイト」で、各ページが必ず1対1で対応しているのであれば(=フォルダ構造やファイル名がすべて同一なら)、トップページ以外でも自動振り分けを実現できます。1対1で対応していないのであれば、自動振り分けはトップページだけを対象にしておきます。そもそもスマートフォンはPC用ページをそのまま閲覧可能なわけですから、無理に自動移動させる必要性はないでしょう。

トップページにアクセスされた場合にのみ自動振り分けをする方法

まずは、(PC用サイトの)トップページにアクセスされた場合にのみ、アクセス端末に応じて自動振り分けを実行する方法をご紹介いたします。以下にご紹介する方法では、トップページ以外のページに直接アクセスされた場合には自動移動はしません。

例えば、スマートフォン用サイトを同一ドメイン内の「sp」ディレクトリに置く場合は、以下の6行を .htaccessファイルに記述します。既に .htaccessファイルが存在するディレクトリに設置する場合は、既存の.htaccessファイル内に以下の6行を追記して下さい。
<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>
上記のソースの意味は以下の通りです。説明をすべて読む必要はありません。書き換えが必要なのは「スマートフォン用ページの場所」を示す5行目(上記ソース中の「/sp/」と記述した箇所)だけです。他はそのままコピー&ペーストすれば問題ありません。最低限の解説だけで十分なら、5行目部分の説明だけをお読み下さい。

1・2・6行目: <IfModule mod_rewrite.c> RewriteEngine On ~ </IfModule>
この3行については、URLを書き換える機能である「Rewriteモジュール(mod_rewrite)」を利用するために必ず書いておく記述だと考えて、そのままコピー&ペーストして下さい。

3行目: RewriteCond %{HTTP_USER_AGENT}...
RewriteCondを使うことで、後述する「URL書き換え」処理を実行する条件を指定できます。RewriteCondは、以下のような書式で記述します。
RewriteCond %{変数名} (一致パターン) [フラグ]

1.変数名
ここでは、変数名に「HTTP_USER_AGENT」を指定しています。これは、アクセス端末のユーザエージェント名を示します。

2.一致パターン
その後に続く「(iPhone|Android.*Mobile|Windows.*Phone)」が、一致パターンを示す正規表現です。ここでは、『「iPhone」または「Android + Mobile」または「Windows + Phone」という文字列が存在する場合』という条件指定になっています。正規表現について詳しい説明は割愛しますが、「Android.*Mobile」内の「.*」は「Android」と「Mobile」の間に任意の文字がいくつ入っていても良いという意味です。

3.フラグ
最後に、フラグとして [NC] と記述しています。これは、「大文字・小文字を区別しない」という意味の指示です。一致パターンに「Android」と書いておけば、実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも同じだとみなされます。

※うまくリダイレクトされるかどうかPCを使って実験したい場合には、一時的に「一致パターン」の中に、「Firefox」や「Chrome」など、お使いのブラウザ名を入れておくと良いでしょう。例えば、「Firefox」とだけ加えた場合は、「Firefoxでアクセスした場合にはリダイレクトされ、IEでアクセスした場合にはそのまま」となります。

4行目: RewriteCond %{QUERY_STRING} !mode=pc
先ほどと同様に、「RewriteCond」を使った条件指定です。URLの末尾に「?mode=pc」という文字列が付加されていない場合だけを対象にする記述(=付加されている場合には、スマートフォン用ページにはリダイレクトしないようにする記述)です。

1.変数名
変数名には「QUERY_STRING」を指定しています。これは、URL末尾に付加された「?」記号以降の文字列を指します。例えば、「http://www.example.com/search?q=All+About」というURLなら、「?」記号以降の「q=All+About」という部分が「QUERY_STRING」です。

2.一致パターン
先頭の「!」は否定の記号で、「指定のパターンに一致しない場合」という意味になります。ここでは、「!mode=pc」と記述していますから、『QUERY_STRING内に「mode=pc」という文字列がなければ』という意味になります。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。

3.フラグ
ここではフラグを指定していません。先ほどと同様に [NC] と加えておけば、「?mode=pc」でも「?Mode=PC」でも「?MODE=pc」でも有効になります。

5行目: RewriteRule ^$ /sp/ [R,L]
RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。このRewriteRuleが適用されるのは、直前までに記述したRewriteCondの各条件がすべて成立している場合のみです。RewriteRuleは、以下のような書式で記述します。
RewriteRule (一致パターン) (置換先) [フラグ]
  • 一致パターンには、「.htaccess」ファイルのある場所(ディレクトリ)からの相対パスで対象を指定します。
  • 置換先には、相対パス(=ファイル名などで始まる記述方法)でも、絶対パス(=「/」記号で始まる記述方法)でも、絶対URI(=「http://」などで始まる記述方法)でも書くことができます。
  • フラグについては後述します。

ここでは、以下のように記述しています。
RewriteRule ^$ /sp/ [R,L]
一致パターンとして記述している「^$」は「何もない」ことを示す正規表現です。トップページにアクセスされた場合には(相対パスとしては何も文字列がないので)このような指定になります。

動作例:
仮に、この.htaccessファイルを設置した場所が http://www.example.com/ だとすると、(2行目・3行目のRewriteCondによる条件指定と合わせて)以下のような動作になります。
  • スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
  • スマートフォン以外でアクセスすると http://www.example.com/ のまま移動しない。
  • スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない。

フラグには、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必須です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。省略しても問題ありませんが、ここでは余計なトラブルを避けるために書いておきました)。

5行目の書き換え例:
移動先を他のドメインにしたい場合は、以下のように記述します。例えば、 http://sp.example.com/ へ移動させる場合は、以下のように記述します。
RewriteRule ^$ http://sp.example.com/ [R,L]

スマートフォン用ページ内に、PC用ページへのリンクを加えておく
最後に、スマートフォン用ページ内には、スマートフォンを用いてPC用ページを閲覧できるように、以下のように「?mode=pc」を加えたリンクを掲載しておきましょう。
<a href="http://www.example.com/?mode=pc">PC用サイトはこちら</a>
このリンクから移動した場合には、スマートフォンからのアクセスであっても、PC用サイトを閲覧できます。「mode=pc」の部分は、2つ目のRewriteCond(4行目)で記述した文字列に合わせて下さい。

どのページにアクセスされた場合でも、常に自動振り分けをする方法

「PC用サイト」と「スマートフォン用サイト」で各ページが必ず1対1で対応しているのであれば(=フォルダ構造やファイル名がすべて同一なら)、トップページだけでなくどのページに直接アクセスされた場合でも自動振り分けができます。

例えば、スマートフォン用サイトのURLが http://sp.example.com/ なのであれば、以下の5行を .htaccessファイルに記述します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteRule ^(.*)$ http://sp.example.com/$1 [R,L]
</IfModule>
正規表現に関する詳しい説明は割愛しますが、上記の「一致パターン」部分に指定している「^(.*)$」と、「置換先」部分に指定している「$1」は、下記のような意味になります。
  • 一致パターンに含まれるすべての文字列(=相対パスのすべて)を、
  • 「$1」部分に加える。
これによって、「PC用サイト」から「スマートフォン用サイト」へ(ページ単位で1対1に対応する形で)自動転送されるようになります。

動作例:
PC用サイトのURLが http://www.example.com/ の場合は、以下のように動作します。

  • http://www.example.com/ へスマートフォンでアクセスすると http://sp.example.com/ へ自動移動。
  • http://www.example.com/folder/ へスマートフォンでアクセスすると http://sp.example.com/folder/ へ自動移動。
  • http://www.example.com/page.html へスマートフォンでアクセスすると http://sp.example.com/page.html へ自動移動。

ただ、このような構造にできるなら、そもそもレスポンシブ・ウェブデザインを採用することで対処できないかを検討してみて下さい。

なお、上記の例では置換先(移動先)に「別ドメイン」を指定しています。これを「同一ドメイン内の特定のディレクトリ」にしてしまうと無限ループになるので避けて下さい。

「PCからのアクセス」と「スマートフォンからのアクセス」を自動振り分け

今回ご紹介してきたように「.htaccess」ファイルを使うことで、アクセス端末に応じて「スマートフォン用サイト」と「PC用サイト」へのアクセスを自動的に振り分けることができます。スマートフォン専用サイトを作ったなら、ぜひ活用してみて下さい。

.htaccessファイルを使わない手段
なお、.htaccessファイル自体が使えないサーバで自動振り分け機能を用意したい場合は、JavaScriptなどの他の方法を使うしかありません。また、.htaccessファイルの設置が許可されているサーバでも、Rewriteモジュール(mod_rewrite)が使えない場合は他の手段を使うしかありません。その場合の方法は、またの機会にご紹介いたします。

サイトを分けずに、レスポンシブ・ウェブデザインを使う方法もある
最近では、「画面の広いPC」にも「画面の狭いスマートフォン」にも同時に対応させる「レスポンシブ・ウェブデザイン」が広く使われつつあります。このようなデザインを採用することで、単一のHTMLで様々な環境に対応させる方法もぜひ検討してみて下さい。ウェブサイトを分離しなくて済む分、メンテナンスも楽になります。

【関連記事】