リダイレクト スマートフォン編
スマートフォンのサイトを構築する際にPCサイトにアクセスした際に自動的にスマートフォンサイトに遷移させる必要がある。いくつか方法があるので、まとめた。
主な方法としては、
- .htaccessを使う
- javascriptを使う
- サーバサイド系の言語で処理する(PHP,Rubyなど)
1,2を扱ったのでそれらを作業記録として残しておく。
.htaccessを使う
参考
下の例でRewriteEngine On-->redirect機能を使うことを宣言。これを利用するにはhttpd.confをいじる必要がある。ちなみにCentOSはデフォルトでこの機能が使える。
RewriteCond {HTTP_HOST} ^google.com
RewriteRule ^(.*)$ http://www.google.com/$1 [R=301,L]
#例えばwwwつきのドメインと、そうでないドメインどちらに統一するか？など指定したい時に使う
上の例はgoogle.comをwww.google.comに統一している。よく知らないけどSEO的に効果はあるらしい。
RewriteCond {HTTP_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.google.com/$1 [R=301,L]
#上はindex.htmlにアクセスした場合にgoogle.comに遷移させる。
#これをドキュメントルートに保存する。rails使ってるならpublicに置くし、普通なら/var/www/とかだろうか。
肝心のスマートフォンのリダイレクトだが、下記のように書く
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} iPad
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^.*$ ドメイン [R]
とはいえ、実際自分も試してみたけどどうも上手く動かなかったので、結局ruby側で動かした。
あんまりなんでもかんでも.htaccessで処理するのは良くないらしい。
javascriptで動かす
サーバサイド側の言語で処理するのは、PHPとかだと拡張子を.phpとかにする必要がある。
だからjavascriptでほいっとやるのも手ではある。
(基本的にパクリで)すまんな
<script type="text/javascript">
var agent = navigator.userAgent;
if(agent.indexOf('Linux; U; Android ') != -1 ||
agent.indexOf('iPhone; U') != -1 ||
agent.indexOf('iPod; U') != -1||
agent.indexOf('iPad; U') != -1){
location.href = 'ディレクトリ or ドメイン';
}
</script>AndroidとかiPhoneとかはこれで飛ぶことが出来る。
色々端末が増えているので、自信が無かったら、
window.alertとかで逐一ユーザーエージェントをチェックしてやる必要があるかもしれない。
おまけ
スマートフォンのページにIEで閲覧しようとすると基本的に見れない。
したがって、これもリダイレクトしてやる必要がある。
<script type="text/javascript"> <!-- var agent = navigator.userAgent; if(agent.indexOf("MSIE") != -1){ location.href = 'http://www.nabetsuneshine.com';//ここには飛びたいURL window.alert("なんでや！IE関係ないやろ！");//ここにお詫びの言葉「IEサポートしてません」とか。 } --> </script>
こういうのをhtmlファイルに書いてやればいい。
indexOfは、引数に取った文字列が存在したら、その文字がどこにあったかを教えてくれる。
無かった場合は-1を返すのでif文の中でユーザーエージェントを取得したものの中に
"MSIE"(IEのユーザーエージェント)があったらリンク先に飛ぶということを指定してやる。
参考
なんでや！阪神関係ないやろ！
すまんな
