Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OSC京都2011

4,709 views

Published on

  • Be the first to comment

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がみたい

×