Inside Frontend #2
ňنʹಉҙʼnͷUXInside Frontend #2 (2018/02/11)@pika_shi - Hikaru Takemura- ετϨεϑϦʔͳಉҙUIͱͦͷ࣮ݱํ๏ -
View Slide
‣ Hikaru Takemura ( @pika_shi )‣ Frontend Engineer at FOLIO‣ Por4olio: pikashi.tokyo
① What is Compliance? ίϯϓϥΠΞϯεͱʁ② Term & Condi>ons ར༻نʹ͍ͭͯ③ UI History of Term & Condi>ons ňنʹಉҙʼnUI ͷมભ④ Collaborate with Compliance UX ্ͷͨΊͷίϯϓϥͱͷڠۀ⑤ As a Frontend Engineer ňϑϩϯτΤϯυΤϯδχΞʼnͱͯ͠ͷܞΘΓํAGENDA
① What is Compliance?
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձגՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձגՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻCOMPLIANCE(اۀྙཧ, ๏ྩ९क)
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձגՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ෩આͷྲྀΛڐ༰͢ΔߦҝʹͳΓ͑ͳ͍͔૬ૢॎΛ͞ΕΔϦεΫ͕ͳ͍͔ etc…
‣ FOLIO ۚ༥ػؔͰ͋Γ, αʔϏε UI ͱίϯϓϥΠΞϯεৗʹഎத߹Θͤ‣ ௨ৗͷ Web αʔϏεͰͨΓલͷ͜ͱ͕ͨΓલʹͰ͖ͳ͍ੈքͰ, ߴ͍ UX Λࢦ͍ͯ͘͠ඞཁ͕͋ΔCOMPLIANCE
② Term & CondiAons
7%
7%ར༻نશମͷ ͔͠ಡΜͰ͍ͳ͍
hKps://www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html
hKps://www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html͍, ͍͠, ͔Γʹ͍͘!
‣ ͍͠จষΛॻ͖ͨͯ͘ॻ͍͍ͯΔΘ͚Ͱͳ͍‣ Ϣʔβͷղऍʹᴥᴪ͕ੜ͡ͳ͍Α͏ʹ, ݫີ͔ͭ໌֬ʹॻ͔Ε͍ͯͳ͚ΕͳΒͳ͍‣ Ұํ, ຊདྷͷతňਖ਼͘͠ཧղͯ͠Β͍, ҆৺ͯ͠αʔϏεΛͬͯΒ͏͜ͱʼnTERM & CONDITIONS
ۚ༥औҾ๏ (ۚ๏) ʹͷͬͱΓ,େͳྔͷॻྨʹΛ௨ͯ͠Β͏ඞཁ͕͋Δ
ComplianceCreator
ComplianceCreator‣ γϯϓϧͰඒ͍͠ UI Λอ͍ͪͨ‣ Ͱ͖Δ͚ͩεϜʔζʹಉҙͤͯ͞ޱ࠲։ઃͷ CVR্Λࢦ͍ͨ͠
ComplianceCreator‣ Ϣʔβʹ͖ͪΜͱܖ༰Λཧղͯ͠Β͍͍ͨ‣ ैདྷͷॻ໘ԡҹʹྼΒ͵Α͏, ৻ॏʹಉҙΛͯ͠Β͍͍ͨ
ComplianceCreator͍͔ʹεϜʔζ ʹ৻ॏ ͳಉҙ͕Ͱ͖Δ͔COLLABORATION
③ UI History of Term & CondiAons
1 2 3 4‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
1 2 3 4‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹCompliance, ܖక݁લަॻ໘, ޱ࠲։ઃਃࠐॻͳͲੑ࣭ͷҧ͏ͷͳͷͰ͚ͯಉҙΛಘͨํ͕͍͍
1 2 3 4‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ?
‣ ϦϯΫ͕ n ݸʹͳΔͱ, ϢʔβͷϝΠϯίϯςΩετ͔Βͷ (ผλϒભҠ) ͕ n ճʹͳΔ‣ Ұൠతͳ Web αʔϏεͰ, ಡΉ͔εϧʔ͢Δ͔ΛબΔͷͰ GOOD UI ͕ͩ, ඞͣΫϦοΫͯ͠΄͍͠߹ʹͷڧ੍ͱͳΓ BAD UI ͱԽ͢
1 2 3 4‣ ॻ໘ΛϖʔδʹຒΊࠐΈ, Ϟʔμϧ UI Ͱදࣔ
‣ Ϣʔβ͕ϖʔδ͔Βͤͣʹॻ໘ʹΛ௨ͤΔ‣ ϞʔμϧňՃతʹใΛఏࣔ͢Δʼnೝͷ͋ΔUI ͳͷͰ, ॻ໘ʹॏ͍ۤ͠ΠϝʔδΛ༩͑ͳ͍‣ FOLIO Ͱ༷ʑͳ໘Ͱॻ໘ͷಉҙΛଅ͢ඞཁ͕͋Δ͕, Ϟʔμϧʹ౷Ұ͢Δ͜ͱͰ, ͲΜͳ໘ͰίϯςΩετΛҡ࣋ͭͭ͠දࣔͰ͖Δ
1 2 3 4
‣ PDF ͷจࣈαΠζ͕σϑΥϧτͰখ͘͞ͳͬͯ͠·͍, Ϣʔβ͕ٯʹܯռ৺Λ࣋ͬͯ͠·͏‣ Ͱ PDF ຒΊࠐΈΛ͍͕ͯͨ͠, ڥґଘͷόά͕ඇৗʹଟ͘ϝϯς͕େม
‣ ίϯϓϥͷํʑͱڠྗ͠, PDF Λͯ͢ HTML Խ‣ εϚϗͰͳ͘දࣔ͞ΕΔΑ͏ʹͳͬͨ1 2 3 4
To Be Condnued…1 2 3 4
④ Collaborate with Compliance
Word → HTMLCreatorCompliance‣ UX ্ͷͨΊʹ, Word → HTML ͕ෆՄܽͩͬͨ
Word HTML
Word HTMLMarkdown
Word HTMLMarkdown‣ ϞόΠϧΞϓϦͳͲ, Web Ҏ֎ͷΫϥΠΞϯτͰ࠷దͳܗͰදࣔͰ͖ΔΑ͏ʹ͢ΔͨΊ‣ HTML ͋͘·Ͱ Web ༻ͷੜͷ 1 ͭͱ͍͏Ґஔ͚ͮ
Word HTMLMarkdownAKributed String(iOS)React Component (Web)TextView (Android)
Word HTMLMarkdown‣ Pandoc (CLI ͷυΩϡϝϯτมπʔϧ) Ͱͬ͘͟ΓͱMarkdownʹม‣Word ಛ༗ͷه๏ϦονͳදͳͲखಈͰमਖ਼Λ͓͜ͳ͍
Word HTMLMarkdown‣ markdown-styles Λͬͯ HTML ʹม‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓͢͢Ί‣ ͜ΕʹΑΓॻ໘ͷ HTML Խ͕ྃ(ূ݊ձ͕ࣾ HTML Ͱॻ໘Λ͢Δͷॳʁ)
Word HTMLMarkdown‣ markdown-styles Λͬͯ HTML ʹม‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓͢͢Ί
‣ ॻ໘ݪຊΛ Markdown ʹ͢Δʹ͋ͨΓ, ίϯϓϥΠΞϯε෦Ͱཧ͞Ε͍ͯͨ Word Λ, ΫϦΤΠλʔͱίϯϓϥ͕ͱʹ͑Δ Confluence Ҡߦ‣ Markdown ͷॻ͖ํΛڞ༗͠, Confluence ΛίϯϓϥͱΫϦΤΠλʔͰڞಉฤू͠͡Ί͕ͨ…
Compliance Creatorหޢ࢜ͱͷΓͱΓ Word Ͱͳ͍ͱͰ͖ͳ͍!Confluence ͩͱཤྺΛḷΓʹ͍͘ͷͰ git Ͱཧ͍ͨ͠!
Confluence, Word, GitLab ͷࡾॏཧʹ
‣ Word ͕ඞཁͳͷ͔Δ͕, తΛߟ͑ΔͱԿچݪຊΛཧ͢Δඞཁͳ͍ͷͰʁ‣ Markdown ͔Β Pandoc Ͱ Word Λٯੜ͠, ͦͪΒΛ͏͜ͱͰ͖ͳ͍͔Markdown → WordWord WordMarkdownݪຊچݪຊ
Word WordMarkdownݪຊچݪຊ
Word WordMarkdownݪຊWord ཧͷ໓ʹޭچݪຊ
Confluence → GitLab‣ Word ໓Ͱ͖͕ͨ, ґવͱͯ͠ Confluence ͱGitLab ͷೋॏཧ‣ ίϯϓϥͷํʑʹ GitLab Λར༻ͯ͠Β͏͜ͱͰ͖ͳ͍͔ʁ‣ Markdown ͷฤू͚ͩͩͱ Web UI Ͱ݁͢Δ
‣ GitLab ͷ͍ํΛυΩϡϝϯτʹ·ͱΊ, ϋϯζΦϯΛ࣮ࢪ‣ ݱࡏίϯϓϥͷํʑʹ GitLab Λฤूͯ͠Β͍ͬͯΔ
Confluence ཧͷ໓ʹޭ
GitLab ͰͷҰݩཧʹ
COLLABORATION‣ ίϯϓϥΠΞϯεͷํʑͱ, զʑ Web ΤϯδχΞͰόοΫάϥϯυ͕େ͖͘ҟͳΓ, ͦΕͧΕͷۀքͷ׳श͋Δ‣ ͦΕΛཧղ্ͨ͠Ͱ, গͣͭ͠าΈد͍ͬͯ͘͜ͱ͕େ (ܾͯ͠ΓํΛԡ͚ͨ͠Γ͠ͳ͍)‣ ͜ͷ͋ͨΓ͕ FinTech ͳΒͰͷޣຯͰ͋Δ
⑤ As a Frontend Engineer
‣ ●● Tech ͱݺΕΔΑ͏ͳطଘͷۀքΛΑ͍ͯͨ͘͘͠Ίʹ, ΫϦΤΠλʔͷίϯϓϥΠΞϯε๏ͷཧղาΈدΓ͕ඞਢ‣ ٯʹ, ίϯϓϥΠΞϯε๏ͷ͕ࣝͳ͍ͱ,ߴ͍ UX Λࢦ͢͜ͱ౸ఈͰ͖ͳ͍‣ FOLIO Ͱ, Web ۀքग़ͷଟ͘ͷΫϦΤΠλʔ͕ূ݊֎һΛऔಘ͍ͯ͠ΔMediTech FinTech EdTech Hch
ϑϩϯτΤϯυσβΠϯ γεςϜϑϩϯτ,σβΠϯ ͱγεςϜ Λͭͳ͙ϋϒ
σβΠϯ γεςϜίϯϓϥ ΠΞϯεϚʔέ ςΟϯάϑϩϯτΤϯυϑϩϯτ,σβΠϯ ͱγεςϜ Λͭͳ͙ϋϒ
‣ ϑϩϯτΤϯυΤϯδχΞ, ͨͩňϑϩϯτΤϯυΛ։ൃ͢Δʼn͚͕ͩࣄͰͳ͍‣ σβΠϯͱγεςϜͱີʹܞΘΔϙδγϣϯͱଊ͑Δ͜ͱͰ, Ͱ͖Δ͜ͱҰؾʹ͕Δ‣ ϑϩϯτΤϯυ, ؤு͍͖ͬͯ·͠ΐ͏ CONCLUSION