フロント側で、
ユーザーエージェントを判別してスマフォはリダイレクトさせるというのはよくあるが、
(1). 色々な端末が増えてきてユーザーエージェントの判別で漏れが発生する。
下記みたいなやつだと、色々な端末で抜けが出てしまう。なので、
device.js を使う。
var ua = window.navigator.appVersion.toLowerCase();
if (ua.indexOf('iphone') >= 0 || ua.indexOf('ipod') >= 0 || ua.indexOf('ipad') >= 0 || ua.indexOf('android') >= 0 || ua.indexOf('windows phone') > 0 || ua.indexOf('blackberry') > 0) {
location.href = "/us/sp/index.html";
}
(2). 都度リダイレクトURLをページごとに指定すると漏れる＆めんどくさい。
なので、jsで今いるURLから自動的にURLを作る。
location.href = "/aaa/sp/index.html";
こういう構造だと楽なんだが
/aaa/index.html => /sp/aaa/index.html
/aaa/category/index.html => /sp/aaa/category/index.html
/bbb/index.html => /sp/bbb/index.html
/bbb/category/index.html => /sp/bbb/category/index.html
今回はこんな感じだった。
/aaa/index.html => /aaa/sp/index.html
/aaa/category/index.html => /aaa/sp/category/index.html
/bbb/index.html => /bbb/sp/index.html
/bbb/category/index.html => /bbb/sp/category/index.html
(1),(2)を解消するために以下のようなファイルを用意する。
device.jsは
https://github.com/matthewhudson/device.js
からダウンロードする。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ユーザーエージェント判別 => リダイレクト</title>
<script src="/device.js"></script>
<script src="/index.js"></script>
</head>
<body>
</body>
</html>
(function redirectFunc(){
if (device.mobile()) {
// spへのリダイレクトURLを自動生成
var rootRelativePath = location.href.split(location.host)[1];
var path = rootRelativePath.split("/");
path.splice(2, 0, "sp") // スマフォのディレクトリを入れる
location.href = path.join("/");
}
})();
ここにいるとする => 【エイチテーテーピー://hoge.com/abc/def/index.html】
まずは、アドレスバーのURLから、ホスト部分（location.host）で分割し、
ルート相対パスをゲット。(1行目) => 【/abc/def/index.html】
それを[/]で分割した配列にする(2行目) => 【[abc][def][index.html]】
ここで、javaScriptの配列にはinsertがないので、
spliceという要素の追加と削除の両方の役割を持ったメソッドを使う、第二引数に0を使えばinsertのように使用できるらしい。
array.splice(index, 削除する要素の数, [追加する要素]);
path.splice(2, 0, "sp") // スマフォのディレクトリを入れる
(3行目) => 【[""][abc][sp][def][index.html]】
最後に、「/」で配列をつなげてspのパスの完成です。
注意がこのスクリプトは、PCとSPのページが対になっていないとだめです。
そうじゃないとリダイレクト→not foundとかになります。
その際は例外の処理をかかないとだめですね。
device.jsはスマートフォンだったら、
device.mobile()
で、trueを返すので、これでOK。
タブレットも入れたい場合は
if(device.mobile() || device.tablet()){
みたいにするか
if(!device.desktop()){
でも、いいかも。
device.jsが結構頻繁に更新されているのでこれを使わない手はない。
windows10も出たので、その辺振り分けもいれておいてもらいたい。