noteエディタの話

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

Transcript

1. noteΤσΟλͷ࿩
   note engineer meetup #1
   

   View Slide

2. ࣗݾ঺հ
   • 2015೥4݄ʙɹϐʔεΦϒέΠΫ
   • SIerग़਎ɹҰ൪ܦݧ͕௕͍ݴޠ͸Java
   • ϑϩϯτ΋΍ΔαʔόʔαΠυΤϯδχΞ
   • झຯ͸ΤΦϧθΞͰώΧηϯ
   Takeshi Tanazawa

   https://note.mu/ct8ker
   

   View Slide

3. ࿩͢͜ͱ
   • noteΤσΟλͷྺ࢙
   • ΤσΟλͷ໾ׂ
   • Ͳ͏΍ͬͯ։ൃ͖ͯͨ͠ͷ͔
   • ࣮૷͖ͯͨ͠΋ͷ
   • ΤσΟλ։ൃͰͷۤ࿑
   • ࠓޙͷ༧ఆ
   

   View Slide

4. χϡʔϝΩγί
   ҎԼൈਮ
   l͜͜͸͍Θ͹աࠅͳχϡʔϝΩγίͷߥ໺ͩz
   l༉அͨ͠΍͔ͭΒαϘςϯʹ͞͞Εͯࢮ͵z
   l͜͜͸ΞϯυΡ͢ΔΑ͏ͳࠊൈ͚͸ੜ͖࢒Εͳ͍χϡʔϝΩ
   γίͷߥ໺ͳͷͩz
   lࠨͷ΄͏ʹग़ͨΓͰͳ͔ͬͨΓ͢ΔʮʴʯϚʔΫz
   l͜ͷΑ͏ͳ.FYJDPͷચྱ͕͓·͑Λ଴͍ͬͯΔz
   IUUQTEJFIBSEUBMFTDPNOOGEB
   

   View Slide

5. noteΤσΟλͷྺ࢙
   • ॳ୅ʢ201404ʙ൒೥͙Β͍ʣ

   CTO konpyu࡞ɻܹϨΞ
   • 2୅໨ʢ2014຤͙Β͍ʙ201704ʣ

   ޭ࿑ऀɻͨͩ͠ɺχϡʔϝΩγίͷߥ໺
   • 3୅໨ʢ201704ʙʣ

   ݱ໾ɻߥ໺Ͱ͸ͳ͘ͳͬͨͱࢥ͍͍ͨ
   

   View Slide

6. ΤσΟλͷ໾ׂ
   

   ݟग़͠

   ςΩετஈམ

   Ҿ༻

   

   ίʔυ

   <figure name=“f”>figure>

   
   • contenteditableΛʮ࢖͑ΔʯΑ͏ʹ͢Δ
   • ͜ͷϑΥʔϚοτΛࢮक͢Δʢग़དྷΔ͚ͩշదʹʣ
   

   View Slide

7. • CSS͕ਖ਼͘͠ద༻͞Εͣɺݟͨ໨͕ஶ่͘͠ΕΔ
   • Ұ෦ςΩετ͕ݟ͑ͳ͍
   • ༗ྉઃఆ͕ಈ͔ͳ͍
   • XSSͷڪා
   • χϡʔϝΩγίͷߥ໺ʹͳΔ
   ΋͠ϑΥʔϚοτ่͕ΕΔͱ…
   

   View Slide

8. • ن໿ҧ൓ͷຊจσʔλΛαʔόʔʹૹΔΘ͚ʹ͸
   ͍͔ͳ͍
   • ฤूૢ࡞ͷࣗ༝౓ɾշదੑ͸ॏཁ͕ͩɺ΍͸Γڀ
   ۃతʹ͸noteϑΥʔϚοτن໿Λࢮकग़དྷΔൣғ
   ಺Ͱͷ࣮ݱʹͳΔ
   

   View Slide

9. Ͳ͏΍ͬͯ։ൃ͖ͯͨ͠ͷ͔
   • 2016೥Նࠒɺ3୅໨ͷ։ൃελʔτ
   • 2୅໨͸CoffeeScriptͰॻ͔Ε͍ͯͯɺRailsͷassetsʹ
   ૊Έࠐ·Ε͍ͯͨɻ

   3୅໨͸ಠཱͤͯ͞ɺstandaloneͰ΋ಈ͔͍ͨ͠ɻES6
   Ͱॻ͖͍ͨ
   • 2୅໨ʹ฿ͬͯɺMediumEditor※Λϕʔεʹ͢Δ

   ※MediumͬΆ͍ɺOSSͷWYSIWYGΤσΟλ
   

   View Slide

10. • શ෦ES5Ͱॻ͔Ε͍ͯΔ
    • classΛಋೖͯ͠extends֦ͯ͠ு͍ͨ͠ͷʹɺ͜Ε
    ͸ࠔΔ
    • πʔϧͰҰൃม׵Λૂ͕ͬͨ࢒೦ͳ݁Ռʹɻ

    ख࡞ۀͰશ෦ॻ͖׵͑ͨ
    • ES5Ͱॻ͔Εͨಠࣗͷ֦ுػߏ͸࡟আ
    MediumEditorΛES6ʹॻ͖׵͑Δ
    

    View Slide

