• 投稿:
  • カテゴリィ:

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)} });

optionchild, 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 では判定されなくて良かった。

[2] このページの一番上へ戻る