PCとスマホのサイトを振り分ける

サイト構築のために必要な覚書。

PCで見ているサイトと同じurlを指定してスマホからアクセスすると、PCサイトそのまま表示される場合と、スマホ用に最適化されたサイトが表示される場合がある。

スタイルシートへの記述で表示分けする方法もあるが、一般的にはスマホ(モバイル)専用サイトを別に用意して、PCサイトのurlから専用サイトurlにリダイレクトするような仕組みを取ることが多い。もちろん、別サイトとしてアクセス先(url)を分けるだけの場合もある。

自動振り分けの方法としては、ウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける。mod_rewriteモジュールを使えば、ユーザエージェント名をチェックして、条件に合致した場合だけに指定したページへ移動(リダイレクト)させることができる。(.htaccessファイルの書き換え、もしくはmod_rewriteモジュールが使用できないサーバーの場合、JavaScriptなどを使う他の方法もある。)

<.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 ^$ /lite/ [R,L]
</IfModule>

仮に、.htaccessファイルを設置した場所が http://blog.livedoor.jp/syousuke0202/ の場合

スマートフォンでアクセス           http://blog.livedoor.jp/syousuke0202/lite/ へ移動。
スマートフォン以外でアクセス    http://blog.livedoor.jp/syousuke0202/ のまま。
スマートフォンでアクセスしても、http://blog.livedoor.jp/syousuke0202/?mode=pc
URLに?mode=pc が追記されていると、そのまま移動しない。

 

追記; 3行目の解説
RewriteCond %{変数名} (一致パターン) [フラグ]

変数名 : アクセス端末のユーザエージェント名
一致パターン : 「iPhone」または「Android + Mobile」または「Windows + Phone」という文字列が存在する場合という条件。Android タブレットの場合、userAgent に Mobile という文字は入らない。ゆえにAndroid タブレットは条件から省いている。
フラグ : 「R」は「リダイレクトする」という意味。「L」は書き換え規則の最終行であることを意味。

Social Networking Service

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください