Slide 1
Slide 1 text
Browser Computing
Structure
Frontrend in Fukuoka
@1000ch
Slide 2
Slide 2 text
@1000ch
Slide 3
Slide 3 text
Frontend Developer
Slide 4
Slide 4 text
࣍
มԽ͢ΔWebͱJavaScriptͷׂ
ϒϥβ͕ԿΛ͍ͯ͠Δ͔ΛΔ
ϒϥβ͕͘ͳΔݪҼΛΔ
࠷దԽΞϓϩʔν
Slide 5
Slide 5 text
มԽ͢ΔWebͱ
JavaScriptͷׂ
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
• ςΩετϕʔεͷWebαΠτ
• ίϯςϯπͷߋ৽ભҠ͕த৺
• ০ͱ͔ͱ͔…
੩తͳWeb
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
• ඇಉظ௨৴ʹΑΔίϯςϯπͷߋ৽
ʢGoogleϚοϓɾGoogleαδΣετʣ
• JavaScript͕μΠφϛοΫͳWebαΠτͷ
ՄೳੑΛHTMLʹͨΒͨ͠
ಈతͳWeb
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
• HTML5CSS3ͱ͍ͬͨɺ
ٕज़ͷඪ४Խͱඈ༂తͳਐԽ
• ϒϥβͰग़དྷΔ͜ͱ͕૿͑ͨ
(WebGLɾWebAudioɾWebSocket…)
ϦονͳWeb
Slide 12
Slide 12 text
JavaScriptͳ͠ʹ
HTML5ΛޠΕͳ͍
Slide 13
Slide 13 text
ରԠͷ͠͞
ϕϯμʔͷ×OSͷόʔδϣϯ
ʹൺྫͯ͠૿Ճ͢Δ࣮ϦεΫ
Slide 14
Slide 14 text
͔֬ଘࡏ͢Δίετ
ϚγϯεϖοΫʹࠨӈ͞ΕΔ্ʹ
ϞόΠϧͩͱͳ͓͞Β͕ࠩݦஶ
Slide 15
Slide 15 text
ύϑΥʔϚϯε͕
٘ਜ਼ʹͳΓ͕ͪ
Slide 16
Slide 16 text
Amazon
100msͷߴԽ
ച্1%૿Ճ
Mozilla
Google
2200msͷߴԽ
μϯϩʔυ15.4%૿Ճ
400msͷߴԽ
ݕࡧճ0.59%૿Ճ
Slide 17
Slide 17 text
ύϑΥʔϚϯε
࠷ॏཁͳUXࢦඪ
ύϑΥʔϚϯεWebαΠτͷ࣭Ͱ͋Δ
͔ͬ͜Α͍ͯ͘αΠτʹϢʔβʔຬ͠ͳ͍
Slide 18
Slide 18 text
ϒϥβ͕
ԿΛ͍ͯ͠Δ͔ΛΔ
Slide 19
Slide 19 text
σʔλͷཁٻͱμϯϩʔυ
URLͷೖྗϖʔδભҠ
HTML
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
Slide 20
Slide 20 text
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
σʔλͷཁٻͱμϯϩʔυ
URL
HTMLCSSͷղੳͱඳը
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
Slide 21
Slide 21 text
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
σʔλͷཁٻͱμϯϩʔυ
URL
HTML
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
Slide 22
Slide 22 text
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
σʔλͷཁٻͱμϯϩʔυ
URLͷೖྗϖʔδભҠ
HTMLCSSͷղੳͱඳը
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
Slide 23
Slide 23 text
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
σʔλͷཁٻͱμϯϩʔυ
URLͷೖྗϖʔδભҠ
HTMLCSSͷղੳͱඳը
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
Slide 24
Slide 24 text
σʔλͷཁٻͱμϯϩʔυ
URL
HTML
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
ϖʔδͷϩʔυ։͔࢝Β
දࣔ͞ΕΔ·Ͱ
Slide 25
Slide 25 text
σʔλͷཁٻͱμϯϩʔυ
URL
HTML
ϨϯμʔπϦʔͷϨΠΞτͱϖΠϯτ
ϢʔβʔΞΫγϣϯͷԠ
ΫϦοΫεΫϩʔϧͷΠϯλϥΫγϣϯ
ϖʔδ͕දࣔ͞Ε͔ͯΒ
࣍ͷભҠ·Ͱͣͬͱ
Slide 26
Slide 26 text
Render Compute
Network
ύϑΥʔϚϯεͷ3େཁૉ
Slide 27
Slide 27 text
Render Compute
Network
ϖʔδදࣔ·ͰͷΠχγϟϧίετ
→ϑΝʔετΠϯϓϨογϣϯ
Slide 28
Slide 28 text
Render Compute
Network
εΫϩʔϧͷΒ͔͞ϖʔδԠ
→Ϣʔβʔͷ͍৺
Slide 29
Slide 29 text
Chrome DevTools
ϒϥβɺͦͯ͠࠷ڧͷ։ൃऀπʔϧ
Firebug͍͍͚ͲͬͺChrome
Command + option + i
Slide 30
Slide 30 text
Google Chrome Canary
Chromeͷ։ൃऀ͚Ϗϧυ
DevToolͷ৽ػೳΛ͍ͪૣ͘ࢼͤΔ
ͨ·ʹෆ҆ఆ…
Slide 31
Slide 31 text
DevTools > Network
Network
HTTPϦΫΤετͷ
ϦιʔεαΠζͷνΣοΫ
όουϦΫΤετ͕ͳ͍͔Ͳ͏͔
ωοτϫʔΫपΓͷ࠷దԽ
Slide 32
Slide 32 text
DevTools > Timeline
Render
FPSͷͷνΣοΫ
ϨΠΞτϖΠϯτͷλΠϛϯά
ΠϕϯτͷൃՐGCͷ࣮ߦܗ
ϒϥβ͕ͲͷΑ͏ͳॲཧ
Λ͍ͯ͠Δ͔େମΘ͔Δ
Slide 33
Slide 33 text
DevTools > Profiles
Compute
JavaScriptͷ࣮ߦίετ
ώʔϓྖҬʹஔ͔ΕΔΦϒδΣΫτ
TimelineΑΓࡉ͔͍ϝϞϦͷঢ়ଶ
εΫϦϓτपΓͷௐࠪ
Slide 34
Slide 34 text
Compute
ࠓComputingͷ
Slide 35
Slide 35 text
Keep 60FPS
• FPS = Frames Per Second
• ϒϥβ1ඵؒʹ60ճϦϑϨογϡ͢Δ
• 60FPSΛҡ࣋͢Δʹ1ϑϨʔϜͷॲཧΛ16.67ms
ʹऩΊΔ (16.67ms=1000ms / 60FPs)
• Ұൠతʹ30FPSग़͍ͯΕΒ͔Ͱ͋Δ
Slide 36
Slide 36 text
ϒϥβͷॲཧ
Load Script Render Paint Load Script Render
Slide 37
Slide 37 text
Load Script Render Paint
der Paint Load Sc
ϒϥβͷॲཧ
16.67ms
Slide 38
Slide 38 text
Paint Paint
ಛʹॲཧ͕ͳ͍ͱ͖
16.67ms
Slide 39
Slide 39 text
20FPSͷαϯϓϧ
http://codepen.io/paulirish/full/nkwKs
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
60FPSͷαϯϓϧ
http://codepen.io/1000ch/full/KbLHh
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
ϒϥβ͕
͘ͳΔݪҼΛΔ
Slide 44
Slide 44 text
Case#1 ॏ͍ॲཧ
͕͔͔࣌ؒΔͱϖΠϯτΕΔ
Slide 45
Slide 45 text
Script͕͍͠ͱ…
Load Script Render Paint
der Paint Load
16.67msʹऩ·Βͳ͍
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Case#2 GC
Scriptͷ࣮ߦΛࢭΊͯ͠·͏
Slide 50
Slide 50 text
Garbage Collection?
• JavaScriptͰɺϝϞϦͷׂͱղ์͕JavaScriptͷΤ
ϯδϯʹΑͬͯࣗಈͰߦΘΕΔɻͦͷΈ͕Garbage
CollectionͰ͋Δ
• ࠷ۙͷߴਫ४ݴޠʹ΄ͱΜͲඋΘ͍ͬͯΔ
• ͍ΘϧϯόͷΑ͏ͳଘࡏ by @ahomu
Slide 51
Slide 51 text
GCൃੜͷλΠϛϯά
• ϒϥβʹΑͬͯҰఆͷपظͰ࣮ߦ͞ΕΔଞɺϝϞϦ͕গ
ͳ͘ͳ͖ͬͯͨΓɺෆཁͳϝϞϦ͕ग़ݱ͢Δͱ࣮ߦ͞ΕΔ
• JavaScriptͰ࣮ߦͷλΠϛϯάΛίϯτϩʔϧ͢
Δज़ͳ͍
Slide 52
Slide 52 text
Window
A
B
D
C
E
Slide 53
Slide 53 text
Window
A
B
D
C
E
Slide 54
Slide 54 text
Window
A
B
D
C
E
GCͷରʹͳΔ
Slide 55
Slide 55 text
GCͷؒScript͕ࢭ·Δ
Load Render Paint
der Paint GC Load
16.67msʹऩ·Βͳ͍
Script
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Case#3 ϝϞϦϦʔΫ
Կ͔ͱѱӨڹΛٴ΅͢
Slide 60
Slide 60 text
ϝϞϦϦʔΫ
• ϝϞϦྖҬ͕ѹഭ͞ΕΔͱඞવతʹϒϥβͷ࣮ߦ
Լ͢Δ
• ϝϞϦͷճऩϖʔδભҠ͔࣌ɺGarbage Collectionͷ
࣮ߦʹΑΓߦΘΕΔ
• ϝϞϦϦʔΫͷදతͳݪҼ…?
Slide 61
Slide 61 text
Understand memory leaks
http://www.ibm.com/developerworks/web/library/wa-jsmemory/
Slide 62
Slide 62 text
ίϯιʔϧ
॥ࢀর
Ϋϩʔδϟ
λΠϚʔ
Slide 63
Slide 63 text
ίϯιʔϧ
॥ࢀর
Ϋϩʔδϟ
λΠϚʔ
Slide 64
Slide 64 text
function Timer() {
this.timerId = setInterval(function() {
console.log('This is timer log.');
}, 1000);
}
!
!
!
var timer = new Timer();
timer = null;
Slide 65
Slide 65 text
function Timer() {
this.timerId = setInterval(function() {
console.log('This is timer log.');
}, 1000);
}
!
!
!
var timer = new Timer();
timer = null;
ݺͼग़͠ݩΛഁغͯ͠
λΠϚʔ͕࣮ߦ͞Εଓ͚Δ
Slide 66
Slide 66 text
function Timer() {
this.timerId = setInterval(function() {
console.log('This is timer log.');
}, 1000);
this.stop = function() {
clearInterval(this.timerId);
};
}
!
!
!
var timer = new Timer();
timer.stop();
timer = null;
Slide 67
Slide 67 text
function Timer() {
this.timerId = setInterval(function() {
console.log('This is timer log.');
}, 1000);
this.stop = function() {
clearInterval(this.timerId);
};
}
!
!
!
var timer = new Timer();
timer.stop();
timer = null;
λΠϚʔ
ͪΌΜͱࢭΊΔ͜ͱʂ
Slide 68
Slide 68 text
Ϋϩʔδϟ
λΠϚʔ
ίϯιʔϧ
॥ࢀর
Slide 69
Slide 69 text
function Closure() {
var value = 1000;
return function() {
return value;
};
}
Slide 70
Slide 70 text
function Closure() {
var value = 1000;
return function() {
return value;
};
}
value͔ؔΒ
ࢀর͞Εଓ͚ͯ͠·͏
Slide 71
Slide 71 text
function Closure() {
var value = 1000;
return function() {
var another = 2000;
return another;
};
}
Slide 72
Slide 72 text
function Closure() {
var value = 1000;
return function() {
var another = 2000;
return another;
};
}
valueࢀর͞Εͳ͘ͳΔ
ͷͰGCʹճऩ͞ΕΔ
Slide 73
Slide 73 text
॥ࢀর ίϯιʔϧ
λΠϚʔ Ϋϩʔδϟ
Slide 74
Slide 74 text
var family = [];
!
var child = {
age: 10
container: family
};
!
var parent = {
child: child,
container: family
};
!
family.push(child);
family.push(parent);
Slide 75
Slide 75 text
var grandparent = {
child: parent,
container: family
};
!
family.push(parent);
Slide 76
Slide 76 text
var grandparent = {
child: parent,
container: family
};
!
family.push(parent);
ઇͩΔ·ࣜʹ૿͑ΔϝϞϦ
Slide 77
Slide 77 text
A
C B
Slide 78
Slide 78 text
A
C B
Slide 79
Slide 79 text
A
C
Slide 80
Slide 80 text
A
C
ࢀর͕ͬͯ͠·͍
GCͰճऩ͞Εͳ͍
Slide 81
Slide 81 text
A
C B
Slide 82
Slide 82 text
A
C
Slide 83
Slide 83 text
A
C
Slide 84
Slide 84 text
A
C
ࢀর͕ͳ͘ͳͬͨͷͰ
ϝϞϦ͕։์͞ΕΔ
Slide 85
Slide 85 text
ࢀরؔͷཧΛʂ
ҰൠతͳϑϨʔϜϫʔΫ͜ͷΑ͏ͳ
ΠϕϯτϦεφͷϞσϧʹै͍ͬͯΔ͜ͱ͕ଟ͍
Slide 86
Slide 86 text
ίϯιʔϧ
॥ࢀর
λΠϚʔ Ϋϩʔδϟ
Slide 87
Slide 87 text
var object = {
foo: 1,
bar: 2
};
console.log(object);
object = null;
Slide 88
Slide 88 text
var object = {
foo: 1,
bar: 2
};
console.log(object);
object = null;
ίϯιʔϧ͔Βࢀর͞Ε
GC͔Βճऩ͞Εͳ͍
Slide 89
Slide 89 text
ϝϞϦͱͷਔٛͳ͖ઓ͍
• ͍͘Β࠷దԽͯ͠GCࣗಈͰ࣮ߦ͞Εͯ͠·
͏ɻͦͷΠϯύΫτΛԿʹখ͘͞ग़དྷΔ͔͕ॏཁ
• ಛʹؾΛΘͳ͚Ε͍͚ͳ͍ͷϖʔδભҠΛ͠
ͳ͍ɺ͔ͭΒ͔͕͞ॏཁͳ߹(γϡʔςΟϯά
ήʔϜͱ͔)
• Script͔Βൃੜ͢ΔLoadRenderΕͳ͍
Slide 90
Slide 90 text
࠷దԽΞϓϩʔν
Slide 91
Slide 91 text
Profiles
ະ։์ͷΦϒδΣΫτϝϞϦͷ༻ঢ়ଶ
͍৺ͷѱ͞Λݟಀ͞ͳ͍
εΫϩʔϧ͕Ҿ͔͔ͬΔ
Timeline
60FPS
Slide 92
Slide 92 text
Profiles
ະ։์ͷΦϒδΣΫτϝϞϦͷ༻ঢ়ଶ
͍৺ͷѱ͞Λݟಀ͞ͳ͍
εΫϩʔϧ͕Ҿ͔͔ͬΔ
TimelineͰωοΫΛݟ͚ͭΔ
60FPSͱ30FPSͷϘʔμʔΛҹʹ
Slide 93
Slide 93 text
ProfilesͰৄ͘͠ղੳ͢Δ
ະ։์ͷΦϒδΣΫτϝϞϦͷ༻ঢ়ଶ
͍৺ͷѱ͞Λݟಀ͞ͳ͍
εΫϩʔϧ͕Ҿ͔͔ͬΔ
Timeline
60FPS
Slide 94
Slide 94 text
Collect JavaScript
CPU Profile
JavaScriptͷ࣮ߦʹ͔͔ͬͨ࣌ؒΛௐΔ͜ͱ͕ग़དྷΔ
Slide 95
Slide 95 text
Take Heap Snapshot
ݱࡏͷϖʔδͰ࣮ߦ͞ΕɺώʔϓྖҬʹஔ͔Εͨ
JavaScriptͷΦϒδΣΫτͷΛௐΔ͜ͱ͕ग़དྷΔ
Slide 96
Slide 96 text
Record Heap
Allocations
JavaScriptͷ࣮ߦͱͱʹ༻͞ΕΔϝϞϦͷ
ׂͱղ์ͷঢ়ଶΛௐΔ͜ͱ͕ग़དྷΔ
Slide 97
Slide 97 text
JavaScriptͷ
ߴԽηΦϦʔΛΔ
Slide 98
Slide 98 text
ArrayͷforEach()ΑΓforͰϧʔϓɹΞχϝʔγϣϯʹ
requestAnimationFrame()ɹ“use strict”;Λ͏ɹ
try/catchʢྫ֎ͷัଊʣॏ͍ɹparseInt()ΑΓՃݮԋ
ࢉͰΩϟετ͢ΔɹDOMͷ୳ࡧૢ࡞࠷খݶʹɹ͍ؔͷ
ΠϯϥΠϯԽɹeval()with()ΛΘͳ͍ɹnew Date()Α
Γdate.now()ɹධՁॱͷɹਖ਼نදݱͷΩϟογϡɹॏ͍
ॲཧͷඇಉظԽ(WebWorker)ɹArrayͷforEach()ΑΓfor
Ͱϧʔϓɹ ΞχϝʔγϣϯʹrequestAnimationFrame()ɹ
“use strict”;Λ͏ɹtry/catchʢྫ֎ͷัଊʣॏ͍ɹ
parseInt()ΑΓՃݮԋࢉͰΩϟετ͢ΔɹDOMͷ୳ࡧૢ࡞
࠷খݶʹɹ͍ؔͷΠϯϥΠϯԽɹeval()with()Λ
Θͳ͍ɹnew Date()ΑΓdate.now()ɹධՁॱͷɹਖ਼ن
දݱͷΩϟογϡɹॏ͍ॲཧͷඇಉظԽ(WebWorker)ɹetc…
Slide 99
Slide 99 text
JavaScript Garden
http://bonsaiden.github.io/JavaScript-Garden/ja/
Slide 100
Slide 100 text
Don't Guess it,
Test it!
- Paul Lewis
Slide 101
Slide 101 text
jsPerf
http://jsperf.com
Slide 102
Slide 102 text
GCΛආ͚Δ2ͭͷख๏
Slide 103
Slide 103 text
ΦϒδΣΫτϓʔϧ
Θͳ͘ͳͬͨطఆͷܕͷΦϒδΣΫτΛϓʔϧ͠
ͦͷܕͷΦϒδΣΫτΛ࠶ར༻͢Δ
Slide 104
Slide 104 text
Object Pool
Slide 105
Slide 105 text
Object Pool
Object
Slide 106
Slide 106 text
Object Pool
Object
Slide 107
Slide 107 text
Object Pool
Object
Object
Slide 108
Slide 108 text
Object Pool
Object
Object
Slide 109
Slide 109 text
Object Pool
Object
Object
ੜͨ͠ΦϒδΣΫτΛ
࠶ར༻͢Δ͜ͱͰ
ϝϞϦͷ࠶ׂΛ͑Δ
Slide 110
Slide 110 text
Object Pools
http://beej.us/blog/data/object-pool/
Slide 111
Slide 111 text
ελςΟοΫϝϞϦ
༻͢ΔશͯͷΦϒδΣΫτΛ͋Β͔͡ΊॳظԽͯ͠
͏߹ʹͦͷΦϒδΣΫτ܈͔Βआ༻͢Δ
Slide 112
Slide 112 text
Object Pool
Slide 113
Slide 113 text
Object Pool
Object Object
Object Object
Slide 114
Slide 114 text
Object Pool
Object Object
Object Object
ΦϒδΣΫτͷੜճΛ
ݮΒ͢Ξϓϩʔν
Slide 115
Slide 115 text
ʲ൪֎ฤʳV8Τϯδϯͷ
࠷దԽΛ્͠ͳ͍
Slide 116
Slide 116 text
Design Elements
https://developers.google.com/v8/design
Slide 117
Slide 117 text
Fast Property Access
JITίϯύΠϧ࣌ʹ੩తͳΫϥεΛ࡞͠
JSͷίʔυΛಈతʹࢀর͢ΔͷͰͳ͘
ੜ͞ΕͨΫϥε(hidden class)Λߴʹࢀর͢Δ
Slide 118
Slide 118 text
Dynamic Machine
Code Generation
1࣮ߦͨ͠ίʔυΛϚγϯίʔυʹίϯύΠϧ͠
࣍ճҎ߱Ωϟογϡͨ͠ͷΛ࣮ߦ͢Δ
(தؒόΠτίʔυΠϯλʔϓϦλΘͳ͍)
Slide 119
Slide 119 text
Ϋϥεͷఆ͕ٛ͋ͬͨΒ…
function Point(x, y) {
this.x = x;
this.y = y;
}
Slide 120
Slide 120 text
Ϋϥεͷఆ͕ٛ͋ͬͨΒ…
function Point(x, y) {
this.x = x;
this.y = y;
}
JITίϯύΠϧ࣌ʹΫϥε
ͷ੩తͳ࣮ଶΛੜ͢Δ
function Point(x, y) {
this.x = x;
this.y = y;
}
Hidden Class
Slide 121
Slide 121 text
Ϋϥεͷఆ͕ٛ͋ͬͨΒ…
function Point(x, y) {
this.x = x;
this.y = y;
}
JITίϯύΠϧ࣌ʹΫϥε
ͷ੩తͳ࣮ଶΛੜ͢Δ
function Point(x, y) {
this.x = x;
this.y = y;
}
Hidden Class
var point = new Point();
͔࣍ΒίϯύΠϧࡁͷ
ΫϥεΛࢀর͢ΔͷͰߴ
Slide 122
Slide 122 text
Ϋϥεͷఆ͕ٛ͋ͬͨΒ…
function Point(x, y) {
this.x = x;
this.y = y;
}
JITίϯύΠϧ࣌ʹΫϥε
ͷ੩తͳ࣮ଶΛੜ͢Δ
function Point(x, y) {
this.x = x;
this.y = y;
}
Hidden Class
var point = new Point();
͔࣍ΒίϯύΠϧࡁͷ
ΫϥεΛࢀর͢ΔͷͰߴ
Slide 123
Slide 123 text
ఆٛΛ్தͰมߋ͢Δͱ…
Point.name = 'Name';
Slide 124
Slide 124 text
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.name = 'Name';
Hidden ClassΛ
࠶ੜͯ͠͠·͏
Hidden Class
ఆٛΛ్தͰมߋ͢Δͱ…
Point.name = 'Name';
Slide 125
Slide 125 text
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.name = 'Name';
Hidden ClassΛ
࠶ੜͯ͠͠·͏
Hidden Class
ఆٛΛ్தͰมߋ͢Δͱ…
Point.name = 'Name';
ϒϥβ͕࣮ߦ࣌ʹ࠷దԽͨ͠ίʔυΛ
ͳΔ͘มߋ͠ͳ͍Α͏ʹ͢Δʂ
Slide 126
Slide 126 text
·ͱΊ
Slide 127
Slide 127 text
ύϑΥʔϚϯεඞਢ
ڥͷଟذԽߟྀ͢Δ
Slide 128
Slide 128 text
ϒϥβͷؾ࣋ͪΛΔ͜ͱ͕
࠷దԽͷୈҰา
Slide 129
Slide 129 text
ۜͷؙଘࡏ͠ͳ͍
શͯ࠷దԽͷੵΈॏͶ
Slide 130
Slide 130 text
Thank you!
@1000ch
http://github.com/1000ch
http://1000ch.net
Slide 131
Slide 131 text
Photo Credits
• http://www.flickr.com/photos/66331098@N03/6041212579
• http://www.flickr.com/photos/danichro/7284517300
• http://www.flickr.com/photos/articnomad/16153058/
• http://www.flickr.com/photos/sfgirlbybay/2739327181/
• http://www.flickr.com/photos/30859306@N00/3331140550
• http://www.flickr.com/photos/45540741@N06/7365063522/
• http://www.flickr.com/photos/chrissinjo/5368405044
• http://www.flickr.com/photos/cloudy-day/5319042359
• http://www.flickr.com/photos/57490760@N04/7218896186