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

Transcript

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 • ܰշͳϝϞΞϓϦ • γϡοͱىಈͯ͠γϡοͱॻ͚Δ • ೔෇୯ҐͰϊʔτ͕࡞ΒΕΔͷͰ೔ه༻్ ʹ࢖͍ͬͯΔ

9. None

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/
21. None

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. ׬