noteエディタの話

03417c708d2b94c0969aa11e9ff7ccd2?s=47 ct8ker
October 23, 2018

 noteエディタの話

03417c708d2b94c0969aa11e9ff7ccd2?s=128

ct8ker

October 23, 2018
Tweet

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