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.

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

39,845 views

Published on

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

Published in: Technology

デブサミ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

×