Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
kintone   JavaScript16-C-6            Developers Summit 2012
kintone        @yo_wakaJavaScript                         kintone        @hikoma    Developers Summit 2012
2     kintone    Developers Summit 2012
Developers Summit 2012
What’s kintone•••     11           Developers Summit 2012
What’s kintone    Developers Summit 2012
What’s kintone  D&D        Developers Summit 2012
What’s kintone    Developers Summit 2012
What’s kintone    Developers Summit 2012
What’s kintone    Developers Summit 2012
What’s kintone    Developers Summit 2012
What’s kintone    Developers Summit 2012
kintone    @yo_waka Developers Summit 2012
kintone JavaScript•                               70,000•                      Closure Library      jQuery•   Closure Libr...
kintone JavaScript•   JavaScript               DOM•                                         XHR   API                 JSON...
JavaScript                        UI         Developers Summit 2012
Developers Summit 2012
•        &•   20••             Developers Summit 2012
•        &•   20••             Developers Summit 2012
&                        UIDevelopers Summit 2012
Drag and Drop      dragovercanvas,dropcanvas,dragoutcanvas,afterdragstartcanvas,dragendcanvas         Control             ...
Drag and Drop      dragovercanvas,dropcanvas,dragoutcanvas,afterdragstartcanvas,dragendcanvas         Control             ...
Developers Summit 2012
•   click            (dispatchEvent              )                                                 drag              drag ...
“removecontrol”          removeControl                       removeControlControl                                 Row     ...
•                                           Map    // Foo    foo.listen(bar, ‘awesome’, this.handleAwesome_, false, this);...
•   DOM••   DOM          Developers Summit 2012
Developers Summit 2012
DOM/     Developers Summit 2012
IE   1         Developers Summit 2012
•             DOM                                  JS                                               this•      IE   Flash ...
•   Chrome FF•   IE9                Developers Summit 2012
•         null•   SWF•                 Developers Summit 2012
Developers Summit 2012
50                  •              50                  •   IE8 10                           orzDevelopers Summit 2012
•   HTML                                  iFrame       50   x1            1    =50•                 Developers Summit 2012
•       UI    Developers Summit 2012
•   1   1•        UI              Developers Summit 2012
Deferred•   “           ”                                                    Ajax    var doAsync = function() {           ...
Deferred•   Deferred           setTimeout•                 DOM               Developers Summit 2012
Deferredcybozu.async.Deferred.prototype.forEach = function(iterable, callback, opt_interval, opt_scope) {   // build recur...
Deferred••   Deferred      forEach      Deferred    Off                Developers Summit 2012
≒•                             UI•                             UI    Developers Summit 2012
UI         ≒Developers Summit 2012
UI     Developers Summit 2012
••1                     JS     300•            300HTTP•           Developers Summit 2012
JavaScript•   kintone    Closure Compiler•   Advanced Optimizations(                  )               JS                  ...
JavaScript                  ≒JavaScript         Developers Summit 2012
•         UI                      JavaScript    UI•             JavaScript         Developers Summit 2012
kintone      @hikoma         JS                (^^  Developers Summit 2012
Developers Summit 2012
Developers Summit 2012
Nächste SlideShare
Wird geladen in …5
×

デブサミ2012 kintoneの表と裏 - 表編

Developers Summit 2012(デブサミ2012)で発表した資料のJavaScript編です。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

デブサミ2012 kintoneの表と裏 - 表編

  1. 1. kintone JavaScript16-C-6 Developers Summit 2012
  2. 2. kintone @yo_wakaJavaScript kintone @hikoma Developers Summit 2012
  3. 3. 2 kintone Developers Summit 2012
  4. 4. Developers Summit 2012
  5. 5. What’s kintone••• 11 Developers Summit 2012
  6. 6. What’s kintone Developers Summit 2012
  7. 7. What’s kintone D&D Developers Summit 2012
  8. 8. What’s kintone Developers Summit 2012
  9. 9. What’s kintone Developers Summit 2012
  10. 10. What’s kintone Developers Summit 2012
  11. 11. What’s kintone Developers Summit 2012
  12. 12. What’s kintone Developers Summit 2012
  13. 13. kintone @yo_waka Developers Summit 2012
  14. 14. kintone JavaScript• 70,000• Closure Library jQuery• Closure Library UI Developers Summit 2012
  15. 15. kintone JavaScript• JavaScript DOM• XHR API JSON• UI Developers Summit 2012
  16. 16. JavaScript UI Developers Summit 2012
  17. 17. Developers Summit 2012
  18. 18. • &• 20•• Developers Summit 2012
  19. 19. • &• 20•• Developers Summit 2012
  20. 20. & UIDevelopers Summit 2012
  21. 21. Drag and Drop dragovercanvas,dropcanvas,dragoutcanvas,afterdragstartcanvas,dragendcanvas Control dragstarttoolbox,afterdragstarttoolbox,dragendtoolbox,drag mouseovergrippable canvasstartrelocation,canvasendrelocation mouseoutgrippable canvasoverfromtoolbox,canvasoverfromcanvas mouseovermenu canvasoutfromtoolbox,canvasoutfromcanvas mouseoutmenu canvasdropfromtoolbox,canvasdropfromcanvas, mousedownsetting canvasdrag,canvasmove,canvasfancymove,canvasdelete mousedownremove mouseoverrwidthresizer mouseoutwidthresizer mousedownwidthresizer mouseoverrheightresizer ToolBox mouseoutheightresizer mousedownheightresizer toolboxitemadd Canvas notifyadd,notifyremovetoolboxitemremove dragstartwidthresizer mouseover toolboxitemenable dragwidthresizer mouseouttoolboxitemdisable dragendwidthresizer addcontrol removecontrol dragstartheightresizer addfield dragheightresizer removefield dragendheightresizer, removecontrol, savesetting Developers Summit 2012
  22. 22. Drag and Drop dragovercanvas,dropcanvas,dragoutcanvas,afterdragstartcanvas,dragendcanvas Control dragstarttoolbox,afterdragstarttoolbox,dragendtoolbox,drag mouseovergrippable canvasstartrelocation,canvasendrelocation mouseoutgrippable canvasoverfromtoolbox,canvasoverfromcanvas mouseovermenu canvasoutfromtoolbox,canvasoutfromcanvas mouseoutmenu canvasdropfromtoolbox,canvasdropfromcanvas, mousedownsetting canvasdrag,canvasmove,canvasfancymove,canvasdelete mousedownremove mouseoverrwidthresizer 50 mouseoutwidthresizer mousedownwidthresizer mouseoverrheightresizer ToolBox mouseoutheightresizer mousedownheightresizer toolboxitemadd Canvas notifyadd,notifyremovetoolboxitemremove dragstartwidthresizer mouseover toolboxitemenable dragwidthresizer mouseouttoolboxitemdisable dragendwidthresizer addcontrol removecontrol dragstartheightresizer addfield dragheightresizer removefield dragendheightresizer, removecontrol, savesetting Developers Summit 2012
  23. 23. Developers Summit 2012
  24. 24. • click (dispatchEvent ) drag drag dropToolBox DragDropManager Canvas controladd Developers Summit 2012
  25. 25. “removecontrol” removeControl removeControlControl Row Canvas repaint repaintControl repaintControl Developers Summit 2012
  26. 26. • Map // Foo foo.listen(bar, ‘awesome’, this.handleAwesome_, false, this); // EventProxy.add(bar, ‘awesome’, foo.handleAwesome_, false, foo); // Bar this.dispatchEvent(‘awesome’); // var listeners = EventProxyt.get(bar, ‘awesome’); for (var i = 0, len = listeners.length; i < len; i++) { var listener = listeners[i]; listener[0].call(listener[1], arg); } Developers Summit 2012
  27. 27. • DOM•• DOM Developers Summit 2012
  28. 28. Developers Summit 2012
  29. 29. DOM/ Developers Summit 2012
  30. 30. IE 1 Developers Summit 2012
  31. 31. • DOM JS this• IE Flash SWF• HTML DOM Developers Summit 2012
  32. 32. • Chrome FF• IE9 Developers Summit 2012
  33. 33. • null• SWF• Developers Summit 2012
  34. 34. Developers Summit 2012
  35. 35. 50 • 50 • IE8 10 orzDevelopers Summit 2012
  36. 36. • HTML iFrame 50 x1 1 =50• Developers Summit 2012
  37. 37. • UI Developers Summit 2012
  38. 38. • 1 1• UI Developers Summit 2012
  39. 39. Deferred• “ ” Ajax var doAsync = function() { var deferred = doAsync(); var deferred = new Deferred(); deferred.addCallback(function(result) { setTimeout(function() { // // }) deferred.callback(); // .addErrback(function(err) { }, 10000); // return deferred; }); }; Developers Summit 2012
  40. 40. Deferred• Deferred setTimeout• DOM Developers Summit 2012
  41. 41. Deferredcybozu.async.Deferred.prototype.forEach = function(iterable, callback, opt_interval, opt_scope) { // build recursion deferred tree var d = this; iterable.forEach(function(item idx) { var cb = partial(callback, item, idx); d = d.next(cb, opt_interval, opt_scope); }); return d;};cybozu.async.Deferred.prototype.next = function(fn, opt_interval, opt_scope) { var interval = opt_interval || 10; // create async deferred var nextDeferred = new cybozu.async.Deferred(opt_scope); nextDeferred.addCallback(fn); this.addCallback(function() { var self = this; setTimeout(function() { nextDeferred.callback(self.result_); }, interval); }); return nextDeferred;}; Developers Summit 2012
  42. 42. Deferred•• Deferred forEach Deferred Off Developers Summit 2012
  43. 43. ≒• UI• UI Developers Summit 2012
  44. 44. UI ≒Developers Summit 2012
  45. 45. UI Developers Summit 2012
  46. 46. ••1 JS 300• 300HTTP• Developers Summit 2012
  47. 47. JavaScript• kintone Closure Compiler• Advanced Optimizations( ) JS compile• 1 300KB 90KB• HTTP 1 Developers Summit 2012
  48. 48. JavaScript ≒JavaScript Developers Summit 2012
  49. 49. • UI JavaScript UI• JavaScript Developers Summit 2012
  50. 50. kintone @hikoma JS (^^ Developers Summit 2012
  51. 51. Developers Summit 2012
  52. 52. Developers Summit 2012

×