Webデザイン学習まとめ

~職業訓練で学んだ情報の備忘録~

JavaScript jQuery

.matchMedia()を使ってresizeイベントを設定する

#jQuery

window.matchMedia

window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。

例：1000pxまではjsを有効にさせる

$(window).on(‘load resize’, function(){
　if(window.matchMedia(‘(max-width:1000px)’).matches) {
　　1000px以下で有効にさせたいjquery
　}else{
　　1001px以上で有効にさせたいjquery
　}
});

■ナビゲーションを作成

Toggleを使う場合、「:not(:animated)」を設定しないとボタンをクリックした回数分スライドしてしまうので、「:not(:animated)」の設定をしましょう。
またスマホのの場合、resizeイベントの解釈がiOSとandroidで微妙に違うので注意が必要です。

let windowWidth = $(window).width();

$(window).on(‘resize load’,function(){
　let ww = $(window).width();
　if(windowWidth != ww) {
　　if(window.matchMedia(‘(min-width: 900px)’).matches){
　　　$(‘#g-nav’).removeClass(‘move’);
　　　$(‘#ham-btn’).removeClass(‘is-active’);
　　}
　　windowWidth = ww;
　}
});

GitHub Copilot: このコードは、ウィンドウの幅が変更されたとき、またはページが読み込まれたときに特定の動作を実行するためのJavaScript（jQuery）のコードです。

  1. `let windowWidth = $(window).width();` この行では、現在のウィンドウの幅を取得し、それを `windowWidth` という変数に保存しています。
  2. `$(window).on(‘resize load’,function(){…});` この部分は、ウィンドウがリサイズされたとき（’resize’）またはページが読み込まれたとき（’load’）に、中の関数を実行します。
  3. `let ww = $(window).width();` この行では、関数が呼び出されたときのウィンドウの幅を取得し、それを `ww` という変数に保存しています。
  4. `if(windowWidth != ww) {…}` この部分は、ウィンドウの幅が変更された（`windowWidth` と `ww` が異なる）場合に、中のコードを実行します。
  5. `if(window.matchMedia(‘(min-width: 900px)’).matches){…}` この部分は、メディアクエリを使用して、ビューポートの幅が900px以上であるかどうかをチェックします。もし900px以上であれば、中のコードが実行されます。
  6. `$(‘#g-nav’).removeClass(‘move’);` と `$(‘#ham-btn’).removeClass(‘is-active’);` これらの行では、IDが ‘g-nav’ と ‘ham-btn’ のHTML要素から ‘move’ と ‘is-active’ というクラスを削除します。これにより、その要素の見た目や振る舞いが変わる可能性があります（CSSによる）。
  7. `windowWidth = ww;` この行では、新しいウィンドウの幅を `windowWidth` に保存します。これにより、次回のリサイズイベントでウィンドウの幅が変更されたかどうかを判断できます。

全体として、このコードはウィンドウのサイズが900px以上に変更されたときに、特定の要素から特定のクラスを削除することで、レスポンシブなデザインを実現しています。

ユーザーエージェントでスマホかPCか判別してやる方法

ユーザーエージェント
ユーザーエージェント（UserAgent）とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。

今回のパターンはPC・タブレットであればjQueryを有効に。スマホ（iPhone・Android）であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
　$(function(){
　　//ここにjQueryの記述
　});
}

逆にPC・タブレットであればjQueryを無効に。

スマホ（iPhone・Android）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
　$(function(){
　　//ここにjQueryの記述
　});
}

また、PCであればjQueryを無効に。

スマホ（iPhone・Android）とタブレット（iPad）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
　$(function(){
　　//ここにjQueryの記述
　});
}

このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。