ネットを見ると、当然たくさん対応方法があるのですが、私なりにも簡単にする方法を考えました。
とはいえ、このネタ自体、すでに古いものなので、さすがに今更もう情報として必要とする方もいないでしょうが、もしもの参考のために今までの方とは違うアプローチもあるんだなと思っていただければと思い、公開します。
多くのネットにあるアプローチは簡単です。
jQueryにが外部ライブラリと競合しないようにするための機能が提供されています。
具体的には下記のように、jQuery.noConflict();を利用する方法です。
このjQuery.noConflict()自体はjQueryオブジェクトを返却しますので、
下記のように$j等、適当な変数に格納します。これを$の代わりに利用します。
var $j = jQuery.noConflict() (function($) {
// jQueryの$を利用可能
});
もしくはもっとシンプルに、$を利用しないで、jQueryを利用する方法もあるでしょう。
こうすれば、function($)内では$をjQueryオブジェクトとして利用できます。
jQuery(document).ready(function($){
// jQueryの$を利用可能
});
これらの問題は、function($)の中でのみ有効であるという点です。つまり、その外でロードされるjQueryプラグインは書き換えが必要となります。
もしくは、PHP等を使って下記のように本体にインクルードする方法もあります。
var $j = jQuery.noConflict() (function($) {
});
これの弱点は、実行時には必ずPHPが必要で、ちょっとHTMLのレイアウトをローカルで確認するには不向きです。
私の考えるアプローチは2つです。
1. これからはjQuery一本でいく。よって、jQueryは$で、Prototype.jsの$を別名に変換しましょう
2. 動的にjavascriptファイルをロードしてしまおう
1. これからはjQuery一本でいく。よって、jQueryは$で、Prototype.jsの$を別名に変換しましょう
これは既存のPrototype.jsからhtmlから全て、"$("を"$p("に全置換してしまいます。
こうすると、今までのPrototype.jsの$()は全て$p()で利用することになります。
こうすれば競合しませんし、jQueryのプラグインもそのまま利用することができます。
これはPrototype 1.6.1でのprototype.jsファイルを何も考えず、普通に"$("を"$p("に全置換してしまって問題なさそうなことは確認済みです。
あとは、jQueryをまだ使っていないhtmlも同じように置換すれば、($ ()と記述されたりしていない限りは)リプレース可能です。
でも、やっぱり面倒です。
2. 動的にjavascriptファイルをロードしてしまおう
この方法はとても無理やりです。簡単にいえば、scriptタグを利用しないで動的にjavascriptファイルをロードしてしまいます。
先に見てしまうほうが早いでしょう。
jQuery.noConflict()のfunction($)内でloadJs()メソッドを呼び出します。引数にはロードしたいjavascriptファイル名を指定します。
loadJsの中ではjQuery.ajaxでjavascriptファイルをgetします。その時、dataFilterで取得したテキストの前後に以下を追加しています。
* 前 : _$=window.$;window.$=jQuery;
* 後 : ;window.$=_$;
前は、$はPrototype.jsの$ですので_$にバックアップし、$をjQueryオブジェクトにすり替えます。
その後、jQueryプラグインが動作し、終了後、バックアップした_$を$に戻し、Prototype.jsに戻します。先頭に;が付いているのは、最後に付け忘れとかないよう念のためです。
ついでにajaxでgetしてくる際、効くかどうか分かりませんが、一応キャッシュを有効にしています。ちょっと試した限りではよくわかりませんでしたが。。。
こうすると、scriptタグではありませんが、その代わりにloadJs()を利用し、jQueryで記述されたプラグインを、変更なしでロードすることができます。
ちなみにこのサンプルはダウンロードできるように準備して見ました。
サンプルでは、loadJs()関数は外出ししています。何の制約もかけない著作権も訴えませんので自己責任でご自由にご利用ください。
必要なjsファイルは全く入れておりませんが、ダウンロードしてみてみたい方はこちらをクリックして下さいませ。
私はこれでjQuery UIやその他star系、blockUI系のプラグインが正常動作するのを確認しました。
すでにカタがついている問題かと思いますが、調べた限り、私の気に入る回答がなかったので作って見ました。もしかしたらすでにもう、他の方がこの方法に到達しているかもしれませんが。。。
その時はごめんなさい。
