Introduction of Electron 〜Electron入門〜

Slide 1

Slide 1 text

Introduction of Electron !NVTJHO

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Electron֓ཁ

Slide 5

Slide 5 text

w ΫϩεϓϥοτϑΥʔϜͷΞϓϦέʔγϣϯ࣮ߦ؀ڥ w 8FCͷٕज़ͰωΠςΟϒΞϓϦ͕࡞ΕΔ w )5.-$44 w +BWB4DSJQU w खܰʹΞϓϦ͕࡞ΕΔͱ͍͏͜Ͱࠓඇৗʹ੝Γ্͕͍ͬͯΔ w ࠃ಺Ͱ΋ݸਓϨϕϧͰिʹ਺ຊ΄ͲͷΞϓϦϦϦʔε Electronͱ͸

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

w $ISPOJVN/PEFKT w $ISPOJVN͸$ISPNFͷΦʔϓϯιʔεϓϩδΣΫτ w +BWB4DSJQU͔ΒOPEFKTٴͼMJCDISPNJVNDPOUFOUΛୟ͘MJCDISPNJVNDPOUFOU͸ $ISPOJVNΛMJCSBSZԽͨ͠΋ͷ w ؙ͝ͱ$ISPNFΛಉࠝ͢ΔͷͰਅͷҙຯͰΫϩεϓϥοτϑΥʔϜʁ ࢀߟ  ॕ"UPNͷ8FC$PNQPOFOUTಋೖɺ͍ͭͰʹ"UPN4IFMMͷ࿩ɻ  IUUQTUFQTEPEHTPOPSHCBUPNGSPNUIFTIFMMTJEF Architecture

Slide 8

Slide 8 text

Architecture main process renderer process renderer process Entry Point  JavaScript Script create call IPC HTML/CSS

Slide 9

Slide 9 text

Productionࣄྫ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Code Editor Atom

Slide 12

Slide 12 text

Git Client GitKraken

Slide 13

Slide 13 text

Mail Client

Slide 14

Slide 14 text

Chat Slack

Slide 15

Slide 15 text

Game DUELIST

Slide 16

Slide 16 text

΍ͬͯΈͨ

Slide 17

Slide 17 text

w #SPXTFS4ZODͱ͍͏8FCݕূπʔϧ w 1SPYZαʔόͱͯ͠ಈ࡞͠ɺෳ਺ͷ  ϒϥ΢βͰදࣔͷಉظΛऔΕΔ w ଞʹ΋ศརͳػೳଟ਺ w ݕূ͕ḿΔ w /PEFKT੡ ͰλεΫϥϯφʔίϚϯυ  Ͱ࣮ߦ Ϟνϕʔγϣϯ

Slide 18

Slide 18 text

σβΠφࠇ͍ը໘ා͍໰୊

Slide 19

Slide 19 text

