Upgrade to Pro — share decks privately, control downloads, hide ads and more …

noteエディタの話

ct8ker
October 23, 2018

 noteエディタの話

ct8ker

October 23, 2018
Tweet

Other Decks in Technology

Transcript

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

    View full-size slide

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

    https://note.mu/ct8ker

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

  6. ΤσΟλͷ໾ׂ

    ݟग़͠

    ςΩετஈམ

    Ҿ༻


    ίʔυ

    <figure name=“f”>figure>


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

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

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

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

    View full-size slide

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


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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Q. Ͳ͏͢Δ͔ʁ

    View full-size slide

  18. A. ࣗલͰ࣮૷

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Q. Ͳ͏͢Δ͔ʁ

    View full-size slide

  22. A. ࣗલͰ࣮૷

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  25. Q. Ͳ͏͢Δ͔ʁ

    View full-size slide

  26. A. ࣗલͰ࣮૷

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    ΋͏͙͢ग़·͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide