Post on 19-May-2015
description
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
名前： 野島 隆（のじま たかし）
所属：イラスティックコンサルタンツ株式会社
About ?
って?
HTML/CSSと親和性の高い
JavaScriptライブラリ
About jQuery
公式サイト: http://jquery.com/
•CSSセレクタを利用したDOM走査•直感的なDOM Element生成/操作•機能追加が容易•豊富なプラグイン•GPL/MITのデュアルライセンス
About jQuery
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Getting started with jQuery
• jQueryをダウンロードする• 最新バージョンは 1.4.3 (2010/10/30現在)
• <script>タグで読み込む<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){ /* ここに色々書いていきます */
};// --></script>
Manipulate DOM
DOMを操る
DOM =
DOM = Document Object Model
DOM = Document Object Model
•HTML文書やXML文書を、JavaScriptなどのプログラムから利用・操作するためのAPI
•要素をツリー構造として扱う
DOM = Document Object Model
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>
$('#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>
$('.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>
$('#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();
$('#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>
$('#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>
$('#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>
$('#contents').find('p');
$('#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>
$('#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>
$('#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');
$('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>
$('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>
$('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要素の操作（追加、変更、削除）を簡単に行うための様々な機能があります
Manipulate DOM elements
• append()要素内部にコンテンツを追加する• prepend()要素内部の先頭にコンテンツを追加する• remove()要素を削除する
Manipulate DOM elements
• html(val)要素内部のHTMLをvalで置き換える• text(val)要素内部をvalで置き換える（valはエスケープされ文字列として挿入されます）
Manipulate DOM elements
• attr(key, val)要素のkey属性をvalにセットする• removeAttr(key)要素のkey属性を削除する
Manipulate DOM elements
• addClass(val)要素のclass属性にvalを追加する• removeClass(val)要素のclass属性からvalを削除する
•css(key, val)要素のstyle属性にkey: valを設定する
Demo
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"><!--$(document).ready(function(){
$.pluginName();});// --></script>
上記のように書くことで、機能を実行できます。
Why Plugin?
• プラグイン化することのメリット• 機能を分離しておくことで、再利用しやすくなる
• HTMLファイル中のJavaScriptコード減るので、見た目がすっきりする
• 一時的に利用する変数・関数などで、グローバル空間を汚染しなくてすむ
プラグイン化でメンテナンス性を高める
How to create Plugin
• 基本パターン• jQuery自体に対する拡張
• $(‘selector’)等で生成されたjQueryエレメントに対する拡張
$.pluginName(params);
$.pluginName(params);
;(function($){
})(jQuery);
$.pluginName(params);
;(function($){
})(jQuery);
←おまじない
←おまじない
$.pluginName(params);
;(function($){
$.extend({
});
})(jQuery);
$.pluginName(params);
;(function($){
$.extend({
"pluginName" : function(params){
}
});
})(jQuery);
$.pluginName(params);
;(function($){
$.extend({
"pluginName" : function(params){
// do something...
}
});
})(jQuery);
$(selector).pluginName(params);
$.fn を拡張する
$(selector).pluginName(params);
;(function($){
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.extend({
});
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.extend({
"pluginName" : function(params){
}
});
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.extend({
"pluginName" : function(params){
// do something.
return this; }
});
})(jQuery);
$(selector).pluginName(params);
;(function($){
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
};
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
// do something.
return this; };
})(jQuery);
$(selector).pluginName(params);
;(function($){
$.fn.pluginName = function(params){
// do something.
return this; };
})(jQuery);
←重要
メソッドチェイン
$(‘#target’).someFunc() .addClass(‘someClass’) .slideDown();
といったように、対象のオブジェクトに対して連続で操作を適用するような書き方をするために必要
Tips 1
•オプション(引数)のデフォルト値を定義する
$.pluginName({foo: true})等、呼び出し時にオプション引数を与えて、プラグインの振る舞いを変更したい場合に利用
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
} 初期値を定義
(function($){
$.fn.pluginName = function(params){
// override input params params = $.extend({}, $.fn.pluginName.defaults, params); // do something...
};
// default values $.fn.pluginName.defaults = { foo: 'hoge', bar: 'fuga' };
})(jQuery);
} 初期値を定義
↓初期値を上書き
Tips 2
•ローカル関数を定義・利用する
プラグイン内部でのみ利用する関数を定義
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
} 関数を定義
(function($){
var localFunction = function(params) {
alert('local function'); }; $.fn.pluginName = function(params){
// do something.. localFunction(params); // do something.. }; })(jQuery);
} 関数を定義
} 関数を呼び出し
Tips 3
• 複数の機能を定義する• $.pluginName.funcA()• $.pluginName.funcB()
ひとつのプラグインで複数の機能を提供したい場合に利用
(function($){
$.pluginName = {};
})(jQuery);
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
})(jQuery);
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
})(jQuery);
} $.pluginName.FuncA()
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
};
})(jQuery);
(function($){
$.pluginName = {};
$.pluginName.FuncA = function(){
// do something...
};
$.pluginName.FuncB = function(){
// do something...
};
})(jQuery);
} $.pluginName.FuncB()
Example.
jQuery.formControll.js
jQuery.formControll.js
•上下矢印キーおよび、TAB, Enterキーによる入力要素の移動
おまけ• Meta + Enter キーによるフォームの送信• 文字数制限のあるフィールドで規定文字数入力時、次のフィールドへの自動移動• textarea内でのTABキー入力
Demo
Thank you for your listening!!