【ひと手間必要】はてなブログでjQueryを使えるようにする方法

はてなブログでもjQueryを使いたい！！

はてなブログを利用していて、慣れてくるとJavaScriptを使ってさらにカスタマイズをしたくなると思います。

開発者ツールでソースを確認してみると、多少バージョンは古いようですがjQueryを読み込んでいるので使えそうですね♪

試しに以下のようなアラートを表示させるスクリプトを詳細設定のheadに要素を追加エリアに追加して動作を確認してみました。

jQuery動作確認用コード(エラー)

<script type="text/javascript">
$(document).ready(function () {
    alert("jQuery Test Alert.");
})
</script>

しかし、結果は以下のようなエラーログが表示されアラートが出ませんでした。

これはjQueryのグローバル変数の「$」が見つからないというエラーになります。

どうやら、はてなブログの標準ではjQueryの読み込みをHTML構造の下部(タイミングとしてはかなり後)で行っている影響で、jQueryファイルを読み込み前に$(document)が実行されてしまい、結果として$が見つからないというエラーになってしまっているようです。

じゃあどうすれば良いのか・・・orz

基本的に、JavaScriptはDOM要素全て読み込まれてから実行する必要があります。

これは、JavaScriptの性質上クリックイベント等の仕込みは実行時点のDOM要素に対してセットされます。
後から動的に追加したDOMなどには適用されないので気をつけましょう。
ちなみに、CSSは後から追加されたDOMに対してもセレクターがマッチすれば適用されるので動きが少し違います。

その上で、jQueryも基本的には$(document).ready(function () {});を使ってDOM要素を全て描写し終えたら処理を行うという暗黙のルールが一般的となっています。

しかし、今回はこちらが使えないので、addEventListenerという似たような動きをするJavaScript標準のメソッドを使って似たような事を行うことではてなブログでもjQueryを使うことが可能です。

今回の場合は、以下のように記述を変更する事になります。

jQuery動作確認用コード(成功)

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
  alert("jQuery Test Alert.");
});
</script>

では、実際にはてなブログにアクセスしてみましょう。

正常にjQueryの処理が実行されるようになりましたね♪

仕組みがわからない人ではハマってしまいそうな部分ですが、理解をしてしまえば解決策がすぐ見つかります。

後は、他のサイトと同じようにjQueryでのカスタマイズが自由に出来るようになりますので、ブログを見やすくするために試行錯誤を行ってみてください。