[jQuery] スマホでアクセス時にリンク先を切り替える

2016.02.11
2016.03.31

通常のサーバーではそもそもそんな事は必要無い様に作ればいいだけなんですが、大手ECサイトに出店している場合はそうもいかない時が多々あります。

例えば都度行われるキャンペーンサイトへのリンクはイベント毎にURLが都度決まりますが、サイト毎に仕様が違います。

ヤフー: 一つのURLでリダイレクト

楽天: デバイスごとに違うURL

こう見るとYahooショッピングは優秀ですね！
楽天の場合は、各ページをデバイス毎に用意している事が多いです(2016年1月時点)

まぁスマホでPC用のリンクで飛んでも、スマホ用ページを見るボタンがヘッダーに追加されてるので、それを押せばいけるので問題無いっちゃなさそうですが、そもそもスマホで来てるのに、わざわざPCページに一回飛んで、スマホページに飛ぶ。という2段階リンクは、無駄に1ページ分読み込まないといけないので、非常にナンセンスですよね。

そこでリンクする際に、スマホではスマホページ、PCではPCページとデバイスによってリンク先を振り分けたいと思います。

言わずもがなですが、楽天だとGOLD。Yahooショッピングだとyahooトリプル。ポンパレモールだと、PRO限定です。
Javascript使いますからね！

今アクセスしてきているデバイスを調べる

まずは、今アクセスしているデバイスが何なのかを調べます。
以下のコードで、デバイスがスマホなのか、タブレットなのか。PCなのかを判別します。

デバイスのユーザーエージェントを取得

ブラウザへアクセスする際に、必ず『どのデバイスからアクセスされたか？』の情報が送信されます。
ユーザーエージェントについては割愛しますので、興味がある方はググってみて下さい！

GoogleCromeの場合

例えば僕のパソコンでGoogleCromeでブラウザにアクセスした際には以下のユーザーエージェントが取得されました。

iPhoneの場合

iPhoneのサファリでアクセスするとこんな感じです。

こんな感じで、デバイスの種類がユーザーエージェントには含まれるのでそれを利用してデバイスを判別します。
下記のコードでそれはスマホなのかスマホじゃないのかを判別します。

[javascript]
function IsSmartPhone()
{
// デバイスの種類。
var media =
[
‘iPhone’,
‘Windows Phone’,
‘Android’
];
var pattern = new RegExp(media.join(‘|’), ‘i’); //デバイスの種類を正規表現にする。
return pattern.test(navigator.userAgent); //ユーザーエージェントにデバイスが含まれるかを調べる。
}
[/javascript]

今回はスマホのみですが、『iPad』等の他のデバイスももちろん組み込むことは可能です。

リンクタグを作成

スマホか、スマホじゃないのかが分かったので次は、リンクタグを作成します。
まずはプレーンなタグを作成しましょう。
こんな感じ？
[html]
<a href="https?://hyp.llc">グレートなテキストリンク</a>
[/html]

これに、スマホ用のリンクを追加します。
が、属性のhrefには既にPC用のリンクで使用していますので、違うURLで作ります。

ぶっちゃけ、『動くか動かないか』で言えば、入れ方はなんでもOKですが、せっかくですのでHTML5に沿ってカスタム属性で追加してみましょう。
こんな感じで、『data-sp-href="http:creatorhyp.com?is_smartphone"』と追加します。
[html]
<a href="https?://hyp.llc" data-sp-href="https?://hyp.llc?smartphone">グレートなテキストリンク</a>
[/html]

これでPC用、スマホ用の両方のリンクが備わったタグが準備出来ました！

もちろん、スマホページがメインでPCページがちょろっとあると言う場合は、『href属性』と『data-sp-href属性』逆にしても良いですね。

デバイスに合わせてリンクを切り替え

リンクが完成したので、いよいよデバイスに合わせてリンクを変更したいと思います。
今回は、みんな大好きJqueryを利用して処理します。

ソースが全て読み込み終わったら処理開始

まずは全ての書き出しが行われてから処理したいので、下記の様にします。
これで、全てのソースが読み込まれた後に、処理が開始されます。

そうしないと、コードを書いてある時点で処理されてしまい、それ以降に書いてあるタグ類は一切処理されません。

あまり知らない時は、昔よくハマってました。
『コードは上から順に処理される』と言うのを知りました(笑)

[javascript]
$(function()
{
// ソースが全て書き出された後に処理。
});
[/javascript]

data-sp-href属性を検索

ある要素を検索するには『$(selector).find()』を使用します。
また、属性の指定の仕方は『[属性名]』です。
jqueryの簡単な使い方についても機会があれば、ご紹介します！

[javascript]
// data-sp-href属性を検索。
var $spLink = $(‘body’).find(‘[data-sp-href]’);
[/javascript]

リンクを置き換え

要素が検索出来たら、href属性の値とdata-sp-href属性の値を交換します。
findで検索すると、配列でデータが帰ってくるので、each文で繰り返し処理で入れ替えを行います。
[javascript]
// data-sp-href属性を入れ替え。
$(‘body’).find(‘[data-sp-href]’).each(function()
{
$(this).attr(‘href’, $(this).attr(‘data-sp-href’));
});

//
// 下記でも可能だけど、挙動が違うので上の方がおススメだよ。
//
$(‘body’).find(‘[data-sp-href]’).each(function()
{
$(this).attr(‘href’, $(this).data(‘spHref’));
});
[/javascript]

完成品がこちら

上記のフローをまとめるとこうなります。

DOM読み込み完了時に処理開始。
デバイスを判断。
スマホなら、全ての『data-sp-href』属性のあるタグの『href』属性を入れ替える。

こんな感じ！

[javascript]
//
// スマートフォンかどうか判断して、スマートフォンの場合のみ処理。
//
if (IsSmartPhone())
{
//
// ソースが全て書き出された後に処理。
//
$(function()
{
//
// 全ての『data-sp-href』属性を繰り返し処理。
//
$(‘body’).find(‘[data-sp-href]’).each(function()
{
//
// リンクを入れ替え。
//
$(this).attr(‘href’, $(this).attr(‘data-sp-href’));
});
});
}
//
// スマートフォンかどうか判断するメソッド。
//
function IsSmartPhone()
{
// デバイスの種類。
var media =
[
‘iPhone’,
‘Windows Phone’,
‘Android’
];
var pattern = new RegExp(media.join(‘|’), ‘i’); //デバイスの種類を正規表現にする。
return pattern.test(navigator.userAgent); //ユーザーエージェントにデバイスが含まれるかを調べる。
}
[/javascript]