Copyright(C) 2017 Findy Inc. All rights reserved.
React + Contenteditable Ͱ࡞Δ
ຐͷϑΥʔϜ
CTO ࠤ౻ কߴ (@ma3tk)
2017/10/06(ۚ) Gotanda.js
Slide 2
Slide 2 text
Copyright(C) 2017 Findy Inc. All rights reserved.
2
ࠓͷൃදʹ͍ͭͯ
● ޒాͷάϧϝใʹ͍͓ͭͯ͠·ͤΜ(?)
● ଜ্य़थ͕͍ͭϊʔϕϧจֶ͕औΕΔ͔ʹ͍ͭͯ
͠·ͤΜ
● React Ͱ WYSIWYG ͳΤσΟλ(ϑΥʔϜ)Λ࡞ͬͯ
ਏ͔ͬͨ(ݱࡏਐߦܥ)ͱ͍͏͓Λ͠·͢
Slide 3
Slide 3 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Զ is ୭
3
ϑΝΠϯσΟגࣜձࣾ
औకCTOɿࠤ౻ কߴ
ɹ·ͨ͞Μ (@ma3tk)
ޒా.js ͡Ίͯ
౦ژେֶใཧֶܥݚڀՊใֶઐ߈ଔۀޙɺάϦʔΛܦͯ
FindyͷۀʹࢀըɻେֶӃͰɺҴ༿ਅཧݚڀࣨʹॴଐɻաڈ10
ͷจʹର͠จؒͷྨࣅΛɺࣗવݴޠॲཧσʔλϚΠχϯάʹ
ΑΓ༰ͷղੳΛఆྔతɾఆੑతʹߦ͏͜ͱͰࢉग़͢ΔจΛࣥචɻ
άϦʔͰήʔϜϓϥοτϑΥʔϜͷ։ൃɺNativeήʔϜͷ։ൃɺQA
ΤϯδχΞΛܦݧ͠ɺϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ։ൃʹਫ਼
௨͍ͯ͠ΔɻےτϨ͕͖ɻ࠷ۙݞτϨʹϋϚ͍ͬͯΔɻB:100 D:
130 S:130
Slide 4
Slide 4 text
Copyright(C) 2017 Findy Inc. All rights reserved.
͓Ͷ͕͍
4
͓खॊΒ͔ʹ
͓ئ͍͠·͢
Slide 5
Slide 5 text
Copyright(C) 2017 Findy Inc. All rights reserved. 5
Findy Score ग़ͨ͠
● اۀͷਓࣄ͚ϓϩμΫτ
● ืूཁ߲ͷςΩετΛೖΕΔͱɺ
ʮ100ຬதԿͷग़དྷ͔ʯ͕Θ͔ΔϑΥʔϜ
● 20169݄ϦϦʔε
Slide 6
Slide 6 text
Copyright(C) 2017 Findy Inc. All rights reserved.
ߏ ׂΓͱϞμϯ
6
ϑϩϯτΤϯυ
● ES2015
● React
● Redux
● Webpack
όοΫΤϯυ
● Ruby on Rails (API௨৴)
● Heroku
● AWS
Slide 7
Slide 7 text
Copyright(C) 2017 Findy Inc. All rights reserved.
͜ͷαʔϏεͷʹͱͬͯͷٕज़తͳπϥϛ
7
● Contenteditable
● ॳReactαʔϏε
Slide 8
Slide 8 text
Copyright(C) 2017 Findy Inc. All rights reserved.
͜ͷαʔϏεͷʹͱͬͯͷٕज़తͳπϥϛ
8
Ͳ͕͜ਏ͍ʁ
Slide 9
Slide 9 text
Copyright(C) 2017 Findy Inc. All rights reserved. 9
ਏ͍ͱ͜Ζ
Slide 10
Slide 10 text
Copyright(C) 2017 Findy Inc. All rights reserved. 10
ਏ͍ͱ͜Ζ
⊗͜͜
Slide 11
Slide 11 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⛈ Contenteditable
11
Έͳ͞Μ
Contenteditable
ͬͯͬͯ·͔͢ʁ
Slide 12
Slide 12 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⛈ Contenteditable ྫ1
12
Slide 13
Slide 13 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⛈ Contenteditable ྫ2
13
Slide 14
Slide 14 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⛈ Contenteditable ྫ3
14
Slide 15
Slide 15 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable ਖ਼ମ
15
Slide 16
Slide 16 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable ͷਖ਼ମ ଐੑ
16
Slide 17
Slide 17 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable ͷ༷
17
ࢀߟ: https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
Slide 18
Slide 18 text
Copyright(C) 2017 Findy Inc. All rights reserved.
ཁ݅
18
কདྷతʹ
● ςΩετϋΠϥΠτ
● ғ͍
● Օॻ͖
● ݟग़͠
ͳͲʹରԠͨ͠αʔϏεʹ͍ͨ͠
※తʹஅ೦ͨ͠··Ͱ͢ɻ
୭͔ʙʙ
Slide 19
Slide 19 text
Copyright(C) 2017 Findy Inc. All rights reserved.
ཁ݅
19
ʹWYSIWYG ΤσΟλΛ࡞Δඞཁ͕͋Δ
Slide 20
Slide 20 text
Copyright(C) 2017 Findy Inc. All rights reserved.
/ Ϣʔβ
20
Ϣʔβతʹ
● IEରԠඞਢ(ਏ͍)
● ςΩετͷίϐϖ͕͋ΔͷͰσʔ
λΛਖ਼͘͠insertͰ͖ΔΑ͏ʹ
● UIʹ͢ΔͨΊʹϚεΦʔ
όʔରԠ
Slide 21
Slide 21 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable + IE
21
Slide 22
Slide 22 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⛄ IE ͷಠ༷ࣗʹΑΓ Clipboard API ͡Όͳ͍͠ίϚϯυ͕ҧ͏
22
https://qiita.com/saitoxu/items/b317ccde7e2af9797288
Slide 23
Slide 23 text
Copyright(C) 2017 Findy Inc. All rights reserved.
IE Ͱվߦ͢Δͱ Ͱͳ͘ Ͱғ·ΕΔ
23
https://stackoverflow.com/questions/2057881/avoid-ie-contenteditable-element-to-create-paragraphs-on-enter-key
Slide 24
Slide 24 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable + IE
24
IEਏ͍
※ͷ࣮ྗෆ
Slide 25
Slide 25 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable ͚ͩͰͳ͔ͳ͔ਏ͍
25
● ΧʔιϧΛҠಈͨ࣌͠ͷѻ͍
○ https://engineering.linecorp.com/ja/blog/detail/145
● HTML Λอଘͨ͠ࡍʹܗ͞Εͯ
͍ͳ͍ͱ͍͚ͳ͍
○ ݺͼग़͢ͱXSSʹͳͬͯ͠·͏
○ http://www.bokukoko.info/entry/2017/10/02/191614
● ϚεΦʔόʔɺΩʔϘʔυ
γϣʔτΧοτ……
Slide 26
Slide 26 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Contenteditable Tsurai
26
Contenteditable
ਏ͍
※ͷ࣮ྗෆ
Slide 27
Slide 27 text
Copyright(C) 2017 Findy Inc. All rights reserved.
2. React
27
React
Slide 28
Slide 28 text
Copyright(C) 2017 Findy Inc. All rights reserved.
Reactྺ
28
● ॳReactαʔϏε
● ʮReact͔͚ͬʔ͆͆͆ʯ
● npmɺjQueryɺES6ɺ
TypeScript͋ͨΓࣄͰ৮ͬ
ͯͨ
● JSྺʮࠓ19:40Ͱ͢ʂʯͱ
͍ͬͨจݴΛग़͋ͨ͢Γ͔Β
͑Ε20ۙ͘৮ͬͯΔݴޠ
Slide 29
Slide 29 text
Copyright(C) 2017 Findy Inc. All rights reserved.
React ͱϑΥʔϜ
29
● React ͰϑΥʔϜૢ࡞͢Δͷਏ͘ͳ͍Ͱ
͔͢ʁ
● ϑΥʔϜܥͷେม͞
ॳظ
ೖྗorอଘϘλϯʹΑΔσʔλߋ৽
…
⇛保持用のhiddenςΩετΤϦΞor ॳظϨ
ϯμϦϯάޙʹॳظऔ͖ͬͯͯ div ʹຒ
ΊࠐΉ ͲͪΒ͔ͷղܾࡦ
Slide 30
Slide 30 text
Copyright(C) 2017 Findy Inc. All rights reserved.
React ͱϑΥʔϜͱContenteditable
30
● React + Contenteditableͳ͔
ͳ͔େม
● Virtual DOM ͳͷͰɺϖʔετ
͢ΔࡍʹHTMLೖΕΒΕͳ͍
React.createElement
dangerouslySetInnerHTML={{__
html: text}}
Slide 31
Slide 31 text
Copyright(C) 2017 Findy Inc. All rights reserved.
ϥΠϒϥϦͳ͍ͷʁ
31
● https://github.com/lovasoa/react-
contenteditable
● IE11ʂʁ
࠷ۙ͋ΔΈ͍ͨ
ࠓίϛοτ͠ΐ…
Slide 32
Slide 32 text
Copyright(C) 2017 Findy Inc. All rights reserved.
ҰݴͰݴ͏ͱ
32
React ͰϑΥʔϜपΓͷ੍ޚ͠ͳ
͕ΒɺContenteditable Λͬͯ
WYSIWYG ΤσΟλͱͯ͠ײత
ʹ͑ΔΑ͏ʹ࣮ͯ͠ͳ͓͔ͭ
IEରԠ͠ͳ͕Βɺαʔόʹอଘ
͢Δࡍʹ XSS ͕ൃੜ͠ͳ͍Α͏
ʹؾΛ͚ͭΔҊ݅ͱԽͨ͠
Slide 33
Slide 33 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⭕ ·ͱΊ
33
·ͱΊ
Slide 34
Slide 34 text
Copyright(C) 2017 Findy Inc. All rights reserved.
⭕ ·ͱΊ
34
● ͦͦ React ͰϑΥʔϜૢ࡞͢Δͷ͕
େม
● ͦͷ্ʹ Contenteditable ͱ͍͏ةͳ͍
ڮΛΔ͜ͱେม
→ͬͱ͍͍Έ߹Θͤ͋ͬͨؾ͕͢Δ
→ྲྀߦΓͩ͠ʙͬͯReactબΜ͡Όବ
→͍͍Έ߹ΘͤҰॹʹߟ͑·͠ΐ͏ʂ͆