はてなブログでjQueryがうまくいかない時、読み込みの順番が問題かも？

はじめに

　別のはてなブログにて、jQuery プラグインを導入しようとしたところ、盛大につまずいてしまいまして（約２週間くらい…）その問題と解決方法について記載します。具体的には、セレクタをいじったりしているjQueryプラグインは特に注意が必要です。導入にあたって、「教えて!Goo」で色々と質問させていただきました。たくさんの回答のおかげで、なんとかなりました。
スポンサーリンク

解決方法(jQuery プラグインの順番を入れ替える)

　初めに、解説方法です。一言で言ってしまうと。「読み込む、jQuery プラグインをページが読み込まれた後に読み込ませるようにする事」でした。これだけで、解決です。具体的には、

<script type="text/javascript" src="http://www.googledrive.com/host/[google drive ホスティングID]" async="async"></script>

のように、

async="async"

を入れる事。「async」について調べてみると、「非同期で読み込む。」との事、ページが読み込まれた後に「async」がついているスクリプトを読み込みますよってことです。似たものに「defer」ってのがあります。これは、ページが読み込まれた後にスクリプトを読み込むとのこと。同じように感じますが、全てを読み込み終えないとページが表示されない。つまり、ページ表示速度（正確には、最初に目に入る箇所の表示）が遅くなるようです。確かめてないので、わかりませんが。

解決方法はわかったが、何が問題だったのか？次に問題点について記述してます。

問題点

　そもそも、導入しようとしている jQuery プラグインは multifilter というプラグインです。以下リンクです。
Multifilter - Sort a table on Multiple inputs. A jQuery plugin from Tommy Palmer.
ライセンスはMITの模様。

　問題はなんだったのか？それは、「はてなブログ」が問題だったのです（問題って言い方は言い過ぎでした）。「はてなブログ」では、jQueryの読み込みをページの最後の方に行っていることが「はてなブログ」のソースコードをみると分かります。これは、表示スピードを上げるためのようです（SEO対策の一環？）。「はてなブログ」を使っている方々全てに以下の一文があるはずです。これが、原因だったのです。

<script type="text/javascript" src="http://blog.hatena.ne.jp/js?version=[英数字の羅列]"></script>

中身をみるとわかるのですが、実はこれ、jQuery v1.9.1 （2015/09/01現在では）。はてな側でjQuery.jsをホスティングしているのです。私自身読み込みの順番とか意識していなかったので、盛大につまずいていました。なぜなら、他の jQuery プラグインは問題なく動作するからです。

じゃなぜ、multifilter はうまくいかなくて、他のプラグインはうまくいったのか？その答えは、multifilter の中身をみると分かります。multifilter.js に以下の一文があると思います。

jQuery.expr[":"].Contains = function(a, i, m) { return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;};

これは、jQuery のセレクタを独自のものに書き換えているようです（java script をよく知らないので正確ではないかもしれませんが）。各スクリプトの読み込みについて図示してみました。

他のjQuery プラグインは動いて、jQueryの中身を書き換えているプラグインは動かない理由がこれで、わかるかと思います。これを解決方法に記載した方法をとると、

となって、動作してくれるのです。とはいっても、jQuery二重で読み込んでることになるんだな…。

以上です。