通知UIを改善している話

Transcript

1. ௨஌UIΛվળ͍ͯ͠Δ࿩ 2023.05.31 ΞΫηγϏϦςΟ΍ΔͧʂLTࡇΓ Shirahama Kaori
2. ࣗݾ঺հ ShirahamaKaoriʢ9v9Shiraʣ ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ
3. SmartHR
4. SmartHR UI
5. SmartHR UI • https://github.com/kufu/smarthr-ui • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ 
 UIίϯϙʔωϯτ • SmartHRͷϓϩμΫτͰ࢖͍ͬͯΔ
6. ௨஌ʹ࢖͍ͬͯΔ ίϯϙʔωϯτ
7. FlashMessage
9. FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏ͸ඇਪ঑ʣ • toastͷΑ͏ͳίϯϙʔωϯτ • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத
10. FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏ͸ඇਪ঑ʣ • toastͷΑ͏ͳίϯϙʔωϯτ • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத ࠓ೔͸͜ͷ࿩Λ͠·͢ʂ
11. ͳʹ͕՝୊ͳͷ͔
12. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦఺ 
 Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ ରԠҊ 
 ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ 
 ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ 
 ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ࢖ ༻͠ͳ͍
13. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦఺ 
 Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ վળҊ 
 ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ 
 ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ 
 ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ࢖ ༻͠ͳ͍
14. ՝୊2ɿؾ͖ͮʹ͍͘ ݒ೦఺ 
 ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔ ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘ ରԠҊ 
 FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ 
 ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ 
 ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏
15. ՝୊2ɿؾ͖ͮʹ͍͘ ݒ೦఺ 
 ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔ ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘ վળҊ 
 FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ 
 ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ 
 ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏
16. FlashMessageͷ՝୊͸ Θ͔ͬͨ
17. FlashMessage࢖༻Λ΍Ίͯ Ͳ͏͢Δ͔ʁ
18. ରԠํ਑ • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ର৅ͷۙ͘ʹϝο ηʔδΛදࣔ͢Δ • ্ه͕ࠔ೉ͳ৔߹ɺʮNoti fi cationBarʯͰ ϝοηʔδΛදࣔ͢Δ
19. Noti fi cationBar
21. Noti fi cationBar (SmartHR UI) • https://smarthr.design/products/components/noti fi cation- bar/ • ࢖͍Ͳ͜Ζ • ૢ࡞ޙʹɺը໘શମ͕੾ΓସΘΔͱ͖ • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹ໭Δͱ͖ • ಛผͰॏཁͳ৘ใ΍͓஌ΒͤΛදࣔ͢Δͱ͖
22. ରԠͷྲྀΕ
23. ରԠͷྲྀΕ 1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ 
 ද͍ࣔͯ͠Δ͔ਫ਼ࠪ 2.ύλʔϯผʹ෼ྨ͠ɺ֤ରԠํ਑Λݕ౼ 3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ੔ 4.νʔϜશମʹల։͠߹ҙɾܾఆ 5.ը໘͝ͱʹରԠΛਐߦத
25. ϝοηʔδදࣔύλʔϯ μΠΞϩά 
 ɹμΠΞϩάΛด͡ͳ͍৔߹ɿϘλϯ෇ۙ 
 ɹμΠΞϩάΛด͡Δ৔߹ɿNoti fi cationBar μΠΞϩάҎ֎ 
 ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ৔߹ɿϘλϯ෇ۙ 
 ɹ্هҎ֎ɿNoti fi cationBar
26. Α͔ͬͨ͜ͱ • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํ਑ΛܾΊΒΕ ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ • ௨஌Λग़͢ύλʔϯΛ੔ཧ͠υΩϡϝϯτԽ ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ • ͜Ε·Ͱ͸௨஌UI͕ࠞࡏ͍ͯͨ͠ • ػೳ௥Ճ࣌ͷ௨஌UI΋໎͍ͬͯͨ
27. ͓ΘΓ