JQuery drawer.min.jsプラグインとの競合の改善方法について

いつも大変お世話になっております。

WordPressでテーマを作成したのですが、

Jqueryのプラグインがコンフリクトを起こしてしまい、

幾つかのプラグインが同時に利用できない状況です。

【概要】

競合しているURL

（A）
iscroll.js

drawer.min.js

（スマートフォンでドロワーメニューを出す）

<script type="text/javascript">
jQuery(document).ready( function( $ ) {
      $('.drawer').drawer();
    });
</script>

と

（B）
パソコン版でスクロールするとヘッダーに固定メニューを表示させる

jquery-fixed.js

スクロールすると右下にトップに戻るボタンを表示する

fixed.js

が同時に利用できない状況です。

AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。

他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。

※
ただ、スマートフォンでみると

drawer.min.js
jquery-scrolls.js

の順で記述すればなぜかどちらも動作します。

【試したこと】

（１）
調べたところ$関数が競合をおこすとのことでしたので、

$(function() {

を

jQuery(function($)

に修正してみましたが解消しませんでした。

（２）
また、

プラグインを複数入れたらjQueryが動かない！－コンフリクト対策

を参考に

「$() 関数」の代わりに別の関数「$ｄ」のような任意の関数を定義してみたのですが、

こうすると競合以前にプラグインが動作しなくなってしまいました。

（２）を記述した際はAとBを下記のように修正しました。

<script type="text/javascript">
var $d = jQuery.noConflict();
$d(document).ready( function() {
      $d('.drawer').drawer();
    });
</script>

var $f = jQuery.noConflict();
$f(function() {
	var nav = $f('.nav');
	var navTop = nav.offset().top+500;
	var navHeight = nav.height()+10;
	var showFlug = false;
	nav.css('top', -navHeight+'px');
	$(window).scroll(function () {
		var winTop = $(this).scrollTop();
		if (winTop >= navTop) {
			if (showFlug == false) {
				showFlug = true;
				nav
					.addClass('fixed')
					.stop().animate({'top' : '0px'}, 200);
			}
		} else if (winTop <= navTop) {
			if (showFlug) {
				showFlug = false;
				nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
					nav.removeClass('fixed');
				});
			}
		}
	});
});

var $s = jQuery.noConflict();
$s(function() {
    var topBtn = $s('#page-top');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $s(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $s('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

【その他】

他に下記のプラグインを導入していますが、
こちらは動作しております。

bxslider（スライダープラグイン）
jquery.matchHeight（ボックスの高さを揃えるプラグイン）
dropdown（ドロップダウンメニューを呼び出すプラグイン）
ofi.min（IEでcss object-fitを適用させるプラグイン）

AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか？

お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。

unz.hori

2018/02/18 04:43

$d関数を定義してみた時にどうやって定義したのかを質問に追記してください。

kei344

2018/02/18 05:03

参考にされているURLを、なぜ短縮URLにされているのでしょうか。

Novz

2018/02/18 05:34 編集

kei344様ご指摘ありがとうございます。 jsファイルへのURLが長いので短いほうが良いと思ったのですが、見る側の立場で考えるとどこのサイトかわからないのではアクセスするのに不安を感じるだろうことに考えが至り、修正しました。以後は短縮URLを使わずに記入いたします。

kei344

2018/02/18 05:36

なぜhttpと書かないのでしょう。また、URLにはリンクがはれますよ。

Novz

2018/02/18 05:41

kei344様度々のご指摘をさせてしまい申し訳ありません。リファラを隠すという意味があるので掲示板等に書くときはhを削ったほうが良いと昔聞いたことがあったので省いたのですが、ご不快に思わせてしまったのであれば申し訳ありませんでした。こちらも修正いたしましたのでどうぞよろしくおねがいします。

Novz

2018/02/18 05:42

unz.hori様ご指摘ありがとうございます。$d関数で記述したときのものを投稿に追加しました。どうぞよろしくおねがいします。

unz.hori

2018/02/18 05:49

ちょっとごちゃっとしてわかりずらいですね。AはDrawer/iScrollでしょうか？私がググって参近にしたサイトではjQueryと一緒に使っていたのでちょっとコンフリクトとは考えずらいです。

Novz

2018/02/18 05:54

unz.hori様　きれいなコードでなく誠に申し訳ありません。Aはおっしゃる通り、Drawer/iScrollです。コンフリクトではないのであれば私が追加しようとしたscroll.jsとfixed.jsが間違っているのだとおもいます。。

miyabi-sun

2018/02/18 07:02

URLのhを削るネタは2ch発祥ですね。http://dic.nicovideo.jp/a/h%E6%8A%9C%E3%81%8D 20世紀の悪しき風習なので真似しないでください。またMarkdownのリンクを張る書き方で確実に記載してください。そっちの方がかっこいいですからね！

Novz

2018/02/18 08:17

miyabi-sun様初めて知りました。２ch発祥だったのですね。情報を更新せず調べもしていなかったことを恥ずかしく思います。以後気をつけるよういたします。ありがとうございます。

miyabi-sun

2018/02/18 08:21

対応ありがとうございます。ｂ

行動規範の内容に同意します

回答2件

ベストアンサー

サイトの方を拝見しました。
jQueryを使う上で、ちょこっと気になった点なども含めて回答します。

html
1<link rel="dns-prefetch" href="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=1.11.1">
2<link rel="dns-prefetch" href="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js?ver=1.2.1">

DNSの先読みが設定されていますが、ドメインだけで大丈夫です。
ちなみにhttpsの場合は先読みできません。(ブラウザ設定で変更可)

次に下記jQuery読込が2行連続で記載されていますが、migrateはjQueryを読み込んでからと、順序が決まっています。

html
1<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js?ver=1.2.1"></script>
2<script type="text/javascript" src="https://belcantolibrary.com/wp/wp-content/plugins/head-cleaner/includes/js/jquery-1.4.2.min.js"></script>

また、migrateのv1.2.1はjQuery1.8以前の廃止されたjQuery APIを使うためのもので、jquery-1.4.2を使う場合には不要です。

そして、上記jquery-1.4.2が読み込まれた後、最終的にはjquery-2.1.4が読み込まれています。

html
1<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

この行以降はjquery-2.1.4が有効なバージョンとして動作します。
migrateを使うならこの行の次に記載することになりますが、
必要か不要かは利用するjQueryプラグインで決定すべきとなります。

さて、いくつか試されたとのことで

js
1jQuery.noConflict();

に関しましては、jQueryがデフォルトで定義する変数名$を使わないというものでして、例えば同じく$を使うprototype.jsといった別のライブラリとの併用や、jQueryのバージョン違いを共存させる際に利用します。
プラグインの競合では意味はありません。

「$() 関数」の代わりに別の関数「$ｄ」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。

これに関してはnoConflictを使って$fにjQueryを代入して、$を使えなくしているのに、$(window)で$を使おうとしているために動かなかった可能性が考えられます。F12でデバッグコンソールを表示させて、エラー内容をお確かめ下さい。
このようなミスを避けるために、下記のような書き方もあります。
$を普通に使いつつ、jQueryのバージョンをコントロールすることが可能です。

js
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Document</title>
7
8  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
9  <script>
10    var $224 = jQuery.noConflict(); //jQueryの$関数を$224へ変更
11    $224( function ( $ ){
12      //このスコープ内では$に$224がバインドされています。
13      //$が普通に使えます
14      console.log( $.fn.jquery );
15    } );
16  </script>
17  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
18  <script>
19    var $220 = jQuery.noConflict();
20    $220( function ( $ ){
21      //このスコープ内では$に$220がバインドされています
22      console.log( $.fn.jquery ); //バージョン出力
23    } );
24  </script>
25
26  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
27  <script>
28    var $190 = jQuery.noConflict();
29    $190( function ( $ ){
30      //このスコープ内では$に$190がバインドされています。
31      console.log( $.fn.jquery ); //バージョン出力
32    } );
33  </script>
34
35  <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
36  <script>
37    var $142 = jQuery.noConflict();
38    $142( function ( $ ){
39      //このスコープ内では$に$142がバインドされています。
40      console.log( $.fn.jquery ); //バージョン出力
41    } );
42  </script>
43
44  <script>
45    //変数に割当が完了しているなら、後からでも処理を追加できます。
46    $190( function ( $ ){
47      console.log( '1.9.0？', $.fn.jquery );
48    } );
49
50    $142( function ( $ ){
51      console.log( '1.4.2？', $.fn.jquery );
52    } );
53
54    $220( function ( $ ){
55      console.log( '2.2.0？', $.fn.jquery );
56    } );
57
58    $224( function ( $ ){
59      console.log( '2.2.4？', $.fn.jquery );
60    } );
61
62    //ただし実行順序に注意が必要です。
63    //上記の場合`1.4.2？`が最後に実行されます。
64    //もしバージョン管理が必要な際は挙動を把握しておくと良いでしょう。
65  </script>
66</head>
67<body>
68</body>
69</html>

以上、jQueryの基本を踏まえまして（上記コードは解決策ではありません）

サイトのソースを見ていて気になった点はjquery-scrolls.jsとjquery-fixed.jsに同じ処理が登録されていますが、これは大丈夫ですか？
スマートフォンでdrawer.min.jsとjquery-scrolls.jsの順序を変えられたようですが、jquery-fixed.jsにも同じような処理が記載されているので、
なにがどう邪魔をしているのか、切り分けがまだできていないように思えます。
不要なものを排除し、読み込む順序をしっかり把握し、検証する必要があると思います。

それでも同じ現象が発生するようなら、
スマホならdrawerのみ適用、パソコンならfixed.jsのみ適用とし、同時に利用しないようにjsを書くという手もあるかと思います。
また、fixed.jsのほうはCSSアニメーション等をうまく使えば、$.fn.animateは不要で、$.fn.addClassと$.fn.removeClassを使い、クラスの追加と削除だけで実現できそうな気もします。
ご参考までに
https://qiita.com/gatespace/items/a9fa68dacc2e30f7f219

投稿2018/02/20 06:42

so87

総合スコア764

Novz

2018/02/25 08:19 編集

so87様この度は丁寧でわかりやすいご回答、本当にありがとうございます。ご指導に沿って修正を行ったところ、改善することができました。 >DNSの先読みが設定されていますが、ドメインだけで大丈夫です。 >ちなみにhttpsの場合は先読みできません。(ブラウザ設定で変更可) こちらは、WordPressで自動的に挿入されたものなのですが、どうしても外せなかったのでこのまま運用したいと思います。 function.phpで制御できないかも調べていろいろ試してみたのですがどうしてもわかりませんでした。 >次に下記jQuery読込が2行連続で記載されていますが、migrateはjQueryを読み込んでからと、順序が決まっています。こちらはWordPressのプラグインが自動的に挿入していたようですので、設定で1.2.1とmigrateは読み込まないようにして、jquery-2.1.4のみを読み込むように変更しました。未熟ではありますが、出来る限りスキルアップできるようはげみますので、どうぞ今後ともよろしくおねがいします。

行動規範の内容に同意します

サイトのソースを見ていて気になった点はjquery-scrolls.jsとjquery-fixed.jsに同じ処理が登録されていますが、これは大丈夫ですか？

so87様がご指摘くださった通り、どちらもに同じ処理を記載していて、片方を削除し忘れていたようす。

ですので、こちらを修正して切り分けを再度行ってみたところ、

jquery-scrolls.js の方に問題があるようでした。

jquery-scrolls.jsだけであれば、順番をdrawer.jsとiscroll.jsの前にすればどちらも動作しましたので、

so87様のアドバイスいただいた

fixed.jsのほうはCSSアニメーション等をうまく使えば、$.fn.animateは不要で、$.fn.addClassと$.fn.removeClassを使い、クラスの追加と削除だけで実現できそうな気もします。

こちらをヒントに、fixed.jsのほうはCSSアニメーション等を用いてアニメーションさせるようにした上で、以下のように変更したところすべて動作するようになりました。

jquery-fixed.js

$(window).on('scroll', function() {
    $('.nav').toggleClass('fixed', $(this).scrollTop() > 100);
});

css

.nav.fixed {
        transform: translateY(0%);
    animation: fadeIn 0.2s ease 0s 1 normal;
    -webkit-animation: fadeIn 0.2s ease 0s 1 normal;
}

@keyframes fadeIn {
  from {
    margin-top: -10%;
  }
  to {
    margin-left: 0%;
  }
}

@-webkit-keyframes fadeIn {
  from {
    margin-top: -10%;
  }
  to {
    margin-left: 0%;
  }
}

本当にお世話になりました。

どうもありがとうございます。

投稿2018/02/25 08:22

Novz

総合スコア22