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
Creative UIs with Compose: Kotlinconf 2025
chrishorner
0
140
エンジニアのための 法規制への取り組み方 #healthtechmeetup
77web
0
260
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
230
Sleep-time Compute: LLM推論コスト削減のための事前推論
sergicalsix
1
160
LLMベースAIの基本 / basics of LLM based AI
kishida
9
2k
技術選定の仕方 - FLEXYウェビナー / How to select technology
shinden
1
120
AIフレンドリーなプロダクト開発を目指して 〜MCPを橋渡しにした環境移行〜
shinpr
0
140
インラインRBSコメントに鯛pe checkersもニッコリ
sansantech
PRO
2
210
事業と組織から目を逸らずに技術でリードする
ogugu9
19
5.5k
開発も運用もビジネス部門も! クラウドで実現する「つらくない」統制とセキュリティ / Effortless Governance and Security Enabled by the Cloud
kanny
1
370
Опыт использования Nessie в Азбуке Вкуса
emeremyanina1234
0
470
計装を見直してアプリケーションパフォーマンスを改善させた話
donkomura
2
210
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GraphQLとの向き合い方2022年版
quramy
46
14k
Code Review Best Practice
trishagee
68
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Faster Mobile Websites
deanohume
307
31k
GitHub's CSS Performance
jonrohan
1031
460k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
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ΤσΟλ
͋Γ͕ͱ͏͍͟͝·ͨ͠