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ͱ͸
6. None

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ࣄྫ

10. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