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
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
CSC305 Lecture 01
javiergs
PRO
1
400
CSC509 Lecture 06
javiergs
PRO
0
240
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
790
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
187
28k
Six Lessons from altMBA
skipperchong
28
4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Facilitating Awesome Meetings
lara
56
6.6k
Done Done
chrislema
185
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Documentation Writing (for coders)
carmenintech
75
5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 ΞϓϦΛ࡞͍ͬͯΔํ͕͍ͨΒ͠·͠ΐ ͏ʂ