Introduction of Electron 〜Electron入門〜

66b5fea05e9370317581701c87e50eae?s=47 8845musign
November 10, 2015

Introduction of Electron 〜Electron入門〜

66b5fea05e9370317581701c87e50eae?s=128

8845musign

November 10, 2015
Tweet

Transcript

  1. Introduction of Electron !NVTJHO

  2. ࣗݾ঺հ w !NVTJHO w 8FCσβΠφ̎೥ϓϩάϥϚ̎೥ w σβΠφ࣌୅͸ͣͬͱK2VFSZΛॻ͍͍ͯ·ͨ͠ w ԿΛؒҧͬͨͷ͔࠷ۙ͸(PݴޠΛॻ͍ͯ·͢

  3. ΞδΣϯμ w &MFDUSPO֓ཁ w ͭͬͯ͘Έͨ w 8FCWTωΠςΟϒ

  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ಋೖɺ͍ͭͰʹ"UPN4IFMMͷ࿩ɻ
 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Ͱ͸WJTVBMTUVEJP͕ඞཁ  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 7JTVBM4UVEJP$PEFඇৗʹศར

    w &MFDUSPO޲͚ͷܕఆٛϑΝΠϧ΋ϦϙδτϦʹͪΌΜͱଘࡏ TypeScript
  31. w $44ϓϦϓϩηοα w ن໛͔Β͢Δͱඞཁͳ͍͕ Ͳ͏ͤ+4΋Ϗϧυ͢ΔͷͰೖΕͨ w $44΋Ϟδϡʔϧ෼ׂ͢ΔͱḿΔ SCSS/SASS

  32. w Θ͟Θ͟ΞϓϦΛϏϧυ͢Δඞཁ͸ͳ͍ w Ͳ͏ͤ)5.-Ͱදࣔ͞Ε͍ͯΔͷ͔ͩΒ w ݕূ༻)5.-Λ༻ҙͯ͠ίϯύΠϧͨ͠$44Λಡ·ͤͯ֬ΊΔ ϨΠΞ΢τͷ֬ೝ

  33. WBSCUO"DUJPO7JFXOFX#UO"DUJPO7JFX \ TUBSU'VODGVODUJPO FWFOU \ UIJTDSFBUF4FUUJOH'JMF  WBSTUBSUUIJTCSPXTFS4ZODTUBSU  TUBSUPO

    TUBSU GVODUJPO EBUB \ WBSTUS4USJOHGSPN$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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