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

ウェブサイトのスマートフォン対応方法をどうするか

スマートフォンは、PC用に作られたウェブサイトでも表示できます。しかし画面サイズが小さいため、そのままの状態では読みにくい可能性があります。その場合の対策としては、

• レスポンシブWebデザインを採用する
• スマートフォン専用サイトを作る

などの方法があります。

■更新や管理が楽なのはレスポンシブWebデザインだが……
更新や管理の労力を考えれば、レスポンシブWebデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。

(参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選

しかし、既存のPC用サイトがレスポンシブ化しにくいデザインな場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合では、PC版サイトとスマートフォン版サイトを分離する方が望ましいこともあるでしょう。

PC版サイトとは別に、スマートフォン専用サイトを作った場合

もし、ウェブサイトをPC用とスマートフォン用の2種類に分けたなら、アクセス者の端末に応じて自動的にアクセス先が切り替わる機能も用意してみてはいかがでしょうか。

アクセス者が利用しているブラウザの種類を示す「ユーザエージェント名」を調べれば、使われている端末(環境)を判別してアクセス先ページを自動的に振り分けることができます。

このような自動での振り分け機能を用意しておけば、スマートフォンを使っているアクセス者には、PC版サイトではなくスマートフォン専用サイトを見せられます。ただし、スマートフォン利用者の中には直接PC版サイトを閲覧したいと望む人々も居るでしょうから、アクセス者自身が望んだ場合にはPC版の方を閲覧できる機能も併せて用意しておくと良いでしょう。

スマートフォン端末を判別して、アクセス先を自動的に振り分ける方法

端末に応じてアクセス先を自動で振り分ける方法にはいくつかありますが、本記事ではウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける方法をご紹介いたします。ウェブサーバ側で判別されるので高速です。

この「.htaccess」のRewriteモジュール(mod_rewrite)を使えば、ユーザエージェント名が特定の条件に合致している場合にだけ、指定したページへ自動で移動(リダイレクト)させられます。

今回ご紹介する方法では、下図のように、

• 代表のURLを「PC用サイトのURL」としておき、
• スマートフォンを用いてアクセスされた際にだけ、自動的にスマートフォン用サイトへ移動(リダイレクト)する

という仕様を例にして解説いたします。

端末の種類に応じてアクセス先を自動で切り替えるために必要な2点

上図のような自動振り分け機能を実現するためには、

• アクセス者が使用している環境のユーザエージェント名を調べて、スマートフォンによるアクセスなのかどうかを判別する方法
• スマートフォンからのアクセスだった場合にだけ、自動的にスマートフォン用ページに移動(リダイレクト)させる方法

の2点が必要です。本記事では、この2点を順にご紹介いたします。

それでは最初に、ユーザエージェント名を調べて、スマートフォンによるアクセスかどうかを判別する方法から見ていきましょう。