はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

チョマテヨ「ちょ待てよ!jQueryの2回読み込み、プラグインあるからさ」

jQuery本体がページ下部で読み込まれ、仕様上、ブログ管理者がページ上部に移動させられない場合の対策。ページ上部で別のjQuery本体を追加するのは、ちょ待てよ!

チョマテヨの特長

通常は、jQuery本体が読み込まれる前に記述されたjQuery記法によるコードは有効にならない。しかし、プラグイン「チョマテヨ」をあらかじめ読み込んでおくことで、jQuery本体読み込み前のjQuery記法コードも有効にできる。

改訂版 Webデザイナーのための jQuery入門

チョマテヨのデモページ

JavaScriptに慣れてる方はデモページをご覧いただく方が早い。コメントアウトで簡易解説を入れているのでデモページのソース参照。

チョマテヨの作動イメージ

チョマテヨはjQuery記法だけを足止めする入国管理局。

通常のJavaScriptコード(jQuery記法以外)

  1. チョマテヨ「誰だ!」
  2. JavaScript「getElementByIdです。」
  3. チョマテヨ「よし、通れ。」

jQuery記法以外のコードは読み込み時に作動する。

jQuery記法(jQuery本体が読み込まれる前)

  1. チョマテヨ「誰だ!」
  2. jQuery「$(function(){...});です。」
  3. チョマテヨ「ちょ待てよ!」

チョマテヨがjQuery記法コードを一時的に、「ちょ待てよ!」しておく。

jQuery本体を読み込む

  1. チョマテヨ「誰だ!」
  2. jQuery「本体です。」
  3. チョマテヨ「よし、通れ。」

jQuery本体はきちんと読み込まれる。

jQuery本体読み込み後

  1. チョマテヨ「待ってたやつ、こっちこいよ!」
  2. jQuery「テンション上げてこー!」

待たされていたコードも無効にならずにきちんと読み込まれる。

チョマテヨを読み込む設定

head内に次のコードを追加する。

<script src="https://dl.dropboxusercontent.com/s/hd21emfvmb12aug/jquery.chomateyo.min.js"></script>

筆者のdropbox共有フォルダからJavaScriptファイルを読み込んでいるだけ。はてなブログは画像以外のファイル(HTML,CSS,JavaScript)をアップロードできないので。

はてなブログなら下図のとおり管理画面で挿入可能。headに要素を追加の右にあるテキストボックス(下図ではフレームアウト)にチョマテヨを追加して保存する。

はてなブログ管理画面headに要素を追加

jQuery記法コードがきちんと作動するために

作動する書き方例

チョマテヨが「ちょ待てよ!」できるコードは次の通り$(function(){});で囲まれたコード。

$(function(){$('#i').css({'color':'red'});});

上記コードはプラグイン・チョマテヨ専用の書き方ではない。将来的にjQuery本体をページ上部に移動させてチョマテヨを外したとしても、jQueryのコードとして認識され実行される。

作動しない書き方例

jQueryがページ上部で読み込まれていれば次のコードで#iの文字色は赤色になる。

$('#i').css({'color':'red'});

jQuery本体がページ下部で読み込まれると上記コードは無視される。これはプラグイン・チョマテヨを導入しても同じ。

jQuery用プラグインではあるが

正確には狭義の「jQueryプラグイン」とはいえない。作動がjQueryに依存していないから。しかし、jQueryのためのプラグインなので広義でjQueryプラグインと呼んでもいいと思う。

おわりに:開発経緯

筆者が利用しているこのはてなブログの仕様がjQuery本体をページ下部で読み込むタイプだった。jQueryを2回読み込むのはどうかと思ったので作成。同じように考える人がいるかもしれないので公開することにした。作動確認したブラウザは次の通り。

  • Google Chrome 33
  • FireFox 28
  • IE 10
てすとてすと