Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Electron で Evernote クライアントを作ってみた
Search
Kenta Okamoto
February 24, 2017
Programming
5
2.4k
Electron で Evernote クライアントを作ってみた
社内の勉強会で話したスライドです。
Kenta Okamoto
February 24, 2017
Tweet
Share
More Decks by Kenta Okamoto
See All by Kenta Okamoto
リリースして 6 年経つ Gem にどう手を入れるか
chocoby
0
430
ErgoDox を買った話
chocoby
0
890
デザイナーのための tmux 超入門
chocoby
7
10k
おすすめ gem
chocoby
2
1.9k
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
Namespace and Its Future
tagomoris
6
680
旅行プランAIエージェント開発の裏側
ippo012
1
590
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
0
330
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
340
ソフトウェアテスト徹底指南書の紹介
goyoki
1
130
rage against annotate_predecessor
junk0612
0
150
Improving my own Ruby thereafter
sisshiki1969
1
140
AI時代に学習する意味はあるのか?
tomoyakamaji
0
110
Ruby Parser progress report 2025
yui_knk
1
260
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Music & Morning Musume
bryan
46
6.8k
Fireside Chat
paigeccino
39
3.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Practical Orchestrator
shlominoach
190
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Rails Girls Zürich Keynote
gr2m
95
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Transcript
Electron Ͱ Evernote ΫϥΠΞϯτΛ࡞ͬͨ 2017/02/23 Kenta Okamoto GitHub: @chocoby
ͱ͜ΖͰɺ Evernote ͬͯ·͔͢ʁ
·͋·͋ͬͯΔ • هͳͲͷϝϞ • ϚχϡΞϧͷ PDF • ॻྨͳͲͷεΩϟϯ • Ͷ͍͜͵ͷ͓ؾʹೖΓը૾
1 ݄ Evernote for iOS ϝδϟʔόʔδϣϯΞοϓ
ࠈ • Ξοϓσʔτޙʹىಈ͠ͳ͍ • ϊʔτͷλΠτϧத͕දࣔ͞Εͨޙʹύείʔυ ೖྗ͕දࣔ͞ΕΔ • ىಈޙʹಉظ͕ऴΘΔ·Ͱૢ࡞Λड͚͚ͳ͍ • Χϝϥͷىಈʹ͕͔͔࣌ؒΔ
• ࣸਅΛࡱͬͨ͋ͱ 20 ඵ͘Β͍ݻ·Δ
ͦΜͳকདྷ͕৺ͳ Evernote Ͱ͕͢
Evernote αʔυύʔςΟͷ ΞϓϦ͕๛
͓ؾʹೖΓ PostEver 2 • ܰշͳϝϞΞϓϦ • γϡοͱىಈͯ͠γϡοͱॻ͚Δ • ୯ҐͰϊʔτ͕࡞ΒΕΔͷͰه༻్ ʹ͍ͬͯΔ
None
ಉ͜͡ͱ͕Ͱ͖Δ Mac ΞϓϦΛ࡞Γ͍ͨ
ษڧձۦಈ։ൃ • ΰʔϧͱΓ͋͑ͣ Evernote ʹߘͰ͖Δ͜ ͱ
Ebari • ΤόΔɺΤόΓ • άάΔɺΈ͍ͨͳ • ͪΐͬͱඍົ…
σϞ
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
ͬͨπʔϧ • Electron • Web ։ൃऀΒ͘͠ • Boilerplate Λ͏ •
ڊਓͷݞʹཱͭ • Boilerplate ͋·Γ͖Ͱͳ͍ͷ͕ͩɺ͍͔ͪΒ ڥΛ࡞͍ͬͯΔ͏ͪʹ͖Δ
electron-vue • https://github.com/SimulatedGREG/ electron-vue • Vue Λ͙ͬͯ͢ʹ Electron ΞϓϦͷ։ൃΛ ࢝ΊΒΕΔ
• ࣮ࡍͦ͏ͩͬͨ
ΓΓ • DevTools • HTML/CSS/JS ϓϦϓϩηοα • Hot Module Replacement
• ESLint (Standard, Airbnb) • Unit Testing, E2E Testing • ༻ͷύοέʔδ࡞ (electron-packager, electron-builder)
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
Evernote JavaScript SDK • https://github.com/evernote/evernote-sdk-js • Python, Ruby, iOS, Android
ͳͲͳͲʹରԠ • http://dev.evernote.com/doc/reference/
None
ೝূ • OAuth 1.0 • Developer token • GitHub Ͱ͍͏
Personal access token • ࣌ؒͷ߹্ࠓճͪ͜Β • Sandbox ڥ͕͋Γͦ͜Ͱ։ൃ͢Δ • ਃ͢Δͱຊ൪ڥͰ OAuth ͕͑ΔͬΆ͍ʁ
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
ENML • Evernote Markup Language • ಠࣗϚʔΫΞοϓݴޠ • XML
<!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>
ENML • ENML Λѻ͏Α͛͞ͳϥΠϒϥϦͳ͔ͬͨ • ͍͔ͭ͘ XML Λѻ͏ϥΠϒϥϦ͋Δ͚Ͳɺ ͲͷϥΠϒϥϦߏͷ࡞Γํʹ಄Λ͏ •
දݱྗ͍͢͝ͱࢥ͏͚Ͳ… • ࠓճ͜͜ʹҰ൪࣌ؒΛͬͨؾ͕͢Δ
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
ϝχϡʔόʔ • σϑΥϧτΟϯυ͕දࣔ͞ΕΔ • ϝχϡʔόʔʹৗற͍ͤͨ͞ • https://github.com/maxogden/menubar
ϝχϡʔόʔ
ϝχϡʔόʔ import menubar from 'menubar'; const mb = menubar({ index:
winURL, // index.html width: 700, height: 130, windowPosition: 'trayCenter', });
γϣʔτΧοτΩʔ • ϝχϡʔόʔʹΧʔιϧΛ͍࣋ͬͯ͘ͷ໘ ͩͱ͍͏͜ͱ͕͔ͬͨ • γϣʔτΧοτΩʔͰݺͼग़ͯ͠γϡοͱೖ ྗͰ͖ΔΑ͏ʹ͍ͨ͠ • https://github.com/electron/electron/blob/ master/docs/api/global-shortcut.md
γϣʔτΧοτΩʔ
γϣʔτΧοτΩʔ 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; } }); });
͘͡ • ͬͨπʔϧ • SDK/ೝূ • ENML • ϝχϡʔόʔɺγϣʔτΧοτΩʔ •
·ͱΊ
·ͱΊ • Electron ͍͢͝ • ENML ͭΒ͍… • Boilerplate ༻๏༻ྔΛकΕศརʹ͑Δ͔ͳͱ
ࢥͬͨ • Electron ΞϓϦΛ࡞͍ͬͯΔํ͕͍ͨΒ͠·͠ΐ ͏ʂ