テンプレートのjQueryとプラグインのjQueryの衝突を察知する小ワザ

jQueryのなんたるかは割愛。
FC2で最近リリースされているテンプレートというのは、共有に限らず公式のものでも jQueryライブラリが既に含まれている ことが多いです。
ところが一昔前(2006〜2013年あたり)まではまだあんまり出回ってはいなかったんですね。
ちなみにjQueryの生誕記念日は2006年です。
いろんな変遷を経て現在ではwebページではほぼ「必須」といっても過言でない。

何を言いたいかといいますと。 比較的リリース時期の古いFC2ブログ用プラグイン(主にサイドメニューに設けるアレ)の中には、親切心からjQueryライブラリを読み込む手続きが行われていることがあり、最近のテンプレでは既に導入済みなので衝突することがあるよ ってことですね (´・ω・｀)

もちろん古いプラグイン「だけ」ってわけでもありませんが。 大抵の場合最近ではテンプレjQueryとの衝突を避けるために独自で読み込むことはしていないものが多いかと思います。 あるいはjQueryフレームワークを利用せずにVanilla JS(フツーのJS)で書いてくれているか。 これまでに何度も記事にしていますが、大層特殊な場合を除いては 1ページに利用されるjQueryファイルは原則として一つだけ です。 1ページに〜 というのはつまり、テンプレからプラグインから何からひっくるめても、jQueryファイルが重複していてはならない ということです。

はじめに

JSだけでなくCSSでもそうですけれど、基本は上書き です。重複した場合、後方に書かれているものが前方のそれを上書きします。

jQueryについても重複が生じている場合、各々の足りない点など自動補てん(マージ)してくれれば良さそうなものですが、残念ながらそういったことは起こりません。くどいようですが、後のものが前のものを上書き。前に書いてあるものは せっかく読み込んでも全て無駄 になります。実際に見かけることがありますが、ページ内にjQueryが3つも4つも導入されている場合。ものすごくローディングが遅いです。そりゃそうですよね。長大なjQuery基本コードを読んでは消し、読んでは消し、ってことをしてるので。(なんとな〜くでカスタマイズをしており、結果異常なほどローディングが長い方は疑ってみるべし)

動くべきものが動かない

例えばテンプレートを変更したら、これまで動いていたプラグインが動かなくなった、とか。例えば逆に動くべきはずのテンプレート内容(スライダーとかページ内スクロールとか)が明らかに動いていない、とか。そういった時は十中八九衝突してますね。それが何故起こっているのか、というのは検証してみなければわかりませんが、仮にそれがjQueryライブラリ重複であるならば比較的簡単に突き止められます。

対処はまた別ですよ？
まずは「重複してんじゃねーかなー…。」をはっきりさせるところからスタート。こういうのはもう消去法でやっていくしかないんですよね。最初にやるべきは

• jQueryファイル導入の記述が間違っていないか
• 動かしたいプラグイン(FC2の、という意味でなくweb全般の広義)の対応バージョンとテンプレのそれが合致しているか
• テンプレとプラグインそれぞれにjQueryがくっついていないか

今3番目について書いてる (´・ω・｀)

今見ているページのjQueryバージョンを確認できるブックマークレット

「テンプレとプラグイン両方のソース見れば〜？」なんてのは酷だと思いますので、とりまわかりやすい(であろう)テンプレート内のjQueryファイルを取り出します。

/jQuery

でCtrl + F (Windows)/ Command + F (Mac) キー検索。
いくつかヒットすると思いますが、近接に

/数字.数字.数字/

と、3つの数字が繋がっているものがお目当てのjQueryファイルとそのバージョンです。数字がバージョン。最初の数字は現在のところ 1 or 2 or 3 です。現時点での最新は 3.2.1

で、ですね、やっぱあまりにも古い 1.0.1 は論外だけれども、1.6系だとか 1.7系 だとか。もう使わない方が良いよね (´・ω・｀)

理由は単純で

• 寿命が短い
• アップグレードで 記述の仕方が変わっていたり、機能自体が削除されていたり

「記述の仕方」が変わるということは、それまで「正しい」とされていた書き方が、以降は「正しくない・間違っている」書き方になってしまうわけです。「これからはこれが正しいよ！」と言われたならば、なるべく早く頭の切り替えをしないと今後ずっと間違いを引きずることに。

あ、ブックマークレットね。ブックマークレット。えと、テンプレート内で利用されているjQueryのバージョンがわかりましたらメモメモ。これから今見ているページでホントにそのバージョンが適用されているのかを調べます。以下をブックマークレットとして登録しておきます。

マウスをテキストにあて、マウス左クリックしたままブラウザ上部のツールバーまで引っ張って(ドラッグ)、左クリックを離す(ドロップ)
単なるドラッグ&ドロップの動作で簡単に登録できます。そして確認したいページで登録したブックマークレットをクリック。

サンプルとして私の「Dark-Divineテンプレート」を使用します。導入しているjQueryバージョンは 3.2.1 です。

これ 3.2.1 と表示されてますので、テンプレートで導入しているバージョンで動いていることがわかります。
じゃあ今度こっち ↓

あっ…れ？？？

バージョンが違いますね。
ここでわかるのは

• jQueryライブラリが重複している
• テンプレート内のjQueryがページ内の何かしらが持っている別のjQueryによって上書きされている

この2点。テンプレート内容とバージョン不整合ですから、別のjQueryが鎮座ましますこと確定。

テンプレと確認したバージョンが同じであるのにも関わらずプラグインが動かない、という場合には逆にテンプレートの方のjQueryがプラグインのそれを上書きしてる、ってことですね。

共存の道を模索するか、いさぎよくどちらかを切り捨てるか

まぁ、後者の方がラクだわね (´・ω・｀)
jQueryは「マージ」というのができるので(Let's google it! 自分で調べてください)、共存できんこともないが。1系と2系3系それぞれ大きな変更点があるからこその「アップグレード」なわけですからね。

最後になりますが、jQueryの重複はもう、何一つ良いことありません。動作が重たくなるだけ。そして重複導入は非常によく見かけます。ご自分で何かしらのjQueryプラグインを導入される際は、テンプレートのjQueryバージョンと相談し、そのバージョンで動かせるかどうかをまず確認してください。導入しちゃってから「動かないよぅ (；ωq｀)」では労力の無駄。

そして厄介なのはFC2プラグインですね。これは製作者さんが悪いわけじゃないんですよ。その作者さんが現在でも稼働しているのであれば恐らく「書き直し」「メンテナンス」をされるはずです。でも更新が止まっている・ブログを離れてしまった のならばどうしようもないですよね (´・ω・｀)
それぞれの事情もありますし。それに2006年とかそんな時期にjQueryを入れているなんて、当時はトレンドだったんじゃん。それはすごいことだと思いますよ。これまで長い間その恩恵をみなさんしっかり受けているはず。でもwebって2年も経つとガラっと変わってしまいます。日進月歩どころか秒進分歩って感じ。

というわけで、バージョン確認のためのブックマークレットのご紹介でした。