画面幅とユーザーエージェントで読み込む画像を変える

PCとスマートフォン(以下SP)ワンソースのページで、
jQueryを利用し簡単に画像の出し分けをする方法のメモになります。

今回はタブレットの判別はせず、PCまたはSPの2種で分けています。

画面幅またはUAのいずれかで判別をする方法により、
PCブラウザのデバック機能でもチェックが行えるようにしました。

手順の概要
(1) PC用の画像とSP用の画像ディレクトリを分けて格納
(2) 画像のパスを取得
(3) 画面幅とユーザーエージェント(以下UA)を取得
(4) 取得した画面幅とUAを利用して画像のパスを書き換え

##(1) PC用の画像とSP用の画像ディレクトリを分けて格納

初めに画像を格納するディレクトリを決めておきます。
今回は「imeges」ディレクトリ配下に格納します。
PC用の画像は「pc」ディレクトリ、SP用の画像は「sp」ディレクトリとしました。

閲覧環境を考慮し、デフォルトでは「sp」ディレクトリにしています。
変換の対象から外す画像は、「pc」と「sp」以外のディレクトリに格納します。

<!doctype html>
<html lang="ja">
</head>
<body>
<ul>
  <li><img src="./images/common/photo_01.jpg" alt="PCとSP共通画像"></li>
  <li><img src="./images/sp/photo_02.jpg" alt="切替画像"></li>
  <li><img src="./images/sp/photo_03.jpg" alt="切替画像"></li>
</ul>

<!-- まずjQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 // ここに処理を書いていく
</script>
</body>
</html>

##(2) 画像のパスを取得

ページ内の全ての画像の数ぶんだけ処理を繰り返し、パスを取得していきます。

for (var i = 0; i < $('img').length; i++) {
  // i番目の画像のパスを取得
  // 使用関数：「.eq(インデックス番号の要素指定)」、「.attr('取得対象')」
  var imgPath = $('img').eq(i).attr('src');
}

##(3) 画面幅とUAを取得

画面の幅と、UAを取得します。


// 画面幅（スクロールバーを含んだ幅）を取得
// 使用関数：「.outerWidth()」
var winWidth = $(window).outerWidth();
// UAを取得
// 使用関数：「.userAgent」
var navUA = navigator.userAgent;

##(4) 取得したUAと画面幅を利用して画像のパスを書き換え

(2)、(3)をまとめると以下の様になります。

$(function () {

  // 画像のパス置換
  function imgChange(ua1, ua2){
    for (var i = 0; i < $('img').length; i++) {
      // ★1: 画像パスをスラッシュ「'/'」で分割
      // 使用関数：「.split('分割する文字')」
      var imgPath = $('img').eq(i).attr('src').split('/');
      // ★2: 画像パス内の「ua1」を、「ua2」に置換
      // 使用関数：「.replace('対象','置き換える値')」
      var pathCange = $('img').eq(i).attr('src').replace('/' + ua1 + '/', '/' + ua2 + '/');

      // もし★1で分割した画像パスの中に文字列「ua1」が見つかれば実行する
      // 使用関数：「.indexOf('検索する文字列','開始位置')」
      if (imgPath.indexOf(ua1) != -1) {    
        // 画像に対して、★2の置換を実行
        $('img').eq(i).attr('src', pathCange);
      }
    }
  }

  // 画面幅とUAを取得してimgChange()を実行
  function uaCheck() {
    var winWidth= $(window).outerWidth();
    var navUA= navigator.userAgent;

    // 画面幅が640px以下、または UAがiPhone 又は Androidスマートフォンの時
    if (winWidth<= 640 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) {
      // 画像のパスにpcが含まれるものがあれば、spに変換する
      imgChange('pc', 'sp');
    } else {
      // それ以外の時に画像のパスにspが含まれるものがあれば、pcに変換する
      imgChange('sp', 'pc');
    }
  }
  
  // ページ読み込み時に実行
  uaCheck();

  // ウィンドウをリサイズした時にも実行
  $(window).on('resize', function () {
    uaCheck();
  });
});

##まとめ

画像を背景設定にしたり非表示にしたりなどの手間がないので製作時間が短縮できました。

ページ読み込み時に一瞬デフォルトの画像が読み込まれてしまう為、
ファーストビューの画像だけはCSSによる出し分けをしています。