WEB 作りたい

知らなかった!レスポンシブサイトでjavascriptを分岐させる方法2パターン紹介

ホームページ制作において、スマホ・タブレットの普及で当たり前となったレスポンシブデザイン。

ウィンドウサイズによってレイアウトやデザインを変更する上で、CSSの切り替えは必須になりました。

CSSと同じ要領でJavaScriptもPC表示とスマホ表示を切り替えることで、スマホサイトだけにスライダーを表示させる、javascriptの挙動を分けるなど、表現の幅がぐっと広がります。

レスポンシブデザインとは

レスポンシブデザイン

レスポンシブデザインは、1つのWEBページを閲覧者のウィンドウサイズに応じてレイアウトやデザインを変更し、多様なデバイスに対応しているサイトデザインのこと

スマートフォン・タブレットの普及で、

  • パソコン
  • タブレット
  • スマホ

と、全てのデバイスで整って見えるデザインが求められるようになりました。

htmlにjavascriptを適用するには

ホームページ制作の際に、コンテンツスライダーの設置やアニメーションなど動きをつけたい場合は、プログラミング言語である「JavaScript(ジャバスクリプト)」が必要となります。

htmlに「JavaScript」を読み込むには、

  • 外部のjsファイルを読み込む
  • html内に直接JavaScriptを記述

の2パターンの方法があります。

\詳しくはコチラの記事にてご紹介しています/

Check!
【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介
【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介

続きを見る

javascriptを分岐させる方法

JavaScriptを切り替える方法には、

  • デバイスによって分岐
  • ウィンドウサイズによって分岐

の2パターンの方法があります。

それぞれの方法をご紹介します。

javascriptをデバイスによって分岐

レスポンシブサイトでjavascriptをデバイスによって分岐させる方法

まずはサイトにアクセスしたデバイスによって条件を分岐させる方法です。
ユーザーエージェントの情報をもとに、スマートフォン・タブレット・PCなど条件を設定しJavaScriptの処理を変更します。

ユーザーエージェントとは
ユーザがWEBサイトを閲覧する際にサーバー側に自動的に通知している、OS(Windowsやmac)やブラウザの情報のこと

 js
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
// ❶スマホのみに適用させるJavaScriptを記述
} else {
// ❷その他PC・タブレットに適用させるJavaScriptを記述
}

ユーザーエージェントからiOSとAndroid端末を見分け、条件を分岐させます。
スマホだけに適応させるJavaScriptは❶の箇所に記述、
逆にPC・タブレットだけに適応させるJavaScriptは❷の箇所に記述します。

この書き分けにより、PCにはスライダーを表示するがスマホでは非表示にするなどの切り分けが可能です。

ですが、最近はデバイスの多様化から大きなスマホや小さなタブレット・小さなPCも存在してるので、一般的には「ブラウザの幅を参照して条件を切り替える」という方法が主流です。

その方法「ウィンドウサイズ(ウィンドウ幅)」によって分岐させる方法をご紹介します。

javascriptをウィンドウサイズによって分岐

こちらはアクセスのあったデバイスの種類に限らず、ウィンドウサイズの幅によって「○○px以下」ならこっち、「○○px以上なら」こっちとJavaScriptを分岐させていきます。

スマホのみ切り替える場合

まずは、スマートフォンとそれ以外、という2パターンの分岐です。
表示を切り替えるウィンドウサイズ(ブレイクポイント)は768pxとしております。
年々スマートフォンのウィンドウサイズが大きくなってきているので、この数値は適宜調整してください。

 js
var windowWidth = $(window).width();
var windowSm = 768;
if (windowWidth <= windowSm) {
//横幅768px以下(スマホ)に適用させるJavaScriptを記述
} else {
//横幅768px以上(PC、タブレット)に適用させるJavaScriptを記述
}

1行目の記述でユーザーのデバイスのウィンドウサイズを調べます。
2行目以降でそのサイズによって分岐させる仕組みになっています。ブレイクポイント(分岐点)は1つで、スマホとそれ以外(PC・タブレット)という2種類に分類します。

スマホ・タブレット・PCと3パターンで切り替える場合

タブレットとPCも分けて3パターン記述したい場合は下記のように記述します。こちらもブレイクポイント(分岐点)の「768」「1024」という数字はその都度最新の情報から更新し設定してください。

 js
$windowWidth = window.innerWidth;

$breakPointA = 768;
$breakPointB = 1024;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);

if(isMobileSize){
//横幅768px以下(スマホ)に適用させるJavaScriptを記述
}

if(isTabletSize){
//横幅768px以上、1024px以下(タブレット)に適用させるJavaScriptを記述
}

if(isPcSize){
//横幅1024px以上(PC)に適用させるJavaScriptを記述
}

スマホ・タブレット・PCと3パターンで切り替えるとこのように記述していきます。

まとめ:レスポンシブサイトでjavascriptを分岐させる方法

いかがでしたでしょうか。

JavaScriptをデバイスごとに切り替える方法と、ウィンドウサイズによって切り替える方法の2パータンをご紹介しました。

  • デバイスによって分岐
  • ウィンドウサイズによって分岐

ポイント

デバイスの多様化から、分岐条件はウィンドウサイズの方が主流!

CSSをウィンドウサイズによって分けて記述するように、JavaScriptも分けて記述することで、回線速度の早いPCではボタンやページ推移にアニメーションなどを設置し、回線速度の遅いスマホではアニメーションを無しにするなど、よりきめ細やかな配慮や表現ができるようになります。

htmlやcssなど「プログラミングを学んでみたい」という方には、無料体験が受けられるプログラミングスクールがオススメです。

無料体験があるプログラミングスクール

※無料体験だけならいっさいお金はかかりません。

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

360度画像をホームページで埋め込み公開する方法まとめ【insta360】

WEB カメラ 作りたい

2022/4/21

撮影した360度画像をブログ・ホームページに公開する方...

【初心者向け】HTMLにJavaScriptを適用する方法を2パターン紹介

WEB 作りたい

2021/6/27

【初心者向け】HTMLにJavaScriptを適用する...

電話番号への自動リンクを無効にする方法【iPhone・edge】

WEB

2022/7/18

電話番号への自動リンクを無効にする方法【スマホ】

JavaScriptの分岐を使うとPCサイトのみパララックス効果を持たせることも可能です!

あわせて読みたい!
【WEB制作】PCのみにパララックス効果を効かせる方法【javascript分岐】

続きを見る

最後までご覧いただきありがとうございました。

-WEB, 作りたい
-,