Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
Slide 2
Slide 2 text
ElectronͰ ήʔϜΛ࡞Γ͔ͨͬͨ 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
Slide 3
Slide 3 text
Re:θϩ͔Β࢝ΊΔElectron 2017/01/21 TAKUMA Hanatani a.k.a. Potato4d
Slide 4
Slide 4 text
Potato4d • ॴଐ:High school student(ߴ̏) • ॴଐ:Developer in pixiv(2017/04~) • ͖͢: Vue.js, Riot, AWS Lambda, etc… • ຊElectronͰήʔϜΛ࡞Γ͔ͨͬͨ
Slide 5
Slide 5 text
#kyotojs
Slide 6
Slide 6 text
/* ͜͜ͰΊͬͪΌ͍͢͝ήʔ ϜͷσϞ͕ग़Δ༧ఆͩͬͨ */
Slide 7
Slide 7 text
ElectronͬͯΔਓ
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Electronָ͍ͥ͠ʂ
Slide 10
Slide 10 text
͋Δ͍
Slide 11
Slide 11 text
Electronָ͍͠ΑͶʂ
Slide 12
Slide 12 text
Ζ͏
Slide 13
Slide 13 text
What’s Electron?
Slide 14
Slide 14 text
Reactͱ͔Atomͱ͔Έ͍ͨͳ ΞΠίϯͯ͠ΔͭͰ http://electron.atom.io/
Slide 15
Slide 15 text
Electronʹ͍͓ͭͯ͞Β͍ • ͬ͘͟Γ͍͏ͱChromiumΛύοΩϯάͯ͠Node ͱͷ௨৴͕Ͱ͖ΔΑ͏ʹͨ͠ • ར༻ऀઢͰ͍ͬͨΒChrome Apps͕ຊʹωΠ ςΟϒΞϓϦͱͯ͠ಈ͍ͯΔײ͡ • த͕ChromiumͳͷͰES2015+ϫʔϧυͷடং Ͱ࣏͕҆ྑ͍ http://electron.atom.io/
Slide 16
Slide 16 text
Electronͷྑ͍ͱ͜Ζ • HTML, CSS, JavaScriptͱNodeपΓͷγεςϜ ʹ͍ͭͯཧղ͕͋ΕσεΫτοϓΞϓϦ͕ ࡞ΕΔ • Node͓ΑͼElectronຊମͷϞδϡʔϧΛར༻ ͢Δ͜ͱʹΑΓɺϒϥβ͔ΒγεςϜͷػ ೳΛݺͼग़͢͜ͱ͕Ͱ͖Δ http://electron.atom.io/
Slide 17
Slide 17 text
Electronͷٕज़ͰͰ͖Δ͜ͱ • ϒϥβʹΒͳ͍ɺOSґଘͷ௨ͷੜ • ௨όʔͷΞϓϦέʔγϣϯͷදࣔ • ϑΝΠϧγεςϜͷΞΫηε • ChromeFirefoxͰ͔࣮͠͞Ε͍ͯͳ͍ Webඪ४APIͷϑϧ׆༻ http://electron.atom.io/
Slide 18
Slide 18 text
࠷ۙͷElectron • npm installͰೖΔΑ͏ʹͳ࣏͕ͬͯ҆ྑ͍ʢ͡ Ίͯͬͨ͜Ζ-gઐ༻ͩͬͨʣ • electron/electron-quick-start͕Ұ௨ΓͷςϯϓϨ ࣋ͬͯΔͷͰΫϩʔϯ͖ͯͨ͠Β͙͑͢Δ • v1.0͕ग़ͨλΠϛϯάͰޓੑ͕ΕͨͷͰࢮΜ ͩࢿྉ͕݁ߏ͋Δ(semverతʹݴ͏ͱਖ਼͍͠) https://github.com/electron/electron-quick-start
Slide 19
Slide 19 text
͍Ζ͍ΖͰ͖Δ
Slide 20
Slide 20 text
ࣗͷࣄྫͱͱʹհ
Slide 21
Slide 21 text
https://potato4d.me/screenbird/
Slide 22
Slide 22 text
ͭͬͨ͘ ʢެ։४උதʣ
Slide 23
Slide 23 text
screenbird • εΫϦʔϯγϣοτTwitterͰγΣΞͰ͖Δ ΞϓϦ • ࠓͷձఏڙࣾ͞ΜͷͭΛΊͬͪΌҙࣝ͠ ͯΔ • ༷࣮͕ෆಁ໌ͳWebඪ४APIΛ Chromiumʹͤͯϑϧ׆༻ͯ͠Δ
Slide 24
Slide 24 text
screenbird • getUserMediaͰը໘Λө૾ͱͯ͠Ωϟϓνϟ • ͦΕΛvideoλάʹຒΊࠐΈ • videoλά͔Βը૾σʔλΛcanvasʹసࣸ • canvas͔ΒblobΛ࡞ͬͯTwitterʹΞοϓϩʔυ
Slide 25
Slide 25 text
screenbird • ChromiumલఏͳͷͰgetUserMediaΛ৺ஔ͖ͳ ͘ୟ͚Δ • ES2015+ରԠͯ͠ΔͷͰBabelΛ௨͞ͳ͍Ͱ ॻ͚Δ • ͜ͷ͋ͨΓChrome Extension࡞ͱಉ͡ؾ ࣋ͪΑ͕͋͞Δ
Slide 26
Slide 26 text
͖ͳॻ͖͔ͨͰ ͖ͳ͚ͩॻ͚Δ
Slide 27
Slide 27 text
Electronָ͍ͥ͠ʂ
Slide 28
Slide 28 text
͋Δ͍
Slide 29
Slide 29 text
Electronָ͍͠ΑͶʂ
Slide 30
Slide 30 text
Ζ͏
Slide 31
Slide 31 text
https://potato4d.me/kajiki/
Slide 32
Slide 32 text
ͭͬͨ͘ ʢެ։͕໘Ͱͯ͠ͳ͍ʣ
Slide 33
Slide 33 text
Kajiki • S3ͷΞοϓϩʔμʔ • จࣈྻͱͯ͠S3্ͷΩʔΛϑΝΠϧύεͱ͠ ͯೖྗͯ͠DnDͰΞοϓϩʔυͰ͖Δ • cliͰͷΞοϓϩʔυʹෳϑΝΠϧDnDͷָ ͞Λ͚ͬͨΑ͏ͳૢ࡞ײ
Slide 34
Slide 34 text
Kajiki • AWSͷCredentialΛѻ͏ΞϓϦέʔγϣϯΛݸਓͰ ཧ͢Δͷෆ҆ • ϑϩϯτΤϯυͰͬͯѱ͘ͳ͍͚Ͳaws-sdk for NodeΛϒϥβʹࡌͤΔͷ͕దͰͳ͍ؾ͕͢Δ • ElectronͳΒ֎෦ʹอଘ͠ͳ͍ͷͰൺֱతηΩϡΞʹ ཧ͕Մೳ
Slide 35
Slide 35 text
Electronָ͍ͥ͠ʂ
Slide 36
Slide 36 text
͋Δ͍
Slide 37
Slide 37 text
Electronָ͍͠ΑͶʂ
Slide 38
Slide 38 text
Ζ͏
Slide 39
Slide 39 text
·ͱΊ
Slide 40
Slide 40 text
·ͱΊ • ৽͍͠Webඪ४ͷAPIͰ৭ʑͬͯΈ͍͚ͨͲ ͕͍͍࣌ͭͯແͯ͘ؾʹ࣮ͤͣ༻Մ • ͍ΘΏΔʮૉৼΓʯڥʹͽͬͨΓ • ϒϥβͷࠩҟΛؾʹ͠ͳ͍Ͱྑ͍ͷͰॳ৺ ऀʹͽͬͨΓͳؾ͕ͨ͠
Slide 41
Slide 41 text
Ζ͏
Slide 42
Slide 42 text
ͬͯΈΑ͏
Slide 43
Slide 43 text
ElectronͷΓ͔ͨ
Slide 44
Slide 44 text
͡Ί͍͖ͯΛ͢Δ $ git clone https://github.com/electron/electron-quick-start $ cd elecrton-quick-start $ npm install $ npm start
Slide 45
Slide 45 text
͡Ίͨ
Slide 46
Slide 46 text
renderer.jsʹ৭ʑॻ͘ /* ͜͜ʹ͍ͭͷJSΛॻ͚Δ͠ɺ ͦͦফ͠ඈͯ͠bundle.jsΛಡΜͰ͍͍ */ alert(1);
Slide 47
Slide 47 text
Ͱ͖ͨ
Slide 48
Slide 48 text
Electronָ͍ͥ͠ʂ
Slide 49
Slide 49 text
͋Δ͍
Slide 50
Slide 50 text
Electronָ͍͠ΑͶʂ
Slide 51
Slide 51 text
Ζ͏
Slide 52
Slide 52 text
ͬͯΈΑ͏
Slide 53
Slide 53 text
ͬͯΈ͍ͨ
Slide 54
Slide 54 text
ElectronͰ࠷ڧήʔϜ࡞
Slide 55
Slide 55 text
औΓ͑ͣcanvasϕʔεͰ ࡞͍͖ͬͯ
Slide 56
Slide 56 text
GamePad APIͰ ૢ࡞Մೳʹͯ͠
Slide 57
Slide 57 text
σεΫτοϓͰಈ͢
Slide 58
Slide 58 text
Webٕज़Ͱ
Slide 59
Slide 59 text
Γ͔ͨͬͨ
Slide 60
Slide 60 text
ؒʹ߹Θͳ͔ͬͨ
Slide 61
Slide 61 text
࣍·ͰʹϦϕϯδ
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
͍ͬ͠ΐʹΖ͏
Slide 64
Slide 64 text
Thank you!
Slide 65
Slide 65 text
http://kfug.jp/frontconf2017