はてなブログでjQueryを普通に使う
jQueryやっぱり便利ですね。単純な処理では不要論もありますけど、お手軽さがいい。
はてなブログでも、jQueryが標準で読み込まれていますが、残念ながらHEADやコンテンツ内で、そのままでは利用できないです。
ページの体感的な描画速度の向上のため、jQueryに限りませんが、SCRIPTはBODYの最後に置くのが通例となっていて、はてなでもだいぶ後ろの方で読み込まれるようです。
つまり、BODYの最後で読み込まれるjQueryは、それ以前のHEADや記事コンテンツのSCRIPTからは使えないということです。
でも使いたいんです。じゃどうするかってーと、使えるようになるまで待てば良いってことですね。
ちょっと待ってね♪ jQueryの読み込みを待っています・・・
コード(サンプルとか含む)
.wait_jquery.RawGit.html
貼り付け用のSCRIPTタグです。これをHEADに置けば、jQueryを読み込む前のSCRIPTタグで $(function(){ ... });が可能になります。
はてなブログだったら、ダッシュボードの[設定]を選んで[詳細設定]タブの[headに要素を追加]のテキストボックスに追加します。
Gistを直接使えるRawGitを使っているので、これら２つのサイトが堕ちてると動きません。
wait_jquery.js
処理本体です。これをSCRIPTで囲ってHEADに貼り付けてもOKです。
処理の流れは以下のような感じ。
- jQueryが読み込まれる前に、「使えるようになったら呼び出してもらいたい関数」を登録しておき（登録するための関数が
$なんですね）、 - タイマー処理でjQueryが使えるようになるまで待ちまして（タイムアウトもしています。表示媒体によっては、jQueryが読み込まれないかもしれませんから）、
- 使えるようになったら、登録されたハンドラーを呼び出します。
ブログシステムに応じて、待ち時間やチェックする間隔の調整などが必要になるかもしれません。$が使えない場合とかだと書き換えてください。
wait_jquery_sample.html
上で、使っているサンプルのHTMLとSCRIPT。jQueryが使えるようになったらDIVの背景を青に変えて中身を書き換え。
$(function(){ ... });と普通にjQueryを使っているようですが、これ実はjQueryの$ではないっていう所がミソといえばミソなんですね。
追記： 公式発表（⇒ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ）では「ご自分で読み込んでください」ってことらしいけど、それだと結局レンダリングが遅くなっちゃう？あと、対応バージョンが変わったときとか、問題出ないかな？と思いました。
