jQuery？ああ なんかページ内でいろいろやるやつね。スライダーとかページ内スクロールとか、要はJavascriptとかいうやつでしょう？
まあそうなんだけども (´・ω・｀)
テンプレートカスタマイズで例えばそれこそスライダーを追加する、だとか、外部サイトのRSSを読み込んで表示させる、だとか。色々「追加」をしていく際に jQueryライブラリ というのが一体なんなのかを知っておかないとよくありがちな間違いを犯すことになります。
jQueryでよくありがちな間違いとは？
よくありがちな間違い = ひとつのテンプレートにバージョンの異なるJqueryファイルがてんこもり
これからご説明ですがここで言う「プラグイン」とは「FC2のプラグイン(メールフォームとか最新記事とか)」という狭義ではなくweb一般のプラグインを指します。
自分で例えばスライダーを追加してみよう と思ったとき、大抵はその手の紹介サイトさんなんかを参照されますよね。するとこう書いてある。
まずhead内にjQuery本体を読み込み、続いてスライダーのJSファイルを読み込みます。
大抵そんな感じですよね。これはこれで正しいのですが、利用テンプレート内に既にjQueryファイルが含まれている場合には新たにjQueryを入れてはいけない という点。
そもそもjQueryとはなんなのか
URL中に /ajax/libs/jquery/数字/ の文字列を持つスクリプトファイル、この役割が一体なんなのか ですけれども。
JavaScript(じゃゔぁすくりぷと) というのは聞いたことがありますよね。数あるプログラミング言語のひとつです。現在では各ブラウザに当たり前に組み込まれています。htmlやCSSでは表現しきれない凝った(複雑な)動きを実現することができたり、セキュリティ面でも一役買っています(個人情報入力時など)
「ウイルス感染経路になりやすいのは JAVA」とよく目にするかと思いますが これはJavaScriptとは全く別のものです。コーヒーから湯気が出てるマークのアレです。
じゃあ jQuery とはなんなのか。JavaScriptをもっと簡単に使えるようにするためのライブラリでありフレームワーク です。
フレームワークというのは簡単に言うと「枠組み」「骨組み」「設計」で、その枠組の中でのみ動作するもの と捉えれば良いと思います。つまりjQueryのシステムや書式を使えるようにする車で言うとエンジン的な役割です。エンジンがかからなければ車は動きません。本来のJavaScript(以下 vanilla JSと称す)というのはとっても難解で素人ではとても手が出せる代物ではありません。一方jQueryの記述の仕方というのは素人でも頑張ればなんとかなります。そのために開発されたようなものです。
* vanilla JS(ゔぁにらじぇいえす) = 通常のJavaScriptのことをこう呼んだりします。 vanilla = なんてことない, とりたててどうってことない の意 私のアカウント名はここから来ています(余談)
車に例えましたが、車を動かすにはエンジンが一つあれば良いわけです(そうじゃないものもあるかもしれんが)
要するに jQueryファイルはテンプレート内にひとつあれば良い んですね。ひとつ入っていれば関連プラグインを動かせる準備は整います。ところがハウツーを読むと「まずJqueryファイルを入れて...」なんて書いてあるもんだから プラグインひとつ追加する毎にひとつ入れてしまう方が意外と多く、その結果バージョン違いのファイルがいくつも混在してしまう ことがあります。例えば
- スライダー
- ドロップダウンメニュー
- 画像拡大スクリプト
この3つを入れたのでjQueryファイルが3つある！みたいな方がFC2ブログには実際多くいらっしゃいます。FC2ブログテンプレートは制作自由度がかなり高いものですから、テンプレートによって仕様にばらつきがあります。ただ最近リリースされているものについては公式・共有を含め、ほとんどがjQueryファイル導入済みではないかと思います。
- Jqueryファイルは基本的にテンプレートひとつにひとつだけ
- プラグインひとつにつきひとつづつ必要なわけではない
というのをまず知ってください。言ってみりゃパソコンに於けるOSみたいなものです。OSひとつ入っていればブラウザも使えますしメールだって開けます。ブラウザ用にWindows7ひとつ メール用にWindows8ひとつ DVD再生用にWindows10ひとつ...なんて必要は無いわけよ。
jQueryにはいくつものバージョンが存在します
ブラウザやOSと同じでjQueryにもバージョンが存在します。日々進化していますので当然っちゃー当然。ここまで「ファイルはひとつだけ！」と書いてきましたが、バージョンが異なると動かないプラグイン というのも出てきます。これはブラウザでもそうですよね。jQueryは機能の削除や追加が新バージョンをリリースするごとに行われています。
そうなるとですね、「バージョン新しくなったら動かんなった... ( ；∀；)」という事態も起こりうるんですね。その場合どうするかは後述。
バージョン違いが複数あるとどうなるか
jQueryファイルの中身がごちゃ混ぜになってしまうということは起こりません。htmlソース内でより後方に書いてあるものが前方の内容を上書きします。 3つのバージョンが存在すれば 最後の3つ目以前の2つのファイルについては全くの無駄になります。ところが読み込み・内容解釈自体は行われますので ページの表示がやたらに遅くなる というわけです。
Q&Aでよくあるパターン
「もともとスライダーがひとつ入っていますが、別のスライダーを追加したところ、新しい方は動きますが古い方が動かなくなりました。新しい方を削除するとまた動くようになります。どうすれば良いでしょうか」
ここまでの記事内容をご理解頂けた方はもう推測できるかと思います。
- jQueryファイルが重複している
- 新しい方のスライダーのためのJSファイルと同時に追加したjQueryファイルの方がバージョンが新しい
- 古い方のスライダーで必要な機能が新しいバージョンのjQueryでは削除 or 改正されている
このぐらいはたぶんぱっと見当がつくかと。こんな感じか↓
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js'></script> <script src='//スライダー①.js'></script> 〜いろんな内容〜 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script> <script src='//スライダー②.js'></script>
単なる例としてですよ 
こうしてプラグインと一緒にjQueryファイルがくっついてるのが大方のパターンです。このソース内容とQ&Aを照らしあわせて導き出せるのは
- スライダー①は 1.6.0では動く 2.2.3では動かない
- スライダー②は 2.2.3では動く それ以前のバージョンでは動くか不明
理屈わかりますでしょうかね。「上書き」されているというのがわかるとこういう図式になることもわかりますよね。じゃあどうするか、なんですけれど。
① 1.6.0以降 2.2.3までの間のバージョンで 双方が動かせるものを探す
これが一番です。共通で使えるものが見つかれば万々歳 それが一番良い。
② マージ(混合, 合成)する 共通で使えるファイルが見つからない場合
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
var $160 = $.noConflict(true);
(function($){
$(function(){
console.info("jQuery = " + $.fn.jquery);
});
})(jQuery);
(function($){
$(function(){
console.info("$223 = " + $.fn.jquery);
});
})($160);
</script>
こうして異なるバージョン同士をmergeします。めんどくさいね 実にめんどくさい (´・ω・｀)
共通バージョンを探すのが先決。
で 実際にお困りの方(Q&Aでの質問者さん)に「バージョン確認しろー重複は避けろー」ってなことをお伝えするのですが、そもそもJqueryファイルの意味を理解していないので伝わらないんですよ。「だってあの有名サイトの手順どおりにやってるんだから...」みたいな固定観念。それゆえちょろっと回答読んだだけで却下してしまいます。聞く耳を持たないというか。だから試しもしない人のなんと多いこと。人間は激昂している時と思い込んでいる時は他人の言葉を理解することができないものであります
なので「ああ この人理解する気ねーな」と思ったらあとは答えず素通りすることにしています(微笑み)
文章でなんとなくわかるのよね (´・ω・｀)
記述する場所
一般的には <head> 〜 </head> の間 あるいは </body> の直前です。JSというのはhtml内に記述があるとhtmlのパースを一旦中断してJS解釈に集中しますので、html内容の後方に書いた方がページの描画自体は早いという理屈になります(レンダリングの開始が速いため)
ただ使用するJSの種類や実行のタイミングの関係もありますので一概にはどちらがより良いとは言えません。私の場合は大抵body終了タグの直前にまとめています。参考までに。
ともかくテンプレート内にjQueryファイルが存在するのかどうかをまず確認し、無ければ上記に記したいずれかの箇所に追加した上でプラグインの内容はそのファイルの 後 に書きます。ファイルよりも前にプラグインのファイルや実行コードを書いても動作しません。
まとめ
- テンプレートでJqueryファイルが重複していないかチェックしましょう
- 重複を前提としてプラグイン増やしたら元あるのが動かなくなった！ な方は何をしようと一生動きませんので共存できるバージョン探し → 無ければマージ
jQueryファイルの意味と重複時の上書き事実を知っていれば1分で原因が解る。知らないと1日2日、下手すりゃ1週間経ってもわからずに結局諦める、なんてことも。ねー (´・ω・｀)
それにしても全然関係ないけど最近集中力が保ちません。テンプレート制作はちょっと鈍足になるかもしれません。それと「以下 vanilla JSと称す」とか言っちゃってそれ以降一度も出てこないという事実。
There are no comments yet.