ホームページ作成/携帯・スマートフォンサイト作成入門

PC版とスマートフォン版サイトを自動で切り替える方法(3ページ目)

PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けすることで、スマートフォンユーザだけをリダイレクトする方法を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

.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 へ自動移動。

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

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

PC版サイトとスマートフォン版サイトを自動切り替え

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

.htaccessファイルを使わない手段
なお、.htaccessファイル自体が使えないウェブサーバで自動振り分け機能を用意したい場合は、JavaScriptやPHPなど他の方法を使うしかありません。また、.htaccessファイルの設置が許可されているサーバでも、Rewriteモジュール(mod_rewrite)が使えない場合は他の手段を使うしかありません。ユーザエージェント名は、たいていの言語で簡単に取得できます。

JavaScriptなら、
var useragent = navigator.userAgent;
PHPなら、
$useragent = $_SERVER['HTTP_USER_AGENT'];
Perlなら、
my $useragent = $ENV{'HTTP_USER_AGENT'};
などの書き方で、変数useragentにユーザエージェント名が入ります。

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

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます