Electron で Evernote クライアントを作ってみた

社内の勉強会で話したスライドです。

1. Electron Ͱ Evernote ΫϥΠΞϯτΛ࡞ͬͨ࿩ 2017/02/23 Kenta Okamoto GitHub: @chocoby
2. ͱ͜ΖͰɺ Evernote ࢖ͬͯ·͔͢ʁ
3. ·͋·͋࢖ͬͯΔ • ೔هͳͲͷϝϞ • ϚχϡΞϧͷ PDF • ॻྨͳͲͷεΩϟϯ • Ͷ͜΍͍͵ͷ͓ؾʹೖΓը૾
4. 1 ݄຤ Evernote for iOS ϝδϟʔόʔδϣϯΞοϓ
5. ஍ࠈ • Ξοϓσʔτޙʹىಈ͠ͳ͍ • ϊʔτͷλΠτϧ΍த਎͕දࣔ͞Εͨޙʹύείʔυ ೖྗ͕දࣔ͞ΕΔ • ىಈޙʹಉظ͕ऴΘΔ·Ͱૢ࡞Λड͚෇͚ͳ͍ • Χϝϥͷىಈʹ͕͔͔࣌ؒΔ • ࣸਅΛࡱͬͨ͋ͱ 20 ඵ͘Β͍ݻ·Δ
6. ͦΜͳকདྷ͕৺഑ͳ Evernote Ͱ͕͢
7. Evernote ͸αʔυύʔςΟͷ ΞϓϦ͕๛෋
8. ͓ؾʹೖΓ͸ PostEver 2 • ܰշͳϝϞΞϓϦ • γϡοͱىಈͯ͠γϡοͱॻ͚Δ • ೔෇୯ҐͰϊʔτ͕࡞ΒΕΔͷͰ೔ه༻్ ʹ࢖͍ͬͯΔ
10. ಉ͜͡ͱ͕Ͱ͖Δ Mac ΞϓϦΛ࡞Γ͍ͨ
11. ษڧձۦಈ։ൃ • ΰʔϧ͸ͱΓ͋͑ͣ Evernote ʹ౤ߘͰ͖Δ͜ ͱ
12. Ebari • ΤόΔɺΤόΓ • άάΔɺΈ͍ͨͳ • ͪΐͬͱඍົ…
13. σϞ
14. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
15. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
16. ࢖ͬͨπʔϧ • Electron • Web ։ൃऀΒ͘͠ • Boilerplate Λ࢖͏ • ڊਓͷݞʹཱͭ • Boilerplate ͸͋·Γ޷͖Ͱ͸ͳ͍ͷ͕ͩɺ͍͔ͪΒ ؀ڥΛ࡞͍ͬͯΔ͏ͪʹ๞͖Δ
17. electron-vue • https://github.com/SimulatedGREG/ electron-vue • Vue Λ࢖͙ͬͯ͢ʹ Electron ΞϓϦͷ։ൃΛ ࢝ΊΒΕΔ • ࣮ࡍͦ͏ͩͬͨ
18. ΋Γ΋Γ • DevTools • HTML/CSS/JS ϓϦϓϩηοα • Hot Module Replacement • ESLint (Standard, Airbnb) • Unit Testing, E2E Testing • ഑෍༻ͷύοέʔδ࡞੒ (electron-packager, electron-builder)
19. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
20. Evernote JavaScript SDK • https://github.com/evernote/evernote-sdk-js • Python, Ruby, iOS, Android ͳͲͳͲʹରԠ • http://dev.evernote.com/doc/reference/
22. ೝূ • OAuth 1.0 • Developer token • GitHub Ͱ͍͏ Personal access token • ࣌ؒͷ౎߹্ࠓճ͸ͪ͜Β • Sandbox ؀ڥ͕͋Γͦ͜Ͱ։ൃ͢Δ • ਃ੥͢Δͱຊ൪؀ڥͰ OAuth ͕࢖͑ΔͬΆ͍ʁ
23. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
24. ENML • Evernote Markup Language • ಠࣗϚʔΫΞοϓݴޠ • XML
25. <!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"> <en-note> <div> <span style="color: rgb(51, 102, 255);"> <span style="font-size: 36px;">͜Μʹͪ͸ʂੈքʂ</span> </span> </div> </en-note>
26. ENML • ENML Λѻ͏Α͛͞ͳϥΠϒϥϦ͸ͳ͔ͬͨ • ͍͔ͭ͘ XML Λѻ͏ϥΠϒϥϦ͸͋Δ͚Ͳɺ ͲͷϥΠϒϥϦ΋ߏ଄ͷ࡞Γํʹ಄Λ࢖͏ • දݱྗ͸͍͢͝ͱࢥ͏͚Ͳ… • ࠓճ͜͜ʹҰ൪࣌ؒΛ࢖ͬͨؾ͕͢Δ
27. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
28. ϝχϡʔόʔ • σϑΥϧτ͸΢Οϯυ΢͕දࣔ͞ΕΔ • ϝχϡʔόʔʹৗற͍ͤͨ͞ • https://github.com/maxogden/menubar
29. ϝχϡʔόʔ
30. ϝχϡʔόʔ import menubar from 'menubar'; const mb = menubar({ index: winURL, // index.html width: 700, height: 130, windowPosition: 'trayCenter', });
31. γϣʔτΧοτΩʔ • ϝχϡʔόʔʹΧʔιϧΛ͍࣋ͬͯ͘ͷ΋໘౗ ͩͱ͍͏͜ͱ͕෼͔ͬͨ • γϣʔτΧοτΩʔͰݺͼग़ͯ͠γϡοͱೖ ྗͰ͖ΔΑ͏ʹ͍ͨ͠ • https://github.com/electron/electron/blob/ master/docs/api/global-shortcut.md
32. γϣʔτΧοτΩʔ
33. γϣʔτΧοτΩʔ import { app, globalShortcut } from 'electron'; let menuWindowOpened = false; mb.on('ready', () => { globalShortcut.register('Ctrl+Shift+\\', () => { if (menuWindowOpened) { mb.hideWindow(); menuWindowOpened = false; } else { mb.showWindow(); menuWindowOpened = true; } }); });
34. ΋͘͡ • ࢖ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ • ·ͱΊ
35. ·ͱΊ • Electron ͸͍͢͝ • ENML ͸ͭΒ͍… • Boilerplate ͸༻๏༻ྔΛकΕ͹ศརʹ࢖͑Δ͔ͳͱ ࢥͬͨ • Electron ΞϓϦΛ࡞͍ͬͯΔํ͕͍ͨΒ࿩͠·͠ΐ ͏ʂ
36. ׬