Slide 1

Slide 1 text

2023/03/03 oliver ςΩετΤσΟλͷϒϥ΢β࣮૷

Slide 2

Slide 2 text

࠷࣮ۙ૷ͨ͠΍ͭ • ΢Ϛ່ͷίϛϡχςΟαΠτΛӡ༻ ͍ͯ͠Δͷ͕ͩɺهࣄػೳ͕ཉ͍͠ ͱ͍͏ཁ๬͕͋ͬͨͷͰ࠷࣮ۙ૷͠ ͨɻ • ͦΕ·Ͱ͸noteͰॻ͍͍ͯΔਓ͕ଟ ͘ɺҠߦͤ͞Δʹ͸͋Δఔ౓Ϧον ͳΤσΟλΛ࣮૷͢Δඞཁ͕͋ͬ ͨɻ • εϚϗ͔ΒهࣄΛॻ͘Ϣʔβʔ͕ଟ ͍͜ͱʹཹҙ͢Δඞཁ͕͋ͬͨɻ ࡞ͬͨ΍ͭ👆 http://u.kitachan.black/

Slide 3

Slide 3 text

Ͳ͏΍࣮ͬͯ૷͢Δʁ • ૉ௚ʹ࣮૷͢ΔͳΒ ʮcontenteditableʯଐੑΛ༻͍ ͯؤுΔɻ • ͜ͷଐੑΛ࢖༻͢Δ͜ͱͰɺ DOMʹରͯ͠௚઀ฤू͕Մೳͱ ͳΔɻ • Ұݟศརͦ͏ʹݟ͑Δ͜ͷଐੑ ʹɺਓྨ͸೰·͞Εଓ͚͖ͯͨ ʢΒ͍͠ʣɻ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable

Slide 4

Slide 4 text

ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ

Slide 5

Slide 5 text

ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ

Slide 6

Slide 6 text

Կ͕զʑΛۤ͠Ίͨͷ͔ • ͦ΋ͦ΋ςΩετΤσΟλͱ͍͏ཁ ݅ͷෳࡶੑ • ΩʔϘʔυૢ࡞ͳͲͷϒϥ΢βؒґ ଘͷٵऩ
 ʢྫ͑͹ʮCmd + bʯͰଠࣈʹ͢Δ ͱ͔ʣ • IMEʢಛʹ೔ຊޠೖྗʣͷޓ׵ੑ ʢΠϕϯτൃՐͰಘΒΕΔ஋͕มΘ ΔΒ͍͠…?ʣ • ίϐϖ…ΧʔιϧҐஔ… https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable

Slide 7

Slide 7 text

͔ͳΓۤ͠ΜͰΔʢۤ͠ΜͰͨʣਓͨͪ https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable/ https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480

Slide 8

Slide 8 text

ϒϥ΢βؒґଘͷྫ Cmd + b Cmd + b ͳΜͰϒοΫϚʔΫ 💢

Slide 9

Slide 9 text

ϒϥ΢βؒґଘͷྫ ΧʔιϧΛӈ͔Βࠨ΁Ҡಈͯ͠ೖྗ ΧʔιϧΛࠨ͔Βӈ΁Ҡಈͯ͠ೖྗ ͍͚ͭͩ͜ଠࣈʹͳΔ ΦϑηοτͲ͜΍ͶΜ 💢

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

೉͍͜͠ͱ͸ϥΠϒϥϦʹ೚ͤΑ͏ʂ • Reactͷ৔߹͸ʮLexicalʯ΍ʮTiptapʯ͕࠷ۙ Ͱ͸ީิʹ্͕ΔʢDraft.js͸ΞʔΧΠϒࡁ🙏ʣ • ʮcontenteditableʯΛʢͦ͜·Ͱʣҙࣝ͠ͳ͘ ͯ΋ΤσΟλ͕࣮૷Ͱ͖Δʂ • جຊతͳΩʔϘʔυγϣʔτΧοτΛ࢝Ίɺಠ ࣗͷγϣʔτΧοτ΋؆୯ʹ௥ՃͰ͖Δʂ • JSONͳͲͷܗʹύʔε͢Δ͜ͱ͕Ͱ͖Δͨ ΊɺHTMLͰอଘ͢Δඞཁ͕ͳ͘ͳΔʂ https://tiptap.dev/ https://lexical.dev/

Slide 12

Slide 12 text

Tiptapͷັྗ • Ұ௨ΓΤσΟλͱͯ͠ඞཁͳػೳ͸ ʮStarterKitʯͰఏڙ͞Ε͍ͯΔɻ • ը૾ͷࠩ͠ࠐΈ΍YouTubeຒΊࠐΈͳͲͷ ػೳ͸֦ுػೳͱͯ͠ެ͕ࣜఏڙ͍ͯ͠ ͯɺ؆୯ʹ௥ՃͰ͖Δɻ • TwitterຒΊࠐΈͳͲɺެ͕ࣜఏڙͯ͠ͳ͍ ػೳͰ΋ɺ؆୯ʹΧελϜϊʔυͱͯ͠ఆ ٛͰ͖Δɻ • ଞʹ΋ศརػೳ͕͍ͬͺ͍ʂ

Slide 13

Slide 13 text

Twitter Widget ϊʔυͷྫ • renderHTMLͰͲͷΑ ͏ʹͯ͠σʔλΛද ࣔ͢Δ͔Λఆٛ • addCommands͸Ϙ λϯͳͲ͔ΒTwitter ΛຒΊࠐΊΔΑ͏ʹ ͢Δઃఆ • addPasteRules͸ίϐ ϖͨ࣌͠ʹࣗಈల։ ͞ΕΔ৚݅ઃఆ

Slide 14

Slide 14 text

࣮ࡍʹDBʹอଘ͢Δࡍͷσʔλߏ଄ʢྫʣ

Slide 15

Slide 15 text

ͱ͸͍͑Issue͕ଟ͍ͷͰա৴͸ې෺

Slide 16

Slide 16 text

͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ࣗ෼͕࡞ͬͨϓϩμΫτ͕ 
 ༷ʑͳϒϥ΢βͰόάͳ͘ಈ͔͘ 
 ৺഑ʹͳ͖ͬͯ·ͨ͠😇 ׬