noteエディタの話

note engineer meetup #1
https://pieceofcake.connpass.com/event/101173/

Transcript

1. noteΤσΟλͷ࿩ note engineer meetup #1
2. ࣗݾ঺հ • 2015೥4݄ʙɹϐʔεΦϒέΠΫ • SIerग़਎ɹҰ൪ܦݧ͕௕͍ݴޠ͸Java • ϑϩϯτ΋΍ΔαʔόʔαΠυΤϯδχΞ • झຯ͸ΤΦϧθΞͰώΧηϯ Takeshi Tanazawa
 https://note.mu/ct8ker
3. ࿩͢͜ͱ • noteΤσΟλͷྺ࢙ • ΤσΟλͷ໾ׂ • Ͳ͏΍ͬͯ։ൃ͖ͯͨ͠ͷ͔ • ࣮૷͖ͯͨ͠΋ͷ • ΤσΟλ։ൃͰͷۤ࿑ • ࠓޙͷ༧ఆ
4. χϡʔϝΩγί ҎԼൈਮ
   l͜͜͸͍Θ͹աࠅͳχϡʔϝΩγίͷߥ໺ͩz
   l༉அͨ͠΍͔ͭΒαϘςϯʹ͞͞Εͯࢮ͵z
   l͜͜͸ΞϯυΡ͢ΔΑ͏ͳࠊൈ͚͸ੜ͖࢒Εͳ͍χϡʔϝΩ γίͷߥ໺ͳͷͩz
   lࠨͷ΄͏ʹग़ͨΓͰͳ͔ͬͨΓ͢ΔʮʴʯϚʔΫz
   l͜ͷΑ͏ͳ.FYJDPͷચྱ͕͓·͑Λ଴͍ͬͯΔz IUUQTEJFIBSEUBMFTDPNOOGEB
5. noteΤσΟλͷྺ࢙ • ॳ୅ʢ201404ʙ൒೥͙Β͍ʣ
 CTO konpyu࡞ɻܹϨΞ • 2୅໨ʢ2014຤͙Β͍ʙ201704ʣ
 ޭ࿑ऀɻͨͩ͠ɺχϡʔϝΩγίͷߥ໺ • 3୅໨ʢ201704ʙʣ
 ݱ໾ɻߥ໺Ͱ͸ͳ͘ͳͬͨͱࢥ͍͍ͨ
6. ΤσΟλͷ໾ׂ <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Λʮ࢖͑ΔʯΑ͏ʹ͢Δ • ͜ͷϑΥʔϚοτΛࢮक͢Δʢग़དྷΔ͚ͩշదʹʣ
7. • CSS͕ਖ਼͘͠ద༻͞Εͣɺݟͨ໨͕ஶ่͘͠ΕΔ • Ұ෦ςΩετ͕ݟ͑ͳ͍ • ༗ྉઃఆ͕ಈ͔ͳ͍ • XSSͷڪා • χϡʔϝΩγίͷߥ໺ʹͳΔ ΋͠ϑΥʔϚοτ่͕ΕΔͱ…
8. • ن໿ҧ൓ͷຊจσʔλΛαʔόʔʹૹΔΘ͚ʹ͸ ͍͔ͳ͍ • ฤूૢ࡞ͷࣗ༝౓ɾշదੑ͸ॏཁ͕ͩɺ΍͸Γڀ ۃతʹ͸noteϑΥʔϚοτن໿Λࢮकग़དྷΔൣғ ಺Ͱͷ࣮ݱʹͳΔ
9. Ͳ͏΍ͬͯ։ൃ͖ͯͨ͠ͷ͔ • 2016೥Նࠒɺ3୅໨ͷ։ൃελʔτ • 2୅໨͸CoffeeScriptͰॻ͔Ε͍ͯͯɺRailsͷassetsʹ ૊Έࠐ·Ε͍ͯͨɻ
 3୅໨͸ಠཱͤͯ͞ɺstandaloneͰ΋ಈ͔͍ͨ͠ɻES6 Ͱॻ͖͍ͨ • 2୅໨ʹ฿ͬͯɺMediumEditor※Λϕʔεʹ͢Δ
 ※MediumͬΆ͍ɺOSSͷWYSIWYGΤσΟλ
10. • શ෦ES5Ͱॻ͔Ε͍ͯΔ • classΛಋೖͯ͠extends֦ͯ͠ு͍ͨ͠ͷʹɺ͜Ε ͸ࠔΔ • πʔϧͰҰൃม׵Λૂ͕ͬͨ࢒೦ͳ݁Ռʹɻ
 ख࡞ۀͰશ෦ॻ͖׵͑ͨ • ES5Ͱॻ͔Εͨಠࣗͷ֦ுػߏ͸࡟আ MediumEditorΛES6ʹॻ͖׵͑Δ
