jQuery プラグイン作成入門

jQueryプラグイン作成入門イラスティックコンサルタンツ株式会社

野島隆

今日のお話

お客さん: 「ホームページに、イマドキのバーンっと動くようなもの入れてよ♪」• スライドショー• アコーディオンメニュー• etc..

今日のお話

お客さん: 「ホームページに、イマドキのバーンっと動くようなもの入れてよ♪」• スライドショー• アコーディオンメニュー• etc..

jQueryでOK!!

“jQuery” ならHTML/CSSと少しのJavaScriptの知識でWebサイトへ素敵な機能を追加できる

今日のお話

• jQuery概要紹介• jQueryって？• DOMを操作しよう• イベントで動作させてみよう• アニメーションさせてみよう• プラグイン作成の基本

今日のお話

•プラグイン作成実例

About Me

•WEB Developer / PHP / CakePHP / HTML / CSS / jQuery / PostgreSQL / MySQL / iPhone / 佐賀 / 福岡 / 島根 / 熊本 / プリン / キイロイトリ / リラックマ / no more

トマト

• BLOG: http://php-tips.com/

• TWITTER: @nojimage

• FACEBOOK: http://www.facebook.com/nojimage

名前：野島隆（のじまたかし）

所属：イラスティックコンサルタンツ株式会社

http://php-tips.com

http://php-tips.com

http://www.facebook.com/nojimage

http://www.facebook.com/nojimage

About ?

って?

HTML/CSSと親和性の高い

JavaScriptライブラリ

About jQuery

公式サイト: http://jquery.com/

•CSSセレクタを利用したDOM走査•直感的なDOM Element生成/操作•機能追加が容易•豊富なプラグイン•GPL/MITのデュアルライセンス

About jQuery

http://jquery.com

http://jquery.com

Getting started with jQuery

• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)

• <script>タグで読み込む



• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript"></script>

Manipulate DOM

DOMを操る

DOM = Document Object Model


•HTML文書やXML文書を、JavaScriptなどのプログラムから利用・操作するためのAPI

•要素をツリー構造として扱う


html

head

body

title

...

h1

div

ul

p

li

...

How to select DOM Elements with jQuery

jQueryでは、CSSセレクタを利用してDOM要素を選択できます

$('ul');

$('ul');

<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$('ul');

<div id="header"><p id="title">Foobar Website</p>

<ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p>

<ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$('#title');

$('#title');

<div id="header">

<p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$('.message');

$('.message');

<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul>

<li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$('#contents p');

$('#contents p');

<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents">

<p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

DOM Traversing

取得したDOMオブジェクトから、さらに要素を指定して選択できます

$('#contents').next();


<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div>

<div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>


<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div>

<div id="footer">Copyright 2010 Foobar Inc.</div>

$('#contents').find('p');


<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents">

<p>jQuery is a fast and concise JavaScript Library.</p><ul> <li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$('li.message').parent('div');


<div id="header"> <p id="title">Foobar Website</p><ul> <li>Home</li> <li>Products</li> <li>Contacts</li></ul></div><div id="contents"><p>jQuery is a fast and concise JavaScript Library.</p><ul>

<li class="message">Hello World.</li> <li class="message">Let's eat pudding.</li></ul></div><div id="footer">Copyright 2010 Foobar Inc.</div>

$ is jQuery

先ほどから出てきている、$はjQueryの省略形です。

// <div id="contents"> の次の要素を選択$('#contents').next();

// <div id="contents"> の中からp要素を選択$('#contents').find('p');

// <input id="email"/> の上位にあるform要素を選択$('input#email').parent('form');

$ is jQuery

先ほどから出てきている、$はjQueryの省略形です。省略しないで書くと、// <div id="contents"> の次の要素を選択jQuery('#contents').next();

// <div id="contents"> の中からp要素を選択jQuery('#contents').find('p');

// <input id="email"/> の上位にあるform要素を選択jQuery('input#email').parent('form');

Manipulate DOM elements

jQueryでは、DOM要素の操作（追加、変更、削除）を簡単に行うための様々な機能があります


• append()要素内部にコンテンツを追加する• prepend()要素内部の先頭にコンテンツを追加する• remove()要素を削除する


• html(val)要素内部のHTMLをvalで置き換える• text(val)要素内部をvalで置き換える（valはエスケープされ文字列として挿入されます）


• attr(key, val)要素のkey属性をvalにセットする• removeAttr(key)要素のkey属性を削除する


• addClass(val)要素のclass属性にvalを追加する• removeClass(val)要素のclass属性からvalを削除する

•css(key, val)要素のstyle属性にkey: valを設定する

Event Handler

イベントハンドラ

Event Handler

• インタラクティブな動作を行うために、キーボード・マウスの操作などユーザが行ったイベントに対して特定の処理を与える• マウスクリック• フォーム内容の変更• キーを押す• ページ読み込み完了• 等々

Event Handler

•click(func)

オブジェクトがクリックされたときに呼び出されるonClickイベントにフックさせる。

