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

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

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

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

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

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

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

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

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

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

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

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

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

GoogleCromeの場合

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

iPhoneの場合

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

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

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

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

リンクタグを作成

スマホか、スマホじゃないのかが分かったので次は、リンクタグを作成します。
まずはプレーンなタグを作成しましょう。
こんな感じ？

<a href="http://creatorhyp.com">グレートなテキストリンク</a>

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

ぶっちゃけ、『動くか動かないか』で言えば、入れ方はなんでもOKですが、せっかくですのでHTML5に沿ってカスタム属性で追加してみましょう。
こんな感じで、『data-sp-href="http:creatorhyp.com?is_smartphone"』と追加します。

<a href="http://creatorhyp.com" data-sp-href="http://creatorhyp.com?smartphone">グレートなテキストリンク</a>

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

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

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

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

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

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

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

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

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

data-sp-href属性を検索

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

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

リンクを置き換え

要素が検索出来たら、href属性の値とdata-sp-href属性の値を交換します。
findで検索すると、配列でデータが帰ってくるので、each文で繰り返し処理で入れ替えを行います。

// 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'));
});

完成品がこちら

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

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

こんな感じ！

//
// スマートフォンかどうか判断して、スマートフォンの場合のみ処理。
//
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); //ユーザーエージェントにデバイスが含まれるかを調べる。
}

これでリンク先を変えたいモノのみdata-sp-hrefにリンク先を入れて上げれば、スマホビュー時にリンクが変わるようになりました。

まとめ

正直細かい所だけど、そんな細かい所を丁寧にしてあげるだけで、こなれ感とユーザビリティーの向上に繋がりますので是非そんなシーンがあったら利用してみてはいかがでしょうか。

上記のを応用すると、リンクだけじゃなくて画像の変更にも応用できますよ。

普通はあまりしないですが、先日あった案件で既存楽天サイトをレスポンシブサイトにした際に、楽天特有の横長バナーをそのままスマホサイズにすると細すぎて微妙なデザインになる事がありました。
その時に適正サイズのスマホ用画像を1枚作ってあげるだけで、スマホでの見た目がガラリと変わります。

最初っから構築する場合は特に気にするような所じゃないのですが、既存サイトをリノベーションする際は何かと役に立つ方法なんじゃないかと思います！

HYPの勝手に語ろうか

WEB制作やアプリとかしてる北海道の夫婦です。