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
420
ErgoDox を買った話
chocoby
0
880
デザイナーのための tmux 超入門
chocoby
7
10k
おすすめ gem
chocoby
2
1.8k
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
210
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
PipeCDのプラグイン化で目指すところ
warashi
1
240
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
430
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
GraphRAGの仕組みまるわかり
tosuri13
8
520
エンジニア向け採用ピッチ資料
inusan
0
180
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
570
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Adaptive Systems
keathley
43
2.6k
Gamification - CAS2011
davidbonilla
81
5.3k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
4 Signs Your Business is Dying
shpigford
184
22k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Speed Design
sergeychernyshev
32
1k
Done Done
chrislema
184
16k
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 ΞϓϦΛ࡞͍ͬͯΔํ͕͍ͨΒ͠·͠ΐ ͏ʂ