noteエディタの話 - Speaker Deck

noteエディタの話

by ct8ker

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

noteΤσΟλͷྺ࢙ • ॳ୅ʢ201404ʙ൒೥͙Β͍ʣ  CTO konpyu࡞ɻܹϨΞ • 2୅໨ʢ2014຤͙Β͍ʙ201704ʣ  ޭ࿑ऀɻͨͩ͠ɺχϡʔϝΩγίͷߥ໺ • 3୅໨ʢ201704ʙʣ  ݱ໾ɻߥ໺Ͱ͸ͳ͘ͳͬͨͱࢥ͍͍ͨ

Slide 6

Slide 6 text

ΤσΟλͷ໾ׂ

ݟग़͠

ςΩετஈམ

Ҿ༻

ίʔυ

  <ﬁgure name=“f”> 

• contenteditableΛʮ࢖͑ΔʯΑ͏ʹ͢Δ • ͜ͷϑΥʔϚοτΛࢮक͢Δʢग़དྷΔ͚ͩշదʹʣ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ͳ͏΍ͬͯ։ൃ͖ͯͨ͠ͷ͔ • 2016೥Նࠒɺ3୅໨ͷ։ൃελʔτ • 2୅໨͸CoffeeScriptͰॻ͔Ε͍ͯͯɺRailsͷassetsʹ ૊Έࠐ·Ε͍ͯͨɻ  3୅໨͸ಠཱͤͯ͞ɺstandaloneͰ΋ಈ͔͍ͨ͠ɻES6 Ͱॻ͖͍ͨ • 2୅໨ʹ฿ͬͯɺMediumEditor※Λϕʔεʹ͢Δ  ※MediumͬΆ͍ɺOSSͷWYSIWYGΤσΟλ

Slide 10

Slide 10 text

• શ෦ES5Ͱॻ͔Ε͍ͯΔ • classΛಋೖͯ͠extends֦ͯ͠ு͍ͨ͠ͷʹɺ͜Ε ͸ࠔΔ • πʔϧͰҰൃม׵Λૂ͕ͬͨ࢒೦ͳ݁Ռʹɻ  ख࡞ۀͰશ෦ॻ͖׵͑ͨ • ES5Ͱॻ͔Εͨಠࣗͷ֦ுػߏ͸࡟আ MediumEditorΛES6ʹॻ͖׵͑Δ

Slide 11

Slide 11 text

• ΄Μͱ͸TypeScriptʹ͔ͨͬͨ͠ɻ  ແ͍ॴʹશ෦ܕ෇͚͢Δͷ͕ͭΒ͗ͨ͢  (RubyMime΋ॏ͗ͨ͢) • babelʹܾఆ • ES5 → TS(్த·Ͱ) → ES2015 • ͳΜͱ͔MediumEditor ES6(ES2015)൛͕Ͱ͖Δ TypeScript or babel(ES2015)

Slide 12

Slide 12 text

• webpack࢖ͬͯΈΔɻͦͷ··ఆணɻ  ࠓ೥ʹͳͬͯ4.xܥʹ্͛Α͏ͱͯۤ͠͠Ή • webpack-dev-serverͰstandaloneͰಈ͔͢  HMR(Hot Module Replacement) • MediumEditorͷspecΛಈ͔ͨ͢Ίʹgrunt΋ಉډ Ϗϧυ؀ڥͱ͔

Slide 13

Slide 13 text

• ֦ுίʔυͱMediumEditorίʔυͷσΟϨΫτϦΛ ෼͚Δ    • MediumEditorͷίʔυ͸มߋ͠ͳ͍  มߋ͢Δͷ͸ຊՈߋ৽ʹ௥ै͢Δͱ͖͚ͩ • MediumEditorͷspec͕pass͢Δঢ়ଶΛҡ࣋ ޙͰࠔΒͳ͍ͨΊͷ։ൃϧʔϧ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

૷০ૢ࡞શൠͷϦϝΠΫ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Q. Ͳ͏͢Δ͔ʁ

Slide 18

Slide 18 text

A. ࣗલͰ࣮૷

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Undo / Redo

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Q. Ͳ͏͢Δ͔ʁ

Slide 23

Slide 23 text

A. ࣗલͰ࣮૷

Slide 24

Slide 24 text

A. ࣗલͰ࣮૷ ݁ՌɺDOMૢ࡞ͷࣗ༝౓্͕͕ͬͨʂ  …ͷ͕ຊ౰ʹྑ͔ͬͨͷ͔Ͳ͏͔࣌ʑ೰Ή

Slide 25

Slide 25 text

ίϐϖ

Slide 26

Slide 26 text

• contenteditable APIͷதͰ΋ಛʹ৴༻Ͱ͖ͳ͍  ” insertHTML” Λ࢖͍ͬͯͨ • ͠͹͠͹noteϑΥʔϚοτΛഁյ͍ͯͨ͠ ίϐϖ

Slide 27

Slide 27 text

Q. Ͳ͏͢Δ͔ʁ

Slide 28

Slide 28 text

A. ࣗલͰ࣮૷

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ΤσΟλ։ൃͰͷۤ࿑ • Ϋϩεϒϥ΢βରԠ  ϒϥ΢βຖʹڍಈ͕ҧ͏ͱͭΒ͍ɻDOMૢ࡞Λ૿΍ ͯ͠ݮ͖͕ͬͯͨɺͦΕͰ΋Edge͸… • ΤσΟλͰ͋Ε͹Ұൠతʹʮ͜͏ಈ͍ͯ౰ͨΓલʯ ͳػೳΛɺͦͷ௨Γ౰ͨΓલʹ࣮ݱ͠ͳ͚Ε͹ͳΒ ͳ͍೉͠͞  web͔ͩΒଟগΞϨͰ΋͍͍͡ΌΜʁ

Slide 31

Slide 31 text

ࠓޙͷ༧ఆ • εϚϗରԠ  ΋͏͙͢ग़·͢

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

͋Γ͕ͱ͏͍͟͝·ͨ͠