javascript 作りたい

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

ホームページの制作において、当たり前となったレスポンシブデザイン。

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

ウィンドウサイズによってレイアウトやデザインを変更する上で、CSSの切り替えは必須になりました。
CSSと同じ要領でJavaScriptもPC表示とスマホ表示を切り替えることで、スマホサイトだけにスライダーを表示させる、javascriptの挙動を分けるなど、表現の幅がぐっと広がります。

htmlにjavascriptを適用する方法についてはコチラの記事にて紹介しています。
https://hyakuyattsu.com/create/html-ni-javascript

JavaScriptを切り替える方法には、デバイスごとに切り替える方法または、ウィンドウサイズによって切り替える方法があります。

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

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

ポイント

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

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

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ!まずは無料体験!

私も現在phpを勉強中!
daruma108

テックアカデミー公式ホームページへ

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

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

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

不具合が出やすいスマートフォンへのパララックス効果は諦めて、パソコンでの閲覧時のみにパララックスを効かせる方法をご紹介します。

続きを見る

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

-javascript, 作りたい
-, ,

© 2021 ひゃくやっつ