noteエディタの話

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