11. • ΄Μͱ͸TypeScriptʹ͔ͨͬͨ͠ɻ

    ແ͍ॴʹશ෦ܕ෇͚͢Δͷ͕ͭΒ͗ͨ͢

    (RubyMime΋ॏ͗ͨ͢)
    • babelʹܾఆ
    • ES5 → TS(్த·Ͱ) → ES2015
    • ͳΜͱ͔MediumEditor ES6(ES2015)൛͕Ͱ͖Δ
    TypeScript or babel(ES2015)
    

    View Slide

12. • webpack࢖ͬͯΈΔɻͦͷ··ఆணɻ

    ࠓ೥ʹͳͬͯ4.xܥʹ্͛Α͏ͱͯۤ͠͠Ή
    • webpack-dev-serverͰstandaloneͰಈ͔͢

    HMR(Hot Module Replacement)
    • MediumEditorͷspecΛಈ͔ͨ͢Ίʹgrunt΋ಉډ
    Ϗϧυ؀ڥͱ͔
    

    View Slide

13. • ֦ுίʔυͱMediumEditorίʔυͷσΟϨΫτϦΛ
    ෼͚Δ

    

    • MediumEditorͷίʔυ͸มߋ͠ͳ͍

    มߋ͢Δͷ͸ຊՈߋ৽ʹ௥ै͢Δͱ͖͚ͩ
    • MediumEditorͷspec͕pass͢Δঢ়ଶΛҡ࣋
    ޙͰࠔΒͳ͍ͨΊͷ։ൃϧʔϧ
    

    View Slide

14. ࣮૷͖ͯͨ͠΋ͷ
    • ૷০ૢ࡞શൠͷϦϝΠΫ
    • Undo / Redo
    • ίϐϖ
    …ͷத͔Βɺಛʹख͕͔͔ؒͬͨ΋ͷͨͪ
    

    View Slide

15. ૷০ૢ࡞શൠͷϦϝΠΫ
    

    View Slide

16. ૷০ૢ࡞શൠͷϦϝΠΫ
    • MediumEditor͸contenteditableͷAPIΛ࢖͍ͬͯ
    Δ
    • execCommand(“formatBlock”, false, “p”);
    • Ϋϩεϒϥ΢βͰಈ࡞͕҆ఆ͠ͳ͍ɻ݁Ռ͕౳͘͠
    ͳΒͳ͍
    

    View Slide

17. Q. Ͳ͏͢Δ͔ʁ
    

    View Slide

18. A. ࣗલͰ࣮૷
    

    View Slide

19. A. ࣗલͰ࣮૷
    ͻͨ͢Β DOM ૢ࡞
    

    View Slide

20. Undo / Redo
    

    View Slide

21. • ϒϥ΢βϑΥϧτͰ͸ɺcontenteditable APIΛ࢖ͬ
    ͨฤू͔͠໭ͤͳ͍
    • ࣗલͷDOMૢ࡞͸౰વޮ͔ͳ͍
    Undo / Redo
    

    View Slide

22. Q. Ͳ͏͢Δ͔ʁ
    

    View Slide

23. A. ࣗલͰ࣮૷
    

    View Slide

24. A. ࣗલͰ࣮૷
    ݁ՌɺDOMૢ࡞ͷࣗ༝౓্͕͕ͬͨʂ

    …ͷ͕ຊ౰ʹྑ͔ͬͨͷ͔Ͳ͏͔࣌ʑ೰Ή
    

    View Slide

25. ίϐϖ
    

    View Slide

26. • contenteditable APIͷதͰ΋ಛʹ৴༻Ͱ͖ͳ͍

    ” insertHTML” Λ࢖͍ͬͯͨ
    • ͠͹͠͹noteϑΥʔϚοτΛഁյ͍ͯͨ͠
    ίϐϖ
    

    View Slide

27. Q. Ͳ͏͢Δ͔ʁ
    

    View Slide

28. A. ࣗલͰ࣮૷
    

    View Slide

29. A. ࣗલͰ࣮૷
    ͨͩͨͩͻͨ͢Β DOM ૢ࡞
    

    View Slide

30. ΤσΟλ։ൃͰͷۤ࿑
    • Ϋϩεϒϥ΢βରԠ

    ϒϥ΢βຖʹڍಈ͕ҧ͏ͱͭΒ͍ɻDOMૢ࡞Λ૿΍
    ͯ͠ݮ͖͕ͬͯͨɺͦΕͰ΋Edge͸…
    • ΤσΟλͰ͋Ε͹Ұൠతʹʮ͜͏ಈ͍ͯ౰ͨΓલʯ
    ͳػೳΛɺͦͷ௨Γ౰ͨΓલʹ࣮ݱ͠ͳ͚Ε͹ͳΒ
    ͳ͍೉͠͞

    web͔ͩΒଟগΞϨͰ΋͍͍͡ΌΜʁ
    

    View Slide

31. ࠓޙͷ༧ఆ
    • εϚϗରԠ

    ΋͏͙͢ग़·͢
    

    View Slide

32. ࠓޙͷ༧ఆ
    • ϑϧεΫϥονʹ͢Δ
    • noteઐ༻ػೳ͸ϓϥάΠϯͱͯ͠جຊػೳͱ෼཭͠ɺ
    noteҎ֎Ͱ΋࢖͑Δ൚༻ੑΛ͍࣋ͨͤͨ
    • ख఻ͬͯ͘ΕΔํΛ͓଴͍ͪͯ͠·͢ʂ
    4୅໨ΤσΟλ
    

    View Slide

33. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide