質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.46%

  • JavaScript

    21082questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8394questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    627questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,147

Novz

score 5

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

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

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

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

【概要】

競合しているURL

(A)
iscroll.js

drawer.min.js

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

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

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

[jquery-fixed.js](
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js)

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

fixed.js

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

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

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


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

drawer.min.js 
jquery-scrolls.js

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

【試したこと】

(1)
調べたところ$関数が競合をおこすとのことでしたので、

$(function() {

jQuery(function($) 

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

(2)
また、

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

を参考に

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

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

(2)を記述した際は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を競合を起こさずに、同時に利用する方法はありませんでしょうか?

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi-sun

    2018/02/18 16:02

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

    キャンセル

  • Novz

    2018/02/18 17:17

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

    キャンセル

  • miyabi-sun

    2018/02/18 17:21

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

    キャンセル

回答 2

checkベストアンサー

+2

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

<link rel="dns-prefetch" href="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=1.11.1">
<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を読み込んでからと、順序が決まっています。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js?ver=1.2.1"></script>
<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が読み込まれています。

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

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

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

jQuery.noConflict();


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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script>
    var $224 = jQuery.noConflict(); //jQueryの$関数を$224へ変更
    $224( function ( $ ){
      //このスコープ内では$に$224がバインドされています。
      //$が普通に使えます
      console.log( $.fn.jquery );
    } );
  </script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
    var $220 = jQuery.noConflict();
    $220( function ( $ ){
      //このスコープ内では$に$220がバインドされています
      console.log( $.fn.jquery ); //バージョン出力
    } );
  </script>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script>
    var $190 = jQuery.noConflict();
    $190( function ( $ ){
      //このスコープ内では$に$190がバインドされています。
      console.log( $.fn.jquery ); //バージョン出力
    } );
  </script>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script>
    var $142 = jQuery.noConflict();
    $142( function ( $ ){
      //このスコープ内では$に$142がバインドされています。
      console.log( $.fn.jquery ); //バージョン出力
    } );
  </script>

  <script>
    //変数に割当が完了しているなら、後からでも処理を追加できます。
    $190( function ( $ ){
      console.log( '1.9.0?', $.fn.jquery );
    } );

    $142( function ( $ ){
      console.log( '1.4.2?', $.fn.jquery );
    } );

    $220( function ( $ ){
      console.log( '2.2.0?', $.fn.jquery );
    } );

    $224( function ( $ ){
      console.log( '2.2.4?', $.fn.jquery );
    } );

    //ただし実行順序に注意が必要です。
    //上記の場合`1.4.2?`が最後に実行されます。
    //もしバージョン管理が必要な際は挙動を把握しておくと良いでしょう。
  </script>
</head>
<body>
</body>
</html>

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

サイトのソースを見ていて気になった点はjquery-scrolls.jsjquery-fixed.jsに同じ処理が登録されていますが、これは大丈夫ですか?
スマートフォンでdrawer.min.jsjquery-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/25 17:18 編集

    so87様



    この度は丁寧でわかりやすいご回答、本当にありがとうございます。



    ご指導に沿って修正を行ったところ、改善することができました。



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

    こちらは、WordPressで自動的に挿入されたものなのですが、
    どうしても外せなかったのでこのまま運用したいと思います。

    function.phpで制御できないかも調べていろいろ試してみたのですが
    どうしてもわかりませんでした。



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

    こちらはWordPressのプラグインが自動的に挿入していたようですので、設定で1.2.1とmigrateは読み込まないようにして、jquery-2.1.4のみを読み込むように変更しました。




    未熟ではありますが、出来る限りスキルアップできるようはげみますので、

    どうぞ今後ともよろしくおねがいします。

    キャンセル

0

>サイトのソースを見ていて気になった点は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%;
  }
}

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21082questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8394questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    627questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。