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.2k
Electron で Evernote クライアントを作ってみた
社内の勉強会で話したスライドです。
Kenta Okamoto
February 24, 2017
Tweet
Share
More Decks by Kenta Okamoto
See All by Kenta Okamoto
リリースして 6 年経つ Gem にどう手を入れるか
chocoby
0
330
ErgoDox を買った話
chocoby
0
780
デザイナーのための tmux 超入門
chocoby
7
9.8k
おすすめ gem
chocoby
2
1.8k
Other Decks in Programming
See All in Programming
見た目から始める生産性向上
ikumatadokoro
7
730
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
560
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
520
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
620
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
180
Netty Chicago Java User Group 2024-04-17
sullis
0
170
VS Code をプロダクトにどう取り込むか
onomax
1
320
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Agile that works and the tools we love
rasmusluckow
324
20k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Being A Developer After 40
akosma
56
580k
Building Applications with DynamoDB
mza
88
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Design by the Numbers
sachag
274
18k
Designing for Performance
lara
601
67k
Docker and Python
trallard
33
2.7k
How GitHub (no longer) Works
holman
304
140k
Rails Girls Zürich Keynote
gr2m
91
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
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 ΞϓϦΛ࡞͍ͬͯΔํ͕͍ͨΒ͠·͠ΐ ͏ʂ