プラグインを作ろう！ (1/4)

jQuery Mobileは、jQueryのプラグインとして開発されているライブラリです。これに、更にプラグインが追加できる……ということをご存知ですか？　ちょっと不思議ですが、そもそも土台となっているjQuery自体がプラグインによる拡張をサポートしていますから、それを拡張したjQuery Mobileも同じように拡張できるのですね。

jQuery Mobileでは、各種の表示は「ウィジェット」として用意されています。「プラグインで拡張する」というのは、通常、この「ウィジェット」を独自に定義してjQuery Mobileに組み込み、利用できるようにする、という形を取るのが一般的です。単なる便利な関数などは別にプラグインにする必要はなく、ただのライブラリで十分なのですから。「jQuery Mobileのプラグイン＝独自ウィジェットを追加するもの」と考えておきましょう。

「プラグイン」というと、何か特別な形で作られたもののように感じるかも知れませんが、その実態は、単なるJavaScriptのスクリプトです。後から好きなページに追加できるように、一つの独立したスクリプトファイルとして用意しておくのが一般的です。

「ただのスクリプト」とはいっても、もちろん書き方にはきちんとした決まりがあります。jQuery Mobileのプラグインは、基本的に「ｊQueryのプラグイン」として作成をします。これは、以下のような形でスクリプトを作成します。

●ｊQueryプラグインの基本形

(function($) {
    ……ここにプラグインの処理を書く……
})(jQuery);

()の中に関数定義があり、その後に(jQuery)というように引数が用意されています。一体どうなっているのかよくわからないでしょうが、これにより、後の引数にあるjQueryというオブジェクトが、関数定義の引数（ここでは$）に代入される形で処理が実行されるようになります。つまり、$にjQueryオブジェクトが割り当てられる形で関数内の処理が実行されるようになっているわけです。（この中身については後で詳しく説明します）

このような形式で記述されたスクリプトをファイルに保存し、それをjQuery（およびjQuery Mobile）の読み込みの後に読みこむようにします。例えば、「mysample.js」というファイル名でプラグインを保存したとしましょう。これをHTMLファイルと同じ場所に配置し、HTMLのソースコードのヘッダー部分に記述するスクリプトファイル読み込みのタグを以下のリスト欄のような形にしておきます。このように、プラグインのスクリプトは、必ずjQuery・jQuery Mobile関係のタグの後にロードするように記述してください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※プラグインの読み込み例

<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript"  src="mysample.js"></script>