今回は、jQueryのコンフリクトでトラブルがありました。 忘れないうちに書き記しておきます。 jQueryは、非常によく使われるJavaScriptのライブラリです。 ゼロから作っていない環境で作業をすると、すでに入っていることがあります。 そういう場合に、あまりに古いバージョンが入っていると、今まで使っていたプラグインが使えなくなるので、別のバージョンを認識させる必要が出てきます。

アメーバブログのカスタマイズで起きたこと

アメーバブログのカスタマイズで、ある機能をプラグインで行いました。 しかし、うんともすんとも動かない。 ブラウザのコンソール画面（下記はFireFoxのアドオンFireBug）から 

$().jquery;

と記述すると、“1.3.2”と表示されました。

jquery-conflict-ameba01

“1.3.2”では厳しいので、もう少し新しいバージョンにすることにしました。 しかし、何度確認しても”1.3.2″のままです。 ソースを見ると、 

http://stat100.ameba.jp/blog/js/apm001.js

にjQuery1.3.2が書かれているのですが、かなり下の方にソースがあります。 アメーバブログで自由にscriptが書ける場所は決まっているので、上書きすることができません。 jQueryには、こういう場合に対応できるように、noConflictという機能があります。 jQuery関数が使える｢$｣が1.3.2に奪われているので、｢$｣の持っている機能を別の文字に変えれば良いのです。 

<script src="http://example.com/js/jquery.min.js"></script>
<script>
var $tukumemo = jQuery.noConflict();
</script>
<script src="http://example.com/js/jquery.easing.1.3.js"></script>
<script src="http://example.com/js/plugin.js"></script>
<script>
(function($){
    $(document).ready(function(){
        ...
    });
})($tukumemo);
</script>

これで大丈夫、かと思ったら｢jquery.easing.1.3.js｣でエラーが起きました。

jquery-conflict-ameba02

jQueryが競合しているとエラーが出るようです。 jquery.easing.1.3.jsを書き換えて、 

(function(jQuery){
    //jquery.easing.1.3.jsのscript
    ...
})($tukumemo);

としました。 他のプラグインでも、古いバージョンだったり、コンフリクトで動かないものは、上記のように囲うと良いでしょう。

まとめ

アメーバブログのjQueryはバージョンが古いから気を付けよう！ では、そんな感じで、またねー。