Introduction of Electron 〜Electron入門〜

Transcript

1. Introduction of Electron !NVTJHO
2. ࣗݾ঺հ w !NVTJHO
   w 8FCσβΠφ̎೥ϓϩάϥϚ̎೥
   w σβΠφ࣌୅͸ͣͬͱK2VFSZΛॻ͍͍ͯ·ͨ͠
   w ԿΛؒҧͬͨͷ͔࠷ۙ͸(PݴޠΛॻ͍ͯ·͢
3. ΞδΣϯμ w &MFDUSPO֓ཁ
   w ͭͬͯ͘Έͨ
   w 8FC
   WT
   ωΠςΟϒ
4. Electron֓ཁ
5. w ΫϩεϓϥοτϑΥʔϜͷΞϓϦέʔγϣϯ࣮ߦ؀ڥ
   w 8FCͷٕज़ͰωΠςΟϒΞϓϦ͕࡞ΕΔ
   w )5.-$44
   w +BWB4DSJQU
   w खܰʹΞϓϦ͕࡞ΕΔͱ͍͏͜Ͱࠓඇৗʹ੝Γ্͕͍ͬͯΔ
   w ࠃ಺Ͱ΋ݸਓϨϕϧͰिʹ਺ຊ΄ͲͷΞϓϦϦϦʔε Electronͱ͸
7. w $ISPOJVN
   
   /PEFKT
   w $ISPOJVN͸$ISPNFͷΦʔϓϯιʔεϓϩδΣΫτ
   w +BWB4DSJQU͔ΒOPEFKTٴͼMJCDISPNJVNDPOUFOUΛୟ͘MJCDISPNJVNDPOUFOU͸ $ISPOJVNΛMJCSBSZԽͨ͠΋ͷ
   w ؙ͝ͱ$ISPNFΛಉࠝ͢ΔͷͰਅͷҙຯͰΫϩεϓϥοτϑΥʔϜʁ
   ࢀߟ
 ॕ
   "UPN
   ͷ
   8FC
   $PNQPOFOUT
   ಋೖɺ͍ͭͰʹ
   "UPN
   4IFMM
   ͷ࿩ɻ
 IUUQTUFQTEPEHTPOPSHCBUPNGSPNUIFTIFMMTJEF Architecture
8. Architecture main process renderer process renderer process Entry Point
 JavaScript Script create call IPC HTML/CSS
9. Productionࣄྫ
11. Code Editor Atom
12. Git Client GitKraken
13. Mail Client
14. Chat Slack
15. Game DUELIST
16. ΍ͬͯΈͨ
17. w #SPXTFS4ZODͱ͍͏8FCݕূπʔϧ
    w 1SPYZαʔόͱͯ͠ಈ࡞͠ɺෳ਺ͷ
 ϒϥ΢βͰදࣔͷಉظΛऔΕΔ
    w ଞʹ΋ศརͳػೳଟ਺
    w ݕূ͕ḿΔ
    w /PEFKT੡
    ͰλεΫϥϯφʔίϚϯυ
 Ͱ࣮ߦ Ϟνϕʔγϣϯ
