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

37d7ffd14a3d1af0627fcb48e09f0c9a?s=47 Kenta Okamoto
February 24, 2017

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

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

37d7ffd14a3d1af0627fcb48e09f0c9a?s=128

Kenta Okamoto

February 24, 2017
Tweet

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