$('a').click(function(){ // リンクをクリックしたら「Move to リンク先」と表示して確認する return confirm('Move to "' + this.href + '"');});

Event Handler

•ready(func)

ページの読み込み完了時に呼び出される• DOMの操作はページ描画が終わってからなので、通常はこの呼び出し関数の中に色々な操作を書きます。

$(document).ready(function(){ // ページ読み込みが完了したら「Complete」とダイアログに表示 alert('Complete');});

Event Handler

•その他のイベントハンドラ• change()• dbclick()• error()• focus()• keydown()• keypress()• keyup()• load()• mousedown()• mousemove()• .....

Animation with jQuery

jQueryでアニメーション

Animation

• jQueryには標準で簡易的なアニメーション機能がある• hide() / show()対象のオブジェクトを表示・非表示を切り替えます。アニメーション時は幅、高さが同時に変化します。

• slideUp() / slideDown()対象のオブジェクトの高さを変化させて表示・非表示を切り替えます。

• fadeOut() / fadeIn()対象のオブジェクトをフェードアウト・フェードインさせて表示・非表示を切り替えます。

• メニューを出したり、消したりのようなアニメーションは上記を利用するだけでも充分

Create Animation

独自に要素の動作を定義することも可能

•animate(properties, options)

$('.move-right').click(function(){ // .move-rightのクリック時に $('#box').animate({ 'left': '+=50px' // #boxを右へ50px移動 }, { duration: "slow", // 速度はゆっくり // 完了後にアラートを表示 complete: function(){ alert('Move!'); } });});

Letʼs create jQuery Plugin!

jQueryプラグインを作ろう!

Plugin?

• 機能をプラグイン化すると

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript" src="js/jquery.plugin_name.js"></script><script type="text/javascript"></script>

上記のように書くことで、機能を実行できます。

Why Plugin?

• プラグイン化することのメリット• 機能を分離しておくことで、再利用しやすくなる

• HTMLファイル中のJavaScriptコード減るので、見た目がすっきりする

• 一時的に利用する変数・関数などで、グローバル空間を汚染しなくてすむ

プラグイン化でメンテナンス性を高める

How to create Plugin

• 基本パターン• jQuery自体に対する拡張

• $(‘selector’)等で生成されたjQueryエレメントに対する拡張

$.pluginName(params);


;(function($){

})(jQuery);


;(function($){

})(jQuery);

←おまじない

←おまじない


;(function($){

$.extend({

});

})(jQuery);


;(function($){

$.extend({

"pluginName" : function(params){

}

});

})(jQuery);


;(function($){

$.extend({


// do something...

}

});

})(jQuery);

$(selector).pluginName(params);

$.fn を拡張する


;(function($){

})(jQuery);


;(function($){

$.fn.extend({

});

})(jQuery);


;(function($){

$.fn.extend({


}

});

})(jQuery);


;(function($){

$.fn.extend({


// do something.

return this; }

});

})(jQuery);


;(function($){

})(jQuery);


;(function($){

$.fn.pluginName = function(params){

};

})(jQuery);


;(function($){


// do something.

return this; };

})(jQuery);


;(function($){


// do something.

return this; };

})(jQuery);

←重要

メソッドチェイン

$(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();

といったように、対象のオブジェクトに対して連続で操作を適用するような書き方をするために必要

Tips 1

•オプション(引数)のデフォルト値を定義する

$.pluginName({foo: true})等、呼び出し時にオプション引数を与えて、プラグインの振る舞いを変更したい場合に利用

(function($){



};


})(jQuery);

} 初期値を定義

(function($){



};


})(jQuery);

} 初期値を定義

↓初期値を上書き

Tips 2

•ローカル関数を定義・利用する

プラグイン内部でのみ利用する関数を定義

(function($){

var localFunction = function(params) {

alert('local function'); }; $.fn.pluginName = function(params){

// do something.. localFunction(params); // do something.. }; })(jQuery);

(function($){




} 関数を定義

(function($){




} 関数を定義

} 関数を呼び出し

Tips 3

• 複数の機能を定義する• $.pluginName.funcA()• $.pluginName.funcB()

ひとつのプラグインで複数の機能を提供したい場合に利用

(function($){

$.pluginName = {};

})(jQuery);

(function($){

$.pluginName = {};

$.pluginName.FuncA = function(){

// do something...

};

})(jQuery);

(function($){

$.pluginName = {};


// do something...

};

})(jQuery);

} $.pluginName.FuncA()

(function($){

$.pluginName = {};


// do something...

};

$.pluginName.FuncB = function(){

// do something...

};

})(jQuery);

(function($){

$.pluginName = {};


// do something...

};

$.pluginName.FuncB = function(){

// do something...

};

})(jQuery);

} $.pluginName.FuncB()

Example.

jQuery.formControll.js

jQuery.formControll.js

•上下矢印キーおよび、TAB, Enterキーによる入力要素の移動

おまけ• Meta + Enter キーによるフォームの送信• 文字数制限のあるフィールドで規定文字数入力時、次のフィールドへの自動移動• textarea内でのTABキー入力

Thank you for your listening!!

jQuery プラグイン作成入門

Technology

Transcript of jQuery プラグイン作成入門