1. はがねのつるぎ

2.  jQuery日本語リファレンス
 イケてるプラグインXX選
 プラグインXXサンプル

3.  海外製プラグインの紹介ばっかりじゃん

4.  そりゃー、完成品使ったらラクだよね
 どれもこれも似たようなのばっかり

5.  人が使ったライブラリを使うだけ？

6.  動的なデザインってどういうことだろう
 誰も見たことのないUIがみたい

7.  わりかし小規模で作りやすい
 jQueryはカンタン
 JavaScriptが難しい

8.  ゼロから動的UIが作れる
 プラグインの使い方がわかる
 プラグインを改造できる

9.  セレクタ
 $() DOM要素を選択
 イベント駆動
 hover()
 click()
 DOM操作
 show()
 css()

10.  意外と難しい
 クセが多い言語
 JavaScriptには多くの設計ミスと、変わった特
徴が存在している
 「JavaScript The Good Parts」より

11.  ｊQueryを読み込み
 依存ライブラリを読み込み
 プラグインを読み込み
 呼び出す

12. <script src="jquery-1.6.1.js" ></script>
<script src="jquery.dq.beta-0.0.3.js" ></script>
 HTMLファイルから読み込む
 依存ライブラリも一緒に

13. <script>
$(document).ready(function() {
$('.dq-container').dq();
});
</script>
 $(ほげほげ).プラグイン名(オプション);

14.  プラグインの「使い方」
 プラグインの自作には関係ないお話でした

15.  プラグインの「作り方」

16.  プラグイン用のJavaScriptを書く
 jquery.xxx.js

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

18.  「;」を最初に
 匿名関数と名前空間
 グローバル変数 ｊQuery

19.  おまじないではない
 他のライブラリが「;」を忘れたときに

20.  function(){}
 関数名を定義しない関数
 代入して使ったり
 普通の関数
 function func( x1, x2 ) { return x1 + x2; }
 func(1,3);

21. hoimi = 30;
function(){
vehoimi = 100;
var vehoma = +Infinite;
console.log(hoimi); // OK
}
console.log(vehoimi); // OK
console.log(vehoma); // エラー

22.  関数内で(var)宣言された変数は汚染しない
 var hoge
 匿名関数内に変数を閉じる
 グローバル変数より早い
 探す対象が狭い

23.  JavaScript の変数はグローバルスコープ
 ローカル変数
 varで宣言
 var hoge;
 ローカル変数は関数内に限定される

24.  1+2*3
 7
 掛算が先に評価
 (1+2)*3
 9
 加算が先に評価

25.  JavaScriptの匿名関数は「式」
 関数は宣言しただけでは実行されない
 「式」に ()演算子を使うとただちに実行
 var hoge = function(){};
 hoge();

26. ;
(function($){
//ここにプラグインの処理を書く
})(jQuery);
 ｊQuery変数
 $変数に代入
 ()演算子
 匿名関数functionが実行

27.  ｊQueryが公開しているただ一つの変数
 すべての機能が詰め込まれている
 $はエイリアス
 window.jQuery = window.$ = jQuery;
 prototype.jsと使うときは気をつけてね
 プラグインの内部では自由に使えるよ

28. ;
(function($){
$.fn.dq = function(options) {
// 初期値を設定
var defaults = {
containerClass : '.dq-container'
};
// オプションの初期値を設定
var setting = $.extend(defaults, options);
//ここにプラグインの処理を書く
return this;
};
})(jQuery);

29.  $.fn.プラグイン名 = function(options) {};
 jQuery.fn オブジェクトに関数を追加
 jQuery.fn = jQuery.prototype
 同じ名前があると上書きされちゃう

30.  prototypeというプロパティ
 暗黙の参照
 すべての関数オブジェクトが持つ
 プロトタイプベースのオブジェクト指向

31.  とあるオブジェクト.prototype
 いろんなものが追加できる
 オブジェクトから直接参照できる
 wizard.prototype.gira = function(){……}
 wizard.gira();

32. var defaults = {
containerClass : '.dq-container'
};
 連想配列
 JSON形式

33.  var setting = $.extend(defaults, options);
 optionsの内容が優先
 Java風に書くと……
 class options extends defaults
 動的継承するインスタンス
 ディープコピー

34.  メソッド チェイン
 $().css(…).show(…)……
 this
 自分自身を示すもの

35. ;
(function($){
$.fn.dq = function(options) {
// 初期値を設定
var defaults = {
containerClass : '.dq-container'
};
// オプションの初期値を設定
var setting = $.extend(defaults, options);
// ループを回すことにより指定されたすべての要素を処理する
this.each(function(){ });
return this;
};
})(jQuery);

36.  $().dq()は一回しか呼ばれていない
 プラグインの実行は一度だけ
 セレクタの中身がいっぱいあったら？

37.  DOM要素を選択
 $(this)
 $('#ID')
 $('.class', this)
 自分自身の中で'class'属性を持つものを選択

