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
noteエディタの話
Search
ct8ker
October 23, 2018
Technology
1
11k
noteエディタの話
note engineer meetup #1
https://pieceofcake.connpass.com/event/101173/
ct8ker
October 23, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
310
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
170
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
PDF Viewer作成の今までとこれから
hunachi
0
450
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Functional TypeScript
naoya
11
4.8k
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
930
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
691
190k
Automating Front-end Workflow
addyosmani
1365
200k
Thoughts on Productivity
jonyablonski
66
4.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
For a Future-Friendly Web
brad_frost
174
9.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
What the flash - Photography Introduction
edds
67
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Transcript
noteΤσΟλͷ note engineer meetup #1
ࣗݾհ • 20154݄ʙɹϐʔεΦϒέΠΫ • SIerग़ɹҰ൪ܦݧ͕͍ݴޠJava • ϑϩϯτΔαʔόʔαΠυΤϯδχΞ • झຯΤΦϧθΞͰώΧηϯ Takeshi
Tanazawa https://note.mu/ct8ker
͢͜ͱ • noteΤσΟλͷྺ࢙ • ΤσΟλͷׂ • Ͳ͏ͬͯ։ൃ͖ͯͨ͠ͷ͔ • ࣮͖ͯͨ͠ͷ •
ΤσΟλ։ൃͰͷۤ࿑ • ࠓޙͷ༧ఆ
χϡʔϝΩγί ҎԼൈਮ l͍͜͜ΘաࠅͳχϡʔϝΩγίͷߥͩz l༉அ͔ͨͭ͠ΒαϘςϯʹ͞͞Εͯࢮ͵z l͜͜ΞϯυΡ͢ΔΑ͏ͳࠊൈ͚ੜ͖Εͳ͍χϡʔϝΩ γίͷߥͳͷͩz lࠨͷ΄͏ʹग़ͨΓͰͳ͔ͬͨΓ͢ΔʮʴʯϚʔΫz l͜ͷΑ͏ͳ.FYJDPͷચྱ͕͓·͑Λ͍ͬͯΔz IUUQTEJFIBSEUBMFTDPNOOGEB
noteΤσΟλͷྺ࢙ • ॳʢ201404ʙ͙Β͍ʣ CTO konpyu࡞ɻܹϨΞ • 2ʢ2014͙Β͍ʙ201704ʣ ޭ࿑ऀɻͨͩ͠ɺχϡʔϝΩγίͷߥ • 3ʢ201704ʙʣ
ݱɻߥͰͳ͘ͳͬͨͱࢥ͍͍ͨ
ΤσΟλͷׂ <div contenteditable=“true”> <h3 name=“a”>ݟग़͠</h3> <p name=“b”>ςΩετஈམ</p> <blockquote name=“c”>Ҿ༻</blockquote> <p
name=“d”><img src=“img.jpg”></p> <pre name=“e”><code>ίʔυ</code></pre> <figure name=“f”></figure> </div> • contenteditableΛʮ͑ΔʯΑ͏ʹ͢Δ • ͜ͷϑΥʔϚοτΛࢮक͢Δʢग़དྷΔ͚ͩշదʹʣ
• CSS͕ਖ਼͘͠ద༻͞Εͣɺݟ͕ͨஶ่͘͠ΕΔ • Ұ෦ςΩετ͕ݟ͑ͳ͍ • ༗ྉઃఆ͕ಈ͔ͳ͍ • XSSͷڪා • χϡʔϝΩγίͷߥʹͳΔ
͠ϑΥʔϚοτ่͕ΕΔͱ…
• نҧͷຊจσʔλΛαʔόʔʹૹΔΘ͚ʹ ͍͔ͳ͍ • ฤूૢ࡞ͷࣗ༝ɾշదੑॏཁ͕ͩɺΓڀ ۃతʹnoteϑΥʔϚοτنΛࢮकग़དྷΔൣғ Ͱͷ࣮ݱʹͳΔ
Ͳ͏ͬͯ։ൃ͖ͯͨ͠ͷ͔ • 2016Նࠒɺ3ͷ։ൃελʔτ • 2CoffeeScriptͰॻ͔Ε͍ͯͯɺRailsͷassetsʹ Έࠐ·Ε͍ͯͨɻ 3ಠཱͤͯ͞ɺstandaloneͰಈ͔͍ͨ͠ɻES6 Ͱॻ͖͍ͨ • 2ʹ฿ͬͯɺMediumEditor※Λϕʔεʹ͢Δ
※MediumͬΆ͍ɺOSSͷWYSIWYGΤσΟλ
• શ෦ES5Ͱॻ͔Ε͍ͯΔ • classΛಋೖͯ͠extends֦ͯ͠ு͍ͨ͠ͷʹɺ͜Ε ࠔΔ • πʔϧͰҰൃมΛૂ͕ͬͨ೦ͳ݁Ռʹɻ ख࡞ۀͰશ෦ॻ͖͑ͨ • ES5Ͱॻ͔Εͨಠࣗͷ֦ுػߏআ
MediumEditorΛES6ʹॻ͖͑Δ
• ΄ΜͱTypeScriptʹ͔ͨͬͨ͠ɻ ແ͍ॴʹશ෦ܕ͚͢Δͷ͕ͭΒ͗ͨ͢ (RubyMimeॏ͗ͨ͢) • babelʹܾఆ • ES5 → TS(్த·Ͱ)
→ ES2015 • ͳΜͱ͔MediumEditor ES6(ES2015)൛͕Ͱ͖Δ TypeScript or babel(ES2015)
• webpackͬͯΈΔɻͦͷ··ఆணɻ ࠓʹͳͬͯ4.xܥʹ্͛Α͏ͱͯۤ͠͠Ή • webpack-dev-serverͰstandaloneͰಈ͔͢ HMR(Hot Module Replacement) • MediumEditorͷspecΛಈ͔ͨ͢Ίʹgruntಉډ
Ϗϧυڥͱ͔
• ֦ுίʔυͱMediumEditorίʔυͷσΟϨΫτϦΛ ͚Δ • MediumEditorͷίʔυมߋ͠ͳ͍ มߋ͢ΔͷຊՈߋ৽ʹै͢Δͱ͖͚ͩ • MediumEditorͷspec͕pass͢Δঢ়ଶΛҡ࣋ ޙͰࠔΒͳ͍ͨΊͷ։ൃϧʔϧ
࣮͖ͯͨ͠ͷ • ০ૢ࡞શൠͷϦϝΠΫ • Undo / Redo • ίϐϖ …ͷத͔Βɺಛʹख͕͔͔ؒͬͨͷͨͪ
০ૢ࡞શൠͷϦϝΠΫ
০ૢ࡞શൠͷϦϝΠΫ • MediumEditorcontenteditableͷAPIΛ͍ͬͯ Δ • execCommand(“formatBlock”, false, “p”); • ΫϩεϒϥβͰಈ࡞͕҆ఆ͠ͳ͍ɻ݁Ռ͕͘͠
ͳΒͳ͍
Q. Ͳ͏͢Δ͔ʁ
A. ࣗલͰ࣮
A. ࣗલͰ࣮ ͻͨ͢Β DOM ૢ࡞
Undo / Redo
• ϒϥβϑΥϧτͰɺcontenteditable APIΛͬ ͨฤू͔ͤ͠ͳ͍ • ࣗલͷDOMૢ࡞વޮ͔ͳ͍ Undo / Redo
Q. Ͳ͏͢Δ͔ʁ
A. ࣗલͰ࣮
A. ࣗલͰ࣮ ݁ՌɺDOMૢ࡞ͷࣗ༝্͕͕ͬͨʂ …ͷ͕ຊʹྑ͔ͬͨͷ͔Ͳ͏͔࣌ʑΉ
ίϐϖ
• contenteditable APIͷதͰಛʹ৴༻Ͱ͖ͳ͍ ” insertHTML” Λ͍ͬͯͨ • ͠͠noteϑΥʔϚοτΛഁյ͍ͯͨ͠ ίϐϖ
Q. Ͳ͏͢Δ͔ʁ
A. ࣗલͰ࣮
A. ࣗલͰ࣮ ͨͩͨͩͻͨ͢Β DOM ૢ࡞
ΤσΟλ։ൃͰͷۤ࿑ • ΫϩεϒϥβରԠ ϒϥβຖʹڍಈ͕ҧ͏ͱͭΒ͍ɻDOMૢ࡞Λ૿ ͯ͠ݮ͖͕ͬͯͨɺͦΕͰEdge… • ΤσΟλͰ͋ΕҰൠతʹʮ͜͏ಈ͍ͯͨΓલʯ ͳػೳΛɺͦͷ௨ΓͨΓલʹ࣮ݱ͠ͳ͚ΕͳΒ ͳ͍͠͞ web͔ͩΒଟগΞϨͰ͍͍͡ΌΜʁ
ࠓޙͷ༧ఆ • εϚϗରԠ ͏͙͢ग़·͢
ࠓޙͷ༧ఆ • ϑϧεΫϥονʹ͢Δ • noteઐ༻ػೳϓϥάΠϯͱͯ͠جຊػೳͱ͠ɺ noteҎ֎Ͱ͑Δ൚༻ੑΛ͍࣋ͨͤͨ • खͬͯ͘ΕΔํΛ͓͍ͪͯ͠·͢ʂ 4ΤσΟλ
͋Γ͕ͱ͏͍͟͝·ͨ͠