11. • ΄Μͱ͸TypeScriptʹ͔ͨͬͨ͠ɻ
 ແ͍ॴʹશ෦ܕ෇͚͢Δͷ͕ͭΒ͗ͨ͢
 (RubyMime΋ॏ͗ͨ͢) • babelʹܾఆ • ES5 → TS(్த·Ͱ) → ES2015 • ͳΜͱ͔MediumEditor ES6(ES2015)൛͕Ͱ͖Δ TypeScript or babel(ES2015)
12. • webpack࢖ͬͯΈΔɻͦͷ··ఆணɻ
 ࠓ೥ʹͳͬͯ4.xܥʹ্͛Α͏ͱͯۤ͠͠Ή • webpack-dev-serverͰstandaloneͰಈ͔͢
 HMR(Hot Module Replacement) • MediumEditorͷspecΛಈ͔ͨ͢Ίʹgrunt΋ಉډ Ϗϧυ؀ڥͱ͔
13. • ֦ுίʔυͱMediumEditorίʔυͷσΟϨΫτϦΛ ෼͚Δ
 
 • MediumEditorͷίʔυ͸มߋ͠ͳ͍
 มߋ͢Δͷ͸ຊՈߋ৽ʹ௥ै͢Δͱ͖͚ͩ • MediumEditorͷspec͕pass͢Δঢ়ଶΛҡ࣋ ޙͰࠔΒͳ͍ͨΊͷ։ൃϧʔϧ
14. ࣮૷͖ͯͨ͠΋ͷ • ૷০ૢ࡞શൠͷϦϝΠΫ • Undo / Redo • ίϐϖ …ͷத͔Βɺಛʹख͕͔͔ؒͬͨ΋ͷͨͪ
15. ૷০ૢ࡞શൠͷϦϝΠΫ
16. ૷০ૢ࡞શൠͷϦϝΠΫ • MediumEditor͸contenteditableͷAPIΛ࢖͍ͬͯ Δ • execCommand(“formatBlock”, false, “p”); • Ϋϩεϒϥ΢βͰಈ࡞͕҆ఆ͠ͳ͍ɻ݁Ռ͕౳͘͠ ͳΒͳ͍
17. Q. Ͳ͏͢Δ͔ʁ
18. A. ࣗલͰ࣮૷
19. A. ࣗલͰ࣮૷ ͻͨ͢Β DOM ૢ࡞
20. Undo / Redo
21. • ϒϥ΢βϑΥϧτͰ͸ɺcontenteditable APIΛ࢖ͬ ͨฤू͔͠໭ͤͳ͍ • ࣗલͷDOMૢ࡞͸౰વޮ͔ͳ͍ Undo / Redo
22. Q. Ͳ͏͢Δ͔ʁ
23. A. ࣗલͰ࣮૷
24. A. ࣗલͰ࣮૷ ݁ՌɺDOMૢ࡞ͷࣗ༝౓্͕͕ͬͨʂ
 …ͷ͕ຊ౰ʹྑ͔ͬͨͷ͔Ͳ͏͔࣌ʑ೰Ή
25. ίϐϖ
26. • contenteditable APIͷதͰ΋ಛʹ৴༻Ͱ͖ͳ͍
 ” insertHTML” Λ࢖͍ͬͯͨ • ͠͹͠͹noteϑΥʔϚοτΛഁյ͍ͯͨ͠ ίϐϖ
27. Q. Ͳ͏͢Δ͔ʁ
28. A. ࣗલͰ࣮૷
29. A. ࣗલͰ࣮૷ ͨͩͨͩͻͨ͢Β DOM ૢ࡞
30. ΤσΟλ։ൃͰͷۤ࿑ • Ϋϩεϒϥ΢βରԠ
 ϒϥ΢βຖʹڍಈ͕ҧ͏ͱͭΒ͍ɻDOMૢ࡞Λ૿΍ ͯ͠ݮ͖͕ͬͯͨɺͦΕͰ΋Edge͸… • ΤσΟλͰ͋Ε͹Ұൠతʹʮ͜͏ಈ͍ͯ౰ͨΓલʯ ͳػೳΛɺͦͷ௨Γ౰ͨΓલʹ࣮ݱ͠ͳ͚Ε͹ͳΒ ͳ͍೉͠͞
 web͔ͩΒଟগΞϨͰ΋͍͍͡ΌΜʁ
31. ࠓޙͷ༧ఆ • εϚϗରԠ
 ΋͏͙͢ग़·͢
32. ࠓޙͷ༧ఆ • ϑϧεΫϥονʹ͢Δ • noteઐ༻ػೳ͸ϓϥάΠϯͱͯ͠جຊػೳͱ෼཭͠ɺ noteҎ֎Ͱ΋࢖͑Δ൚༻ੑΛ͍࣋ͨͤͨ • ख఻ͬͯ͘ΕΔํΛ͓଴͍ͪͯ͠·͢ʂ 4୅໨ΤσΟλ
33. ͋Γ͕ͱ͏͍͟͝·ͨ͠