38.  ここまではお約束の話
 ここからはプラグインの本体の処理

39. $(setting.containerClass, this).hide()
 子要素を隠す
 トップ要素は表示したまま

40. $('li', this).hover(
// マウスが乗ったとき
).click(
// クリックしたとき
);
 $('li', this).hover();
 $('li', this).click();
 毎回指定するより高速
 セレクタの処理を一回飛ばせる

41.  li要素
 マウスが上にあるとき

42. <ul class="dq-container">
<li>はなす</li>
<li>じゅもん</li>
<li>どうぐ</li>
</ul>

43. .hover(
function(){ // リスト要素がマウスホバーした場合}
, function(){ // マウスが要素から外れた場合})
 引数に匿名関数
 CSSの疑似クラスと同じ感覚
 プログラムだと動的に扱える

44. $('li', this).hover(
function(){ // リスト要素がマウスホバーした場合
// 三角形を表示する
$(this).css('background', 'url(img/allow.png) ……');
, function(){ // マウスが要素から外れた場合
// 三角形を隠す
$(this).css('background', 'none');
})
 $(‘li’, this)
 プラグインを呼び出したときの要素
 $(this)
 li要素

45.  クリック時の動作
 下位コンテナを表示
 コンテナがなければ閉じる

46. <ul class="dq-container">
<li>はなす
<div class="dq-container">
こんにちは、DQ風インターフェースシステムへようこそ
</div>
</li>
<li>じゅもん</li>
<li>どうぐ
<ul class="dq-container">
<li class="dq-caption">どうぐ</li>
<li>やくそう</li>
<li>やくそう</li>
</ul>
</li>
</ul>

47. .click(function(event){})
 click = mousedown + mouseup
 eventオブジェクト

48. ここをクリック
すると
ここもクリックされたことになる

49. event.stopPropagation();
 イベントは親要素へ伝播する
 伝播を止める

50. var child = $(this).children(setting.containerClass);
// 子要素だけを操作
if (child.length){ // 子要素にコンテナがある場合
// コンテナを開く処理
} else { // 子要素にコンテナがない場合
// コンテナを閉じる処理
}
 lengthで判定する

51.  $().addClass("dq-console-open").show();
 $().hide().removeClass("dq-console-open");
 コンテナを表示
 マーキングクラスを追加
• クラスを追加して開く
• 閉じてからクラスを取り除く

52. // 開いているウィンドウをすべて閉じる
$(".dq-console-open").each(function(){
// 非表示にした後、マーキングクラスを除去
$(this).hide().removeClass("dq-console-open");
})

53.  マーカーで指定
 dq-caption

54. <ul class="dq-container">
……
<li>どうぐ
<ul class="dq-container">
<li class="dq-caption">どうぐ</li>
<li>やくそう</li>
<li>やくそう</li>
</ul>
</li>
</ul>

55.  $().outerHeight()
 DOM要素の高さ
 $().outerWidth()
 DOM要素の幅

56.  (コンテナの幅÷2)-(どうぐの幅÷2)
 -(どうぐの高さ÷2)

57. // サイズの計算に影響があるので先に指定
caption.css({……});
// 横はセンターに来るように配置
var left = Math.round(child.outerWidth() / 2 - caption.outerWidth() / 2);
// 縦は上側に食い込ませる
var top = Math.round( - caption.outerHeight() / 2 );
// 計算結果をCSSで反映
caption.css({……});

58.  マウスが斜めに移動
 コンテナが閉じてしまう
 別のコンテナがひらく

59. var sideup = function(element){
$(element).hide().removeClass("dq-console-open");
}
 匿名関数を変数に代入する

60. timerId = setTimeout(sideup, 1000, this);
 タイマーをセット
 1秒後にコンテナを閉じる

61. if (timerId) {
clearTimeout(timerId);
}
 タイマをキャンセル
 1秒以内に戻ってきた場合

62. // マウスが外れたときに実行する関数のタイマID
var timerId;
// コンテナとマウスの挙動
$(setting.containerClass, this).hover(
function(){ // コンテナ上にある場合は何もしない
if (timerId) { // タイマーがセットされていた場合はキャンセルする
clearTimeout(timerId);
}
},
function(){ // コンテナからマウスが外れた場合は隠す
var sideup = function(element){
$(element).hide().removeClass("dq-console-open");
}
// タイマーで実行を少し遅らせる
timerId = setTimeout(sideup, 1000, this);
});

63.  プラグインのお約束
 難易度:低
 jQuery本体を知る
 難易度:中
 JavaScriptを知る
 難易度:極限

64.  作りながら考える
 動かしてみないとわからない？
 キチンと設計できるのか？
 サーバサイドとの連携

65.  何がユーザにとって幸せか？
 おもてなしの心？
 動的なデザイン
 動かしながらじゃないとわからない？
 誰も見たことのないUIがみたい