1.
kintone
JavaScript
16-C-6
Developers Summit 2012

2.
kintone
@yo_waka
JavaScript
kintone
@hikoma
Developers Summit 2012

3.
2 kintone
Developers Summit 2012

4.
Developers Summit 2012

5.
What’s kintone
•
•
• 11
Developers Summit 2012

6.
What’s kintone
Developers Summit 2012

7.
What’s kintone
D&D
Developers Summit 2012

8.
What’s kintone
Developers Summit 2012

9.
What’s kintone
Developers Summit 2012

10.
What’s kintone
Developers Summit 2012

11.
What’s kintone
Developers Summit 2012

12.
What’s kintone
Developers Summit 2012

13.
kintone
@yo_waka
Developers Summit 2012

14.
kintone JavaScript
• 70,000
• Closure Library
jQuery
• Closure Library
UI
Developers Summit 2012

15.
kintone JavaScript
• JavaScript DOM
• XHR API
JSON
• UI
Developers Summit 2012

16.
JavaScript UI
Developers Summit 2012

17.
Developers Summit 2012

18.
• &
• 20
•
•
Developers Summit 2012

19.
• &
• 20
•
•
Developers Summit 2012

20.
& UI
Developers Summit 2012

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,notifyremove
toolboxitemremove dragstartwidthresizer
mouseover
toolboxitemenable dragwidthresizer
mouseout
toolboxitemdisable dragendwidthresizer
addcontrol
removecontrol dragstartheightresizer
addfield dragheightresizer
removefield dragendheightresizer,
removecontrol,
savesetting
Developers Summit 2012

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,notifyremove
toolboxitemremove dragstartwidthresizer
mouseover
toolboxitemenable dragwidthresizer
mouseout
toolboxitemdisable dragendwidthresizer
addcontrol
removecontrol dragstartheightresizer
addfield dragheightresizer
removefield dragendheightresizer,
removecontrol,
savesetting
Developers Summit 2012

23.
Developers Summit 2012

24.
• click
(dispatchEvent )
drag
drag drop
ToolBox DragDropManager Canvas
controladd
Developers Summit 2012

25.
“removecontrol”
removeControl removeControl
Control Row Canvas
repaint
repaint
Control repaint
Control
Developers Summit 2012

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.
• DOM
•
• DOM
Developers Summit 2012

28.
Developers Summit 2012

29.
DOM
/
Developers Summit 2012

30.
IE 1
Developers Summit 2012

31.
• DOM JS
this
• IE Flash
SWF
• HTML DOM
Developers Summit 2012

32.
• Chrome FF
• IE9
Developers Summit 2012

33.
• null
• SWF
•
Developers Summit 2012

34.
Developers Summit 2012

35.
50
• 50
• IE8 10
orz
Developers Summit 2012

36.
• HTML iFrame
50 x1 1 =50
•
Developers Summit 2012

37.
•
UI
Developers Summit 2012

38.
• 1 1
• UI
Developers Summit 2012

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.
Deferred
• Deferred setTimeout
• DOM
Developers Summit 2012

41.
Deferred
cybozu.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.
Deferred
•
• Deferred
forEach Deferred
Off
Developers Summit 2012

43.
≒
•
UI
•
UI
Developers Summit 2012

44.
UI
≒
Developers Summit 2012

45.
UI
Developers Summit 2012

46.
•
•1 JS
300
• 300HTTP
•
Developers Summit 2012

47.
JavaScript
• kintone Closure Compiler
• Advanced Optimizations( )
JS compile
• 1 300KB 90KB
• HTTP 1
Developers Summit 2012

48.
JavaScript
≒
JavaScript
Developers Summit 2012

49.
• UI JavaScript
UI
•
JavaScript
Developers Summit 2012

50.
kintone
@hikoma
JS (^^
Developers Summit 2012

51.
Developers Summit 2012

52.
Developers Summit 2012