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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ct8ker
October 23, 2018
Technology
1
12k
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
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
170
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Amazon Bedrock Knowledge Basesチャンキング解説!
aoinoguchi
0
120
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
610
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
使いにくいの壁を突破する
sansantech
PRO
1
130
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.2k
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
bbqallstars
4
1.8k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.5k
Agile Leadership Summit Keynote 2026
m_seki
1
560
Featured
See All Featured
The untapped power of vector embeddings
frankvandijk
1
1.6k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
930
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
0
110
Building the Perfect Custom Keyboard
takai
2
680
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
320
Making Projects Easy
brettharned
120
6.6k
Agile that works and the tools we love
rasmusluckow
331
21k
Designing Powerful Visuals for Engaging Learning
tmiket
0
230
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
200
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
53
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ΤσΟλ
͋Γ͕ͱ͏͍͟͝·ͨ͠