18. σβΠφࠇ͍ը໘ා͍໰୊
19. (6*͕ඞཁͩɹˠɹ࡞Ζ͏
20. w 8FCपΓͷٕज़͔࣋ͬͯ͠ͳ͍ͧ
    w &MFDUSPOͯͷ͕ग़ͨΒ͍͠
    w ࠷ۙྲྀߦͬͯͯΠέͯΔΒ͍͠
    w +BWB4DSJQUͳΒ͍ͬͺ͍ॻ͍͖ͯͨʢ࣮ࡍ͸K2VFSZʣ ཱͪ͸͔ͩΔน
21. w ػೳΛߜΕ͹ಠΓͰνϚνϚ࡞͍ͬͯͯ΋Կͱ͔ͳΓͦ͏
    w ͍ͭͰʹ+BWB4DSJQUΛษڧ͠Α͏
    w Ϋϩεϒϥ΢βΛߟྀ͠ͳͯ͘ྑ͍ͷͰ༡΂ͦ͏ औΓ૊Ήʹ͋ͨͬͯ
22. GUISync
23. w OPEFKT͕͋Ε͹ಈ͘
 XJOEPXTͰ͸WJTVBM
    TUVEJP͕ඞཁ
    w ઃఆϑΝΠϧΛੜ੒ͯ͠ίϚϯυΛୟ͘
    w ػೳ͸ͨͬͨ͜Ε͚ͩ
    w HJUIVCDPNNVTJHO(6*4ZOD (6*4ZOD
24. w ͱͯ΋ૣ͍
    w ͨͩ͠ɺ࣮ߦϑΝΠϧ͸.#ۙ͘ʹͳΔ
 ˠ$ISPOJVNΛؚΉͨΊ ElectronͷϏϧυ
25. ࢧ͑Δٕज़
26. w &4
    w OPEFKT
    w )5.-$44
    w 4$444"44
    +BEF
    w 5ZQF4DSJQU
    w (VMQ
    w ϑϨʔϫʔΫ͸Ұ੾ͳ͠ +4$44ͱ΋ ࢧ͑Δٕज़
27. w /PEFKT΋·ͩ&4ʹ׬શରԠͯ͠͸͍ͳ͍
    w #BCFMਏͦ͏ͳͷͰ&4ͷಋೖ͸ͻͱ·ͣݟૹΓ ES5
28. w &MFDUSPO͸ը໘ʢϒϥ΢βʣ͔Β΋OPEFKT͕ୟ͚Δ
    w ΫϥΠΞϯταΠυͰSFRVJSFͰ͖Δෆࢥٞͳੈք
    w ϩʔΧϧϑΝΠϧͷಡΈࠐΈ͸΋ͪΖΜ
    ίϚϯυ΋ୟ͚Δ
    w &WFOU&NJUUFSخ͍͠ node.js
29. w #SPXTFS4ZOD͸ωΠςΟϒϞδϡʔϧΛ࢖͍ͬͯΔͨΊʹϓϥοτϑΥʔϜ ͝ͱͰϏϧυ͢Δඞཁ͕͋ͬͨ
    w OPEFͷDIJME@QSPDDFTTTQBXO
    w ඇಉظͰίϚϯυ࣮ߦ
    w TQBXO bOQN`
    <bJOTUBMM`
    bCSPXTFSTZOD`  BrowserSyncͷϏϧυ
30. w +4Ͱ΋ܕ͕ཉ͍͠
    w 6*Ͱ͸ͳ͍෦෼·Ͱ+BWB4DSJQUͰΧόʔ͠ͳ͍ͱ͍͚ͳ͍ͨΊʹಋೖ
    w &MFDUSPOͰ+4Λॻ͘ͷʹΘ͟ΘϏϧυͯ֬͠ೝ͢Δͷ͸खؒ
    
 ຌϛε͸ίϯύΠϧΤϥʔͰݕ஌
    w 7JTVBM
    4UVEJP
    $PEFඇৗʹศར
    w &MFDUSPO޲͚ͷܕఆٛϑΝΠϧ΋ϦϙδτϦʹͪΌΜͱଘࡏ TypeScript
31. w $44ϓϦϓϩηοα
    w ن໛͔Β͢Δͱඞཁͳ͍͕
    Ͳ͏ͤ+4΋Ϗϧυ͢ΔͷͰೖΕͨ
    w $44΋Ϟδϡʔϧ෼ׂ͢ΔͱḿΔ SCSS/SASS
32. w Θ͟Θ͟ΞϓϦΛϏϧυ͢Δඞཁ͸ͳ͍
    w Ͳ͏ͤ)5.-Ͱදࣔ͞Ε͍ͯΔͷ͔ͩΒ
    w ݕূ༻)5.-Λ༻ҙͯ͠ίϯύΠϧͨ͠$44Λಡ·ͤͯ֬ΊΔ ϨΠΞ΢τͷ֬ೝ
33. 
    
    
    
    WBS
    CUO"DUJPO7JFX
    
    OFX
    #UO"DUJPO7JFX \
    
    
    
    
    
    
    
    
    TUBSU'VOD
    GVODUJPO FWFOU
    \
    
    
    
    
    
    
    
    
    
    
    
    
    UIJTDSFBUF4FUUJOH'JMF 
    
    
    
    
    
    
    
    
    
    
    
    
    WBS
    TUBSU
    
    UIJTCSPXTFS4ZODTUBSU 
    
    
    
    
    
    
    
    
    
    
    
    
    TUBSUPO TUBSU
    GVODUJPO EBUB \
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    WBS
    TUS
    
    4USJOHGSPN$IBS$PEFBQQMZ OVMM
    EBUB 
    ίʔϧόοΫ஍ࠈ
34. w OPEFKT͸جຊΠϕϯτۦಈͰඇಉظॲཧ
    w ԡ͠دͤΔίʔϧόοΫͷཛྷ
    w ঢ়ଶΛେྔʹ؅ཧͤ͞ΒΕͯਏ͍
    w NBJOSFOEFSFSDIJME@QSPDFTT
    ໘౗ݟΔ΋ͷଟ͍
    w 1SPNJTFͱ&WFOU&NJUUFSͰؤுΔ ίʔϧόοΫ஍ࠈ
35. ͋Δఔ౓ͷن໛ͳΒ
    εςʔτϨεͷ'MVYྑͦ͞͏
36. Web vs ωΠςΟϒ
37. ී௨ͷWEBͩͱ MJTU FEJU DPOpSN QPTU DPNQMFUF w 63-ػೳ
    w ϢʔβͷΞΫγϣϯ͸63-ը໘ʹΑͬͯ෼ׂ͞ΕΔ
    w ෼ׂ͸Ϣʔβମݧͷ෼அΛੜΉ
    w ͨͩ͠ɺطʹ8FCʹର͢ΔϝϯλϧϞσϧ͕ܗ੒
 ͞Ε͍ͯΔͨΊϢʔβ͸ҧ࿨ײΛײ͡ͳ͍
    w Ϣʔβ͸଴ͬͯ͘ΕΔʢ͋Δఔ౓ʣ
38. ωΠςΟϒΞϓϦͰ͸ ϑΝΠϧΛ։͘ ฤू อଘ w ֤ϑϩʔΛ૬ޓʹߦ͖དྷ͠ͳ͕Β࡞ۀ͸ਐΉ
 γʔϜϨεͳମݧ͕͋Δ
    w ̍ը໘ʹ༷ʑͳૢ࡞͕ಉډ͠ɺಉ࣌ʹߦΘΕΔ
    w Ϣʔβ͸଴ͬͯ͘Εͳ͍
    w ωΠςΟϒΞϓϦͰ͸౰ͨΓલ
    
39. ωΠςΟϒΞϓϦͷ6*Ͱ͸
40. ྫ͑͹MacͷUI w ࠨ͸049ͷઃఆը໘ɻ0,
    Ωϟϯηϧ Ϙλϯ͕ଘࡏ͠ͳ͍
    w ઃఆมߋˠଈ൓ө
    w ࠨͷด͡ΔϘλϯΛԡͯ͠΋ঢ়ଶ͸อ ଘ͞ΕɺҰ࣌తʹίϯςΩετ͕Ӆ͞ ΕΔ͚ͩ
    w γʔϜϨε
41. iOSͷ͢ΓΨϥεදݱ w J04͔Βಋೖ
    w લͷը໘Λಁաతʹݟͤͯ҉ࣔ͢Δ͜ͱʹΑΓɺ
 Ұ࿈ͷը໘ભҠ͕࿈ଓͨ͠ମݧͰ͋Δ͜ͱΛ
 Ϣʔβ΁҉͍ࣔͯ͠Δ
    w ܾ͓ͯ͠͠ΌΕ͚ͩͰ͸ͳ͍
    w ωΟςΟϒͷੈքͰ͸γʔϜϨεͳ
 ϢʔβମݧΛߏங͢Δ
 ͨΊʹ޻෉ΛڽΒ͍ͯ͠Δ
42. 8FCٕज़Λ࢖͍ͬͯͯ΋
    ωΠςΟϒϨϕϧͷ6*
43. ElectronͰ͸ඞવతʹ
    SPAͱͳΔ
44. AtomͷΞϓϦମݧ
45. AtomͷΞϓϦମݧ
46. w 8FMDPNɺฤूɺઃఆɺϓϩδΣΫτϑΝΠϧදࣔɾɾɾͳͲͷ·ͬͨ͘ҧ ͏ίϯςΩετͷը໘͕ಉ࣌ʹදࣔ͞Ε͍ͯΔ
    w .BDฒΈʹγʔϜϨε
    w 8FC͔Β͢Δͱಉ͡Α͏ͳ΋ͷΛ࡞Δͷ͸ͱͯ΋͠ΜͲ͍
    
    w ωΠςΟϒΞϓϦͰ͸౰ͨΓલ AtomͰ͸
47. w ଞϓϥοτϑΥʔϜҧͬͯɺ౷Ұతͳ6*͕༻ҙ͞Ε͍ͯͳ͍
    w #PPUTUSBQ͸͋Γ͖ͨΓ
    w 1PMZNFS΍.BUFSJBM
    %FTJHO͋ͨΓ͸
 ϞόΠϧͷ೏͍͕ؾʹͳΔ
    ७ਮͳσεΫτοϓΞϓϦͱͯ͠͸Ͳ͏ͳͷʁ
    w &MFDUSPO޲͚ͷ$44ϑϨʔϜϫʔΫ͕ొ৔࢝͠Ί͍ͯΔ UIਏ͍໰୊
48. Photon
49. React Desktop (alpha)
50. ·ͱΊ
51. w ࣮ߦϑΝΠϧ͕Ͱ͔͍
    w ϑϩϯτΤϯυք۾ͷࠞಱΛͦͷ··ܧঝ͍ͯ͠Δ
    w ·ͩ҆ఆ͍ͯ͠ͳ͍෦෼΋
    w 6*೉͍͠ σϝϦοτ
52. w खܰ
    w ΫϩεϓϥοτϑΥʔϜ
    w Ϗϧυૣ͍
    w ๛෋ͳ+BWB4DSJQUOQNपΓͷࢿ࢈
    w ϨΨγʔϒϥ΢β͔Βղ͖์ͨΕָ͍ͯ͠ ϝϦοτ
53. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