(6*͕ඞཁͩɹˠɹ࡞Ζ͏

Slide 20

Slide 20 text

w 8FCपΓͷٕज़͔࣋ͬͯ͠ͳ͍ͧ w &MFDUSPOͯͷ͕ग़ͨΒ͍͠ w ࠷ۙྲྀߦͬͯͯΠέͯΔΒ͍͠ w +BWB4DSJQUͳΒ͍ͬͺ͍ॻ͍͖ͯͨʢ࣮ࡍ͸K2VFSZʣ ཱͪ͸͔ͩΔน

Slide 21

Slide 21 text

w ػೳΛߜΕ͹ಠΓͰνϚνϚ࡞͍ͬͯͯ΋Կͱ͔ͳΓͦ͏ w ͍ͭͰʹ+BWB4DSJQUΛษڧ͠Α͏ w Ϋϩεϒϥ΢βΛߟྀ͠ͳͯ͘ྑ͍ͷͰ༡΂ͦ͏ औΓ૊Ήʹ͋ͨͬͯ

Slide 22

Slide 22 text

GUISync

Slide 23

Slide 23 text

w OPEFKT͕͋Ε͹ಈ͘  XJOEPXTͰ͸WJTVBMTUVEJP͕ඞཁ w ઃఆϑΝΠϧΛੜ੒ͯ͠ίϚϯυΛୟ͘ w ػೳ͸ͨͬͨ͜Ε͚ͩ w HJUIVCDPNNVTJHO(6*4ZOD (6*4ZOD

Slide 24

Slide 24 text

w ͱͯ΋ૣ͍ w ͨͩ͠ɺ࣮ߦϑΝΠϧ͸.#ۙ͘ʹͳΔ  ˠ$ISPOJVNΛؚΉͨΊ ElectronͷϏϧυ

Slide 25

Slide 25 text

ࢧ͑Δٕज़

Slide 26

Slide 26 text

w &4 w OPEFKT w )5.-$44 w 4$444"44 +BEF w 5ZQF4DSJQU w (VMQ w ϑϨʔϫʔΫ͸Ұ੾ͳ͠ +4$44ͱ΋ ࢧ͑Δٕज़

Slide 27

Slide 27 text

w /PEFKT΋·ͩ&4ʹ׬શରԠͯ͠͸͍ͳ͍ w #BCFMਏͦ͏ͳͷͰ&4ͷಋೖ͸ͻͱ·ͣݟૹΓ ES5

Slide 28

Slide 28 text

w &MFDUSPO͸ը໘ʢϒϥ΢βʣ͔Β΋OPEFKT͕ୟ͚Δ w ΫϥΠΞϯταΠυͰSFRVJSFͰ͖Δෆࢥٞͳੈք w ϩʔΧϧϑΝΠϧͷಡΈࠐΈ͸΋ͪΖΜ ίϚϯυ΋ୟ͚Δ w &WFOU&NJUUFSخ͍͠ node.js

Slide 29

Slide 29 text

w #SPXTFS4ZOD͸ωΠςΟϒϞδϡʔϧΛ࢖͍ͬͯΔͨΊʹϓϥοτϑΥʔϜ ͝ͱͰϏϧυ͢Δඞཁ͕͋ͬͨ w OPEFͷDIJME@QSPDDFTTTQBXO w ඇಉظͰίϚϯυ࣮ߦ w TQBXO bOQN`

Slide 30

Slide 30 text

w +4Ͱ΋ܕ͕ཉ͍͠ w 6*Ͱ͸ͳ͍෦෼·Ͱ+BWB4DSJQUͰΧόʔ͠ͳ͍ͱ͍͚ͳ͍ͨΊʹಋೖ w &MFDUSPOͰ+4Λॻ͘ͷʹΘ͟ΘϏϧυͯ֬͠ೝ͢Δͷ͸खؒ   ຌϛε͸ίϯύΠϧΤϥʔͰݕ஌ w 7JTVBM4UVEJP$PEFඇৗʹศར w &MFDUSPO޲͚ͷܕఆٛϑΝΠϧ΋ϦϙδτϦʹͪΌΜͱଘࡏ TypeScript

Slide 31

Slide 31 text

w $44ϓϦϓϩηοα w ن໛͔Β͢Δͱඞཁͳ͍͕ Ͳ͏ͤ+4΋Ϗϧυ͢ΔͷͰೖΕͨ w $44΋Ϟδϡʔϧ෼ׂ͢ΔͱḿΔ SCSS/SASS

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

WBSCUO"DUJPO7JFXOFX#UO"DUJPO7JFX \ TUBSU'VODGVODUJPO FWFOU \ UIJTDSFBUF4FUUJOH'JMF WBSTUBSUUIJTCSPXTFS4ZODTUBSU TUBSUPO TUBSU GVODUJPO EBUB \ WBSTUS4USJOHGSPN$IBS$PEFBQQMZ OVMM EBUB ίʔϧόοΫ஍ࠈ

Slide 34

Slide 34 text

w OPEFKT͸جຊΠϕϯτۦಈͰඇಉظॲཧ w ԡ͠دͤΔίʔϧόοΫͷཛྷ w ঢ়ଶΛେྔʹ؅ཧͤ͞ΒΕͯਏ͍ w NBJOSFOEFSFSDIJME@QSPDFTT ໘౗ݟΔ΋ͷଟ͍ w 1SPNJTFͱ&WFOU&NJUUFSͰؤுΔ ίʔϧόοΫ஍ࠈ

Slide 35

Slide 35 text

͋Δఔ౓ͷن໛ͳΒ εςʔτϨεͷ'MVYྑͦ͞͏

Slide 36

Slide 36 text

Web vs ωΠςΟϒ

Slide 37

Slide 37 text

ී௨ͷWEBͩͱ MJTU FEJU DPOpSN QPTU DPNQMFUF w 63-ػೳ w ϢʔβͷΞΫγϣϯ͸63-ը໘ʹΑͬͯ෼ׂ͞ΕΔ w ෼ׂ͸Ϣʔβମݧͷ෼அΛੜΉ w ͨͩ͠ɺطʹ8FCʹର͢ΔϝϯλϧϞσϧ͕ܗ੒  ͞Ε͍ͯΔͨΊϢʔβ͸ҧ࿨ײΛײ͡ͳ͍ w Ϣʔβ͸଴ͬͯ͘ΕΔʢ͋Δఔ౓ʣ

Slide 38

Slide 38 text

ωΠςΟϒΞϓϦͰ͸ ϑΝΠϧΛ։͘ ฤू อଘ w ֤ϑϩʔΛ૬ޓʹߦ͖དྷ͠ͳ͕Β࡞ۀ͸ਐΉ  γʔϜϨεͳମݧ͕͋Δ w ̍ը໘ʹ༷ʑͳૢ࡞͕ಉډ͠ɺಉ࣌ʹߦΘΕΔ w Ϣʔβ͸଴ͬͯ͘Εͳ͍ w ωΠςΟϒΞϓϦͰ͸౰ͨΓલ

Slide 39

Slide 39 text

ωΠςΟϒΞϓϦͷ6*Ͱ͸

Slide 40

Slide 40 text

ྫ͑͹MacͷUI w ࠨ͸049ͷઃఆը໘ɻ0,Ωϟϯηϧ Ϙλϯ͕ଘࡏ͠ͳ͍ w ઃఆมߋˠଈ൓ө w ࠨͷด͡ΔϘλϯΛԡͯ͠΋ঢ়ଶ͸อ ଘ͞ΕɺҰ࣌తʹίϯςΩετ͕Ӆ͞ ΕΔ͚ͩ w γʔϜϨε

Slide 41

Slide 41 text

iOSͷ͢ΓΨϥεදݱ w J04͔Βಋೖ w લͷը໘Λಁաతʹݟͤͯ҉ࣔ͢Δ͜ͱʹΑΓɺ  Ұ࿈ͷը໘ભҠ͕࿈ଓͨ͠ମݧͰ͋Δ͜ͱΛ  Ϣʔβ΁҉͍ࣔͯ͠Δ w ܾ͓ͯ͠͠ΌΕ͚ͩͰ͸ͳ͍ w ωΟςΟϒͷੈքͰ͸γʔϜϨεͳ  ϢʔβମݧΛߏங͢Δ  ͨΊʹ޻෉ΛڽΒ͍ͯ͠Δ

Slide 42

Slide 42 text

8FCٕज़Λ࢖͍ͬͯͯ΋ ωΠςΟϒϨϕϧͷ6*

Slide 43

Slide 43 text

ElectronͰ͸ඞવతʹ SPAͱͳΔ

Slide 44

Slide 44 text

AtomͷΞϓϦମݧ

Slide 45

Slide 45 text

AtomͷΞϓϦମݧ

Slide 46

Slide 46 text

w 8FMDPNɺฤूɺઃఆɺϓϩδΣΫτϑΝΠϧදࣔɾɾɾͳͲͷ·ͬͨ͘ҧ ͏ίϯςΩετͷը໘͕ಉ࣌ʹදࣔ͞Ε͍ͯΔ w .BDฒΈʹγʔϜϨε w 8FC͔Β͢Δͱಉ͡Α͏ͳ΋ͷΛ࡞Δͷ͸ͱͯ΋͠ΜͲ͍ w ωΠςΟϒΞϓϦͰ͸౰ͨΓલ AtomͰ͸

Slide 47

Slide 47 text

w ଞϓϥοτϑΥʔϜҧͬͯɺ౷Ұతͳ6*͕༻ҙ͞Ε͍ͯͳ͍ w #PPUTUSBQ͸͋Γ͖ͨΓ w 1PMZNFS΍.BUFSJBM%FTJHO͋ͨΓ͸  ϞόΠϧͷ೏͍͕ؾʹͳΔ ७ਮͳσεΫτοϓΞϓϦͱͯ͠͸Ͳ͏ͳͷʁ w &MFDUSPO޲͚ͷ$44ϑϨʔϜϫʔΫ͕ొ৔࢝͠Ί͍ͯΔ UIਏ͍໰୊

Slide 48

Slide 48 text

Photon

Slide 49

Slide 49 text

React Desktop (alpha)

Slide 50

Slide 50 text

·ͱΊ

Slide 51

Slide 51 text

w ࣮ߦϑΝΠϧ͕Ͱ͔͍ w ϑϩϯτΤϯυք۾ͷࠞಱΛͦͷ··ܧঝ͍ͯ͠Δ w ·ͩ҆ఆ͍ͯ͠ͳ͍෦෼΋ w 6*೉͍͠ σϝϦοτ

Slide 52

Slide 52 text

w खܰ w ΫϩεϓϥοτϑΥʔϜ w Ϗϧυૣ͍ w ๛෋ͳ+BWB4DSJQUOQNपΓͷࢿ࢈ w ϨΨγʔϒϥ΢β͔Βղ͖์ͨΕָ͍ͯ͠ ϝϦοτ

Slide 53

Slide 53 text

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