jQuery.fn.inc プラグイン
祝・jQuery 1.3 リリース！
Release:jQuery 1.3 – jQuery JavaScript Library
それを記念して──というわけでもないが、自作した jQuery のプラグインを紹介する。名前は「jQuery.fn.inc」。そのままのネーミングだ。
http://asiamoth.com/download/js/jquery.fn.inc.js
指定したファイルを任意の場所に読み込むという、よくあるインクルード系のスクリプトである。しかし、読み込んだファイルは任意の部分だけを表示できる、というのが特徴だ。
インクルードするファイルは 1 つにまとめて、そこから複数の場所を読み込む、という使い方ができる。ファイルの管理が楽になるだろう。
完全に自分の創作ではなく、いつも読んでいる「かたつむりくんのWWW」からスクリプトをパク──参考にした。
jQuery でファイルをインクルードする （ jQuery によるモジュール化） – かたつむりくんのWWW
元のスクリプトを jQuery プラグイン化して、(X)HTML を変更しなくても使えるようにした、だけである。エンジンは元のままになっている。もう少し自分好みに仕上げたかったが、自分への宿題にしておいた。
使い方
上記の jQuery_inc.js と同じような用途を想定している。ただし、この jQuery.fn.inc では、読み込む場所やファイル・要素は JavaScript ですべて指定できるようにした。(X)HTML を変更する必要はない。
jQuery_inc.js の解説ページと同じように <div class="jquery_inc lastChild"></div> の場所にファイルを読み込む場合を例として挙げる:
// 実際のコードの例
$('div.jquery_inc').inc({url: 'jquery_inc.html', selector: 'dd.recommended', option: 'child'});
// 引数は省略できる・順不同（option なしの例）
$('div.jquery_inc').inc({selector: 'dd.recommended p', url: 'jquery_inc.html'});
// すべてデフォルトの値で実行する
$('div.jquery_inc').inc();
// 仕様
$({target}).inc({ url: {url}, selector: {selector}, option: {(child|replace)} });
option の child, replace は、それぞれ jQuery_inc.js の child_inc, replace_inc に対応している。子要素のインクルード・インクルードした要素との置換、という感じ。オリジナルには file_inc というオプションもあるが、それは url で指定する。
引数を順番に指定する、よくある方法（$('div.jquery_inc').inc('jquery_inc.html', 'dd.recommended', 'child');）のほうが分かりやすいかも、と少し思ったり。引数を数や「オブジェクトか否か」で見分けて、両方の指定ができると便利かもしれない。
作った理由
jQuery を使っているのに (X)HTML に手を加える、という jQuery_inc.js の仕様がイヤだった。だから、jQuery プラグインで簡単にインクルードできるように変更したのだ。
意味のあるマークアップを完了した (X)HTML にはなるべく触らないようにしよう。強力な jQuery の力と CSS とを上手に使って、外見も内面も美しいページ・サイトを作りたいものだ。
inc プラグイン
元のスクリプトを書いた tinybeans さんは（さらに元ネタの？）inc プラグインを紹介している。
inc: A super-tiny client-side include JavaScript jQuery plugin
自分も利用していたし、とくに不具合も起こらなかった。しかし、環境によってはちゃんと UTF-8 で保存したのになぜか IE 6 で表示すると日本語が文字化け
することもあるようだ。
いい機会なので jQuery プラグインのコードは どんな感じか、改めて見てみる。おそらく、IE の場合は iframe で読み込むのが不具合の原因だろう。──思い出した。自分は この部分が気に入らず、「AJAX に対応していない場合は iframe で読み込む」とコードをやっつけで改造していたのだった。文字化けが起こらなかったのは、それか。
「AJAX 未対応のブラウザでは iframe」というアイデアは、なかなか良いと思う。たぶん、実装の例もあるだろうから、またちゃんと調べよう。
参考
jQuery プラグインを作成する際に、大いに参考にしたのが下の記事である。jQuery プラグインの作成方法を書いた日本語の記事の中で、とくに分かりやすかった。
jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic
自分の探し方が悪いのか、jQuery プラグインの config について詳しく書かれた記事がほかに見つからない。何度もコードを読み直して、ようやく理解できた。
一度やってみると、既存の jQuery 用スクリプトをプラグインにするのは、じつに簡単であることが分かる。さて、次はどれを（勝手に）改造しようかな……。
JSLint
こざかしくも、jQuery.fn.inc は JSLint の「Good Parts」オプションに合格する。それが一番苦労した点、だったりして。
JSLint, The JavaScript Verifier
──英語のアヤシサは、JSLint では判定されなくて良かった。