note engineer meetup #1 https://pieceofcake.connpass.com/event/101173/
noteΤσΟλͷnote engineer meetup #1
View Slide
ࣗݾհ• 20154݄ʙɹϐʔεΦϒέΠΫ• SIerग़ɹҰ൪ܦݧ͕͍ݴޠJava• ϑϩϯτΔαʔόʔαΠυΤϯδχΞ• झຯΤΦϧθΞͰώΧηϯTakeshi Tanazawa https://note.mu/ct8ker
͢͜ͱ• noteΤσΟλͷྺ࢙• ΤσΟλͷׂ• Ͳ͏ͬͯ։ൃ͖ͯͨ͠ͷ͔• ࣮͖ͯͨ͠ͷ• ΤσΟλ։ൃͰͷۤ࿑• ࠓޙͷ༧ఆ
χϡʔϝΩγίҎԼൈਮl͍͜͜ΘաࠅͳχϡʔϝΩγίͷߥͩzl༉அ͔ͨͭ͠ΒαϘςϯʹ͞͞Εͯࢮ͵zl͜͜ΞϯυΡ͢ΔΑ͏ͳࠊൈ͚ੜ͖Εͳ͍χϡʔϝΩγίͷߥͳͷͩzlࠨͷ΄͏ʹग़ͨΓͰͳ͔ͬͨΓ͢ΔʮʴʯϚʔΫzl͜ͷΑ͏ͳ.FYJDPͷચྱ͕͓·͑Λ͍ͬͯΔzIUUQTEJFIBSEUBMFTDPNOOGEB
noteΤσΟλͷྺ࢙• ॳʢ201404ʙ͙Β͍ʣ CTO konpyu࡞ɻܹϨΞ• 2ʢ2014͙Β͍ʙ201704ʣ ޭ࿑ऀɻͨͩ͠ɺχϡʔϝΩγίͷߥ• 3ʢ201704ʙʣ ݱɻߥͰͳ͘ͳͬͨͱࢥ͍͍ͨ
ΤσΟλͷׂ ݟग़͠ ςΩετஈམ Ҿ༻ ίʔυ <figure name=“f”>figure> • contenteditableΛʮ͑ΔʯΑ͏ʹ͢Δ• ͜ͷϑΥʔϚοτΛࢮक͢Δʢग़དྷΔ͚ͩշదʹʣ
• CSS͕ਖ਼͘͠ద༻͞Εͣɺݟ͕ͨஶ่͘͠ΕΔ• Ұ෦ςΩετ͕ݟ͑ͳ͍• ༗ྉઃఆ͕ಈ͔ͳ͍• XSSͷڪා• χϡʔϝΩγίͷߥʹͳΔ͠ϑΥʔϚοτ่͕ΕΔͱ…
• نҧͷຊจσʔλΛαʔόʔʹૹΔΘ͚ʹ͍͔ͳ͍• ฤूૢ࡞ͷࣗ༝ɾշదੑॏཁ͕ͩɺΓڀۃతʹnoteϑΥʔϚοτنΛࢮकग़དྷΔൣғͰͷ࣮ݱʹͳΔ
Ͳ͏ͬͯ։ൃ͖ͯͨ͠ͷ͔• 2016Նࠒɺ3ͷ։ൃελʔτ• 2CoffeeScriptͰॻ͔Ε͍ͯͯɺRailsͷassetsʹΈࠐ·Ε͍ͯͨɻ 3ಠཱͤͯ͞ɺstandaloneͰಈ͔͍ͨ͠ɻES6Ͱॻ͖͍ͨ• 2ʹ฿ͬͯɺMediumEditor※Λϕʔεʹ͢Δ ※MediumͬΆ͍ɺOSSͷWYSIWYGΤσΟλ
• શ෦ES5Ͱॻ͔Ε͍ͯΔ• classΛಋೖͯ͠extends֦ͯ͠ு͍ͨ͠ͷʹɺ͜ΕࠔΔ• πʔϧͰҰൃมΛૂ͕ͬͨ೦ͳ݁Ռʹɻ ख࡞ۀͰશ෦ॻ͖͑ͨ• ES5Ͱॻ͔Εͨಠࣗͷ֦ுػߏআMediumEditorΛES6ʹॻ͖͑Δ
• ΄ΜͱTypeScriptʹ͔ͨͬͨ͠ɻ ແ͍ॴʹશ෦ܕ͚͢Δͷ͕ͭΒ͗ͨ͢ (RubyMimeॏ͗ͨ͢)• babelʹܾఆ• ES5 → TS(్த·Ͱ) → ES2015• ͳΜͱ͔MediumEditor ES6(ES2015)൛͕Ͱ͖ΔTypeScript or babel(ES2015)
• webpackͬͯΈΔɻͦͷ··ఆணɻ ࠓʹͳͬͯ4.xܥʹ্͛Α͏ͱͯۤ͠͠Ή• webpack-dev-serverͰstandaloneͰಈ͔͢ HMR(Hot Module Replacement)• MediumEditorͷspecΛಈ͔ͨ͢ΊʹgruntಉډϏϧυڥͱ͔
• ֦ுίʔυͱMediumEditorίʔυͷσΟϨΫτϦΛ͚Δ • MediumEditorͷίʔυมߋ͠ͳ͍ มߋ͢ΔͷຊՈߋ৽ʹै͢Δͱ͖͚ͩ• MediumEditorͷspec͕pass͢Δঢ়ଶΛҡ࣋ޙͰࠔΒͳ͍ͨΊͷ։ൃϧʔϧ
࣮͖ͯͨ͠ͷ• ০ૢ࡞શൠͷϦϝΠΫ• Undo / Redo• ίϐϖ…ͷத͔Βɺಛʹख͕͔͔ؒͬͨͷͨͪ
০ૢ࡞શൠͷϦϝΠΫ
০ૢ࡞શൠͷϦϝΠΫ• MediumEditorcontenteditableͷAPIΛ͍ͬͯΔ• execCommand(“formatBlock”, false, “p”);• ΫϩεϒϥβͰಈ࡞͕҆ఆ͠ͳ͍ɻ݁Ռ͕͘͠ͳΒͳ͍
Q. Ͳ͏͢Δ͔ʁ
A. ࣗલͰ࣮
A. ࣗલͰ࣮ͻͨ͢Β DOM ૢ࡞
Undo / Redo
• ϒϥβϑΥϧτͰɺcontenteditable APIΛͬͨฤू͔ͤ͠ͳ͍• ࣗલͷDOMૢ࡞વޮ͔ͳ͍Undo / Redo
A. ࣗલͰ࣮݁ՌɺDOMૢ࡞ͷࣗ༝্͕͕ͬͨʂ …ͷ͕ຊʹྑ͔ͬͨͷ͔Ͳ͏͔࣌ʑΉ
ίϐϖ
• contenteditable APIͷதͰಛʹ৴༻Ͱ͖ͳ͍ ” insertHTML” Λ͍ͬͯͨ• ͠͠noteϑΥʔϚοτΛഁյ͍ͯͨ͠ίϐϖ
A. ࣗલͰ࣮ͨͩͨͩͻͨ͢Β DOM ૢ࡞
ΤσΟλ։ൃͰͷۤ࿑• ΫϩεϒϥβରԠ ϒϥβຖʹڍಈ͕ҧ͏ͱͭΒ͍ɻDOMૢ࡞Λ૿ͯ͠ݮ͖͕ͬͯͨɺͦΕͰEdge…• ΤσΟλͰ͋ΕҰൠతʹʮ͜͏ಈ͍ͯͨΓલʯͳػೳΛɺͦͷ௨ΓͨΓલʹ࣮ݱ͠ͳ͚ΕͳΒͳ͍͠͞ web͔ͩΒଟগΞϨͰ͍͍͡ΌΜʁ
ࠓޙͷ༧ఆ• εϚϗରԠ ͏͙͢ग़·͢
ࠓޙͷ༧ఆ• ϑϧεΫϥονʹ͢Δ• noteઐ༻ػೳϓϥάΠϯͱͯ͠جຊػೳͱ͠ɺnoteҎ֎Ͱ͑Δ൚༻ੑΛ͍࣋ͨͤͨ• खͬͯ͘ΕΔํΛ͓͍ͪͯ͠·͢ʂ4ΤσΟλ
͋Γ͕ͱ͏͍͟͝·ͨ͠