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

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

スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をご紹介。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加
アクセス環境に応じて振り分け

アクセス環境に応じて振り分け

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

アクセス者が利用しているブラウザの種類(ユーザエージェント名)を調べれば、スマートフォンでアクセスされているかどうかを判別し、アクセス先ページを自動的に振り分けることができます。

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

閲覧端末を判別して、アクセス先を自動的に振り分ける方法

自動振り分けにはいくつかの方法がありますが、今回は、ウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける方法をご紹介致します。mod_rewriteモジュールを使えば、ユーザエージェント名をチェックして、条件に合致した場合だけに指定したページへ移動(リダイレクト)させることができます。なお、「.htaccessファイル」に関して詳しくは、記事「.htaccessファイルの作り方と設置方法」をご参照下さい。

今回ご紹介する方法では、下図のように、
  • 代表URLを「PC用サイト」のURLとし、
  • スマートフォンを用いて「代表URL」(PC用サイト)にアクセスされたときに、自動的に「スマートフォン用サイト」のURLへ移動させる(リダイレクトする)
という仕様にしています。

PCでアクセスされたらそのまま表示、スマートフォンでアクセスされたら移動(リダイレクト)する仕組み

PCでアクセスされたらそのまま表示、スマートフォンでアクセスされたら移動(リダイレクト)する仕組み


自動振り分けは、トップページのみ

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

「PC用サイト」と「スマートフォン用サイト」で、各ページが必ず1対1で対応しているのであれば、トップページ以外でも自動振り分けを実現できます。しかし、そもそもスマートフォンはPC用ページをそのまま閲覧可能なわけですから、そこまでしなくても良いと、ここでは考えます。

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

※本記事は、2011年10月24日に初版を公開し、2013年9月に一部を改訂致しました。

更新日:2013年09月09日

(公開日:2011年10月24日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    21

    この記事を共有する