PC向け、スマホ向けでページを切り替える

３週間前「スマホ向けに Apache2 デフォルトページのサイズを変更」では、Apache2 デフォルトページをスマホ用に少し手直ししました。

今回は、もう一歩進めて、アクセス元の種類による自動切り替えを入れてみました。

PCからアクセス → オリジナルのページ
スマホからアクセス → スマホ向け修正版ページ

まず、/var/www/html/ のファイル構成は以下のようにしました。

/var/www/html/
├── index.html ... Apache2 オリジナルのデフォルトページ (PC用）
├── m
│ └── index.html ... スマホ用手直しページ
└── .htaccess

.htaccess ファイルは以下の内容です。

Options FollowSymLinks Includes
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /m/ [R=301,L]

上記の記述を「 <IfModule mod_rewrite.c> ～ </IfModule>」で囲むのが正式な書き方のようですが、これが無くても動きました。当初、思ったように動かなくて、切ったり貼ったりしながら試しているうちに戻すのを忘れてしまいました

スマホ向けページの m/index.html の適当な場所に下記を追加します。

<div class="section_header">
<a href="http://192.168.xx.xx/?mode=pc">PC用サイトはこちら</a>
</div>

これでスマホ用ページに「PC用サイトはこちら」というリンクが追加されて、それをクリックするとスマホからのアクセスでも PC版のページが表示されます。192.168.xx.xx は私のPCにたまたま割り当てられたアドレスです

.htaccess を有効にするために、Apache の設定ファイルの書き換えが必要です。

$ sudo vi /etc/apache2/apache2.conf

apache2.conf の下記の部分で、AllowOverride を None → All に変更します。

164 <Directory /var/www/>
165 Options Indexes FollowSymLinks
166 AllowOverride None
167 Require all granted
168 </Directory>

上記、166行目を下記のように変更します。

166 AllowOverride All

Apache の "rewrite" なるモジュールを有効にします。

$ sudo a2enmod rewrite

最後に Apache を再起動するすると、以上で変更した設定が有効になります。

$ sudo apache2ctl restart

以下、参考にさせてていただいたページです。

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

Apache ウェブサーバーで .htaccess を利用するには

ＵＲＬを書き換えろ！
Apache Rewrite 機能の応用

.htaccessを使ったよく使うリダイレクトまとめ

500 Internal Server Error when using .htaccess with RewriteEngine

やまものブログ

メモ書きブログです (^_^;A

PC向け、スマホ向けでページを切り替える