OSC京都2011

3,936 views
3,915 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,936
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OSC京都2011

  1. 1. はがねのつるぎ
  2. 2.  jQuery日本語リファレンス イケてるプラグインXX選 プラグインXXサンプル
  3. 3.  海外製プラグインの紹介ばっかりじゃん
  4. 4.  そりゃー、完成品使ったらラクだよね どれもこれも似たようなのばっかり
  5. 5.  人が使ったライブラリを使うだけ?
  6. 6.  動的なデザインってどういうことだろう 誰も見たことのないUIがみたい
  7. 7.  わりかし小規模で作りやすい jQueryはカンタン JavaScriptが難しい
  8. 8.  ゼロから動的UIが作れる プラグインの使い方がわかる プラグインを改造できる
  9. 9.  セレクタ  $() DOM要素を選択 イベント駆動  hover()  click() DOM操作  show()  css()
  10. 10.  意外と難しい クセが多い言語 JavaScriptには多くの設計ミスと、変わった特 徴が存在している  「JavaScript The Good Parts」より
  11. 11.  jQueryを読み込み 依存ライブラリを読み込み プラグインを読み込み 呼び出す
  12. 12. <script src="jquery-1.6.1.js" ></script><script src="jquery.dq.beta-0.0.3.js" ></script> HTMLファイルから読み込む 依存ライブラリも一緒に
  13. 13. <script> $(document).ready(function() { $(.dq-container).dq(); });</script> $(ほげほげ).プラグイン名(オプション);
  14. 14.  プラグインの「使い方」 プラグインの自作には関係ないお話でした
  15. 15.  プラグインの「作り方」
  16. 16.  プラグイン用のJavaScriptを書く jquery.xxx.js
  17. 17. ;(function($){ //ここにプラグインの処理を書く})(jQuery);
  18. 18.  「;」を最初に 匿名関数と名前空間 グローバル変数 jQuery
  19. 19.  おまじないではない 他のライブラリが「;」を忘れたときに
  20. 20.  function(){} 関数名を定義しない関数 代入して使ったり 普通の関数  function func( x1, x2 ) { return x1 + x2; }  func(1,3);
  21. 21. hoimi = 30;function(){ vehoimi = 100; var vehoma = +Infinite; console.log(hoimi); // OK}console.log(vehoimi); // OKconsole.log(vehoma); // エラー
  22. 22.  関数内で(var)宣言された変数は汚染しない var hoge 匿名関数内に変数を閉じる グローバル変数より早い  探す対象が狭い
  23. 23.  JavaScript の変数はグローバルスコープ ローカル変数  varで宣言  var hoge; ローカル変数は関数内に限定される
  24. 24.  1+2*3  7  掛算が先に評価 (1+2)*3  9  加算が先に評価
  25. 25.  JavaScriptの匿名関数は「式」 関数は宣言しただけでは実行されない 「式」に ()演算子を使うとただちに実行 var hoge = function(){}; hoge();
  26. 26. ;(function($){ //ここにプラグインの処理を書く})(jQuery); jQuery変数  $変数に代入 ()演算子  匿名関数functionが実行
  27. 27.  jQueryが公開しているただ一つの変数 すべての機能が詰め込まれている $はエイリアス  window.jQuery = window.$ = jQuery;  prototype.jsと使うときは気をつけてね  プラグインの内部では自由に使えるよ
  28. 28. ;(function($){ $.fn.dq = function(options) { // 初期値を設定 var defaults = { containerClass : .dq-container }; // オプションの初期値を設定 var setting = $.extend(defaults, options); //ここにプラグインの処理を書く return this; };})(jQuery);
  29. 29.  $.fn.プラグイン名 = function(options) {}; jQuery.fn オブジェクトに関数を追加 jQuery.fn = jQuery.prototype 同じ名前があると上書きされちゃう
  30. 30.  prototypeというプロパティ 暗黙の参照  すべての関数オブジェクトが持つ プロトタイプベースのオブジェクト指向
  31. 31.  とあるオブジェクト.prototype いろんなものが追加できる オブジェクトから直接参照できる wizard.prototype.gira = function(){……} wizard.gira();
  32. 32. var defaults = { containerClass : .dq-container}; 連想配列 JSON形式
  33. 33.  var setting = $.extend(defaults, options); optionsの内容が優先 Java風に書くと……  class options extends defaults  動的継承するインスタンス ディープコピー
  34. 34.  メソッド チェイン $().css(…).show(…)…… this  自分自身を示すもの
  35. 35. ;(function($){ $.fn.dq = function(options) { // 初期値を設定 var defaults = { containerClass : .dq-container }; // オプションの初期値を設定 var setting = $.extend(defaults, options); // ループを回すことにより指定されたすべての要素を処理する this.each(function(){ }); return this; };})(jQuery);
  36. 36.  $().dq()は一回しか呼ばれていない  プラグインの実行は一度だけ セレクタの中身がいっぱいあったら?
  37. 37.  DOM要素を選択 $(this) $(#ID) $(.class, this)  自分自身の中でclass属性を持つものを選択
  38. 38.  ここまではお約束の話 ここからはプラグインの本体の処理
  39. 39. $(setting.containerClass, this).hide() 子要素を隠す トップ要素は表示したまま
  40. 40. $(li, this).hover( // マウスが乗ったとき).click( // クリックしたとき); $(li, this).hover(); $(li, this).click(); 毎回指定するより高速  セレクタの処理を一回飛ばせる
  41. 41.  li要素 マウスが上にあるとき
  42. 42. <ul class="dq-container"> <li>はなす</li> <li>じゅもん</li> <li>どうぐ</li></ul>
  43. 43. .hover( function(){ // リスト要素がマウスホバーした場合} , function(){ // マウスが要素から外れた場合}) 引数に匿名関数 CSSの疑似クラスと同じ感覚 プログラムだと動的に扱える
  44. 44. $(li, this).hover( function(){ // リスト要素がマウスホバーした場合 // 三角形を表示する $(this).css(background, url(img/allow.png) ……); , function(){ // マウスが要素から外れた場合 // 三角形を隠す $(this).css(background, none); }) $(‘li’, this)  プラグインを呼び出したときの要素 $(this)  li要素
  45. 45.  クリック時の動作  下位コンテナを表示  コンテナがなければ閉じる
  46. 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. 47. .click(function(event){}) click = mousedown + mouseup eventオブジェクト
  48. 48. ここをクリック すると ここもクリックされたことになる
  49. 49. event.stopPropagation(); イベントは親要素へ伝播する 伝播を止める
  50. 50. var child = $(this).children(setting.containerClass);// 子要素だけを操作if (child.length){ // 子要素にコンテナがある場合 // コンテナを開く処理} else { // 子要素にコンテナがない場合 // コンテナを閉じる処理} lengthで判定する
  51. 51.  $().addClass("dq-console-open").show(); $().hide().removeClass("dq-console-open"); コンテナを表示 マーキングクラスを追加 • クラスを追加して開く • 閉じてからクラスを取り除く
  52. 52. // 開いているウィンドウをすべて閉じる$(".dq-console-open").each(function(){ // 非表示にした後、マーキングクラスを除去 $(this).hide().removeClass("dq-console-open");})
  53. 53.  マーカーで指定 dq-caption
  54. 54. <ul class="dq-container"> …… <li>どうぐ <ul class="dq-container"> <li class="dq-caption">どうぐ</li> <li>やくそう</li> <li>やくそう</li> </ul> </li></ul>
  55. 55.  $().outerHeight()  DOM要素の高さ $().outerWidth()  DOM要素の幅
  56. 56.  (コンテナの幅÷2)-(どうぐの幅÷2) -(どうぐの高さ÷2)
  57. 57. // サイズの計算に影響があるので先に指定caption.css({……});// 横はセンターに来るように配置var left = Math.round(child.outerWidth() / 2 - caption.outerWidth() / 2);// 縦は上側に食い込ませるvar top = Math.round( - caption.outerHeight() / 2 );// 計算結果をCSSで反映caption.css({……});
  58. 58.  マウスが斜めに移動 コンテナが閉じてしまう 別のコンテナがひらく
  59. 59. var sideup = function(element){ $(element).hide().removeClass("dq-console-open");} 匿名関数を変数に代入する
  60. 60. timerId = setTimeout(sideup, 1000, this); タイマーをセット 1秒後にコンテナを閉じる
  61. 61. if (timerId) { clearTimeout(timerId);} タイマをキャンセル 1秒以内に戻ってきた場合
  62. 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. 63.  プラグインのお約束  難易度:低 jQuery本体を知る  難易度:中 JavaScriptを知る  難易度:極限
  64. 64.  作りながら考える 動かしてみないとわからない? キチンと設計できるのか? サーバサイドとの連携
  65. 65.  何がユーザにとって幸せか?  おもてなしの心? 動的なデザイン  動かしながらじゃないとわからない? 誰も見たことのないUIがみたい

×