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