アラートを効果的に扱おう

Transcript

1. YUMEMI.grow Mobile #10 2024.2.14 ΞϥʔτΛޮՌతʹѻ͓͏ KAWASHIMA Yoshiyuki
2. ఻͍͑ͨ͜ͱ • Ϣʔβ͕ΞϥʔτΛܰࢹ͠ͳ͍Α͏ʹ
3. ৘ใݯ ώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯ https://developer.apple.com/jp/design/human-interface-guidelines/ ϚςϦΞϧσβΠϯ https://m3.material.io/
4. લఏ ৄࡉ͸ώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯɺϚςϦΞϧσβΠϯ ʹॻ͍ͯ͋Γ·͢ɻ ࠓճͷൃදͰ͸ɺ۩ମྫͱݟൺ΂ͳ͕ΒཧղΛਂΊ͍͖͍ͯͨͱࢥ͍ ·͢ɻ
5. ༻ޠͷ੔ཧ • ώϡʔϚϯΠϯλϑΣʔεΨΠυϥΠϯ Alert • SwiftUI alert • UIKit UIAlertController • ϚςϦΞϧσβΠϯ Dialogs • Flutter AlertDialog • Jetpack Compose Dialog • Android View AlertDialog
6. ώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯ
7. Ξϥʔτ͸߇͑Ίʹ࢖͏
8. https://developer.apple.com/jp/design/human-interface-guidelines/alerts Ξϥʔτ͸ॏཁͳ৘ใͷఏࣔʹ࢖͑Δͱ͸͍͑ɺͦͷͨͼʹϢʔ βͷૢ࡞͕தஅ͞Ε·͢ɻͲͷΞϥʔτʹ΋ඞͣෆՄܽͳ৘ใ ΍༗༻ͳΞΫγϣϯؚ͕·Ε͍ͯΔΑ͏ʹ͠ͳ͍ͱɺϢʔβ͕ ΞϥʔτΛܰࢹ͢ΔΑ͏ʹͳΓ͔Ͷ·ͤΜɻ
9. ϚςϦΞϧσβΠϯΨΠυϥΠϯ
11. https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873 ΞϓϦͷ௨ৗͷૢ࡞Λதஅ͢Δର࿩΍ɺಛఆͷϢ ʔβʔλεΫɺܾఆɺ΋͘͠͸ಉҙʹඞཁͱͳΔ ॏཁͳ৘ใʹ͸ Dialogs Λ࢖༻͍ͯͩ͘͠͞
12. https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873 ௿·ͨ͸த͘Β͍ͷ༏ઌ౓ͷ৘ใʹ Dialogs ͸࢖༻͠ ͳ͍Ͱ͍ͩ͘͞ɻ୅ΘΓʹ Snackbar Λ࢖ͬͯͩ͘ ͍͞ɻফڈͰ͖Δ͠ɺࣗಈతʹඇදࣔʹ΋Ͱ͖·͢
13. ώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯ
14. https://developer.apple.com/jp/design/human-interface-guidelines/alerts#iOS-iPadOS Ϣʔβ͕ҙਤͨ͠ΞΫγϣϯʹؔ࿈͢Δબ୒ࢶ Λఏࣔ͢Δ৔߹͸ɺΞϥʔτͰ͸ͳ͘ΞΫγ ϣϯγʔτΛ࢖༻͢Δ
15. https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Best-practices Ωϟογϡ͞Εͨσʔλ΍ϓϨʔεϗϧμͷσʔλ Λදࣔͨ͠ΓɺϢʔβͷૢ࡞Λதஅ͠ͳ͍ܗͰ໰୊ ʹ͍ͭͯઆ໌͢ΔϥϕϧΛදࣔ͢Δ͜ͱ͕Ͱ͖·͢
16. ۩ମྫ
17. Airplane • Ωϟογϡ͕͋Ε͹Ωϟογϡ Λදࣔʢ͓ͦΒ͘౰೔ͷΩϟο γϡͷ༗ແʣ Apple Weather App
18. Airplane Apple Music
19. Airplane Apple Home
20. Airplane Apple Books
21. ϚςϦΞϧσβΠϯΨΠυϥΠϯ
23. https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc ॏཁͰͳ͍৘ใ͸ɺΞϓϦͷίϯςϯπͷ ྲྀΕͷதͰଞͷ UI ࢖ͬͯఏ͍ࣔͯͩ͘͠͞
24. https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc μΠΞϩάʹॏཁͰͳ͍৘ใΛஔ͘͜ͱΛ ආ͚͍ͯͩ͘͞
25. ίϯςϯπ
26. ؆͔ܿͭ໌֬ʹঢ়گΛઆ໌͢ΔλΠτϧʹ͢Δ
27. https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Content Ϣʔβʹঢ়گΛૉૣ͘ཧղͯ͠΋Β͏ඞཁ͕͋ΔͷͰɺ৑௕ͳදݱΛආ͚ɺ࿙Εͳ͘۩ମతʹهड़͠· ͢ɻͰ͖ΔݶΓɺى͖ͨ͜ͱɺى͖ͨঢ়گɺى͖ͨཧ༝ʹ͍ͭͯઆ໌͠·͠ΐ͏ɻʮΤϥʔʯ΍ʮΤ ϥʔ329347͕ൃੜ͠·ͨ͠ʯͷΑ͏ͳɺ༗༻ͳ৘ใΛ఻ୡ͠ͳ͍λΠτϧʹ͸͠ͳ͍Ͱ͍ͩ͘͞ɻ2 ߦΛ௒͑ͯંΓฦ͞ΕΔΑ͏ͳ௕͗͢ΔλΠτϧ΋ආ͚·͢ɻλΠτϧ͕׬શͳจͰ͋Δ৔߹͸ɺη ϯςϯεελΠϧͷେจࣈԽʢӳޠͷ৔߹ʣΛ࢖༻͠ɺద੾ͳจ຤ه߸Λ෇͚·͢ɻஅยతͳจΛλ Πτϧʹ͢Δ৔߹͸ɺλΠτϧʹ;͞Θ͍͠දݱʹ͠ɺจ຤ه߸͸෇͚ͳ͍Α͏ʹ͠·͢ɻ
28. Θ͔Γʹ͍͘
29. ຊ౰ʹ༗ҙٛͳΤϥʔϝοηʔδΛॻ͘ʹ͸
30. “࣮֬ʹΰϛശΛۭʹ͢Δ”Λ ࢖༻͢Δͱɺ“ΰϛശ”ʹ͋Δ ߲໨͕׬શʹফڈ͞Ε·͢ɻ ׬શʹফڈͯ͠΋ΑΖ͍͠Ͱ ͔͢ʁ ؆͔ܿͭ໌֬ʹঢ়گΛઆ໌͢ΔλΠτϧ https://postd.cc/how-to-write-an-error-message/
32. https://m3.material.io/components/dialogs/guidelines#0c ff 8b6b-d4f3-4442-8194-31212f5d1a12 ͜ͷμΠΞϩάͷλΠτϧ͸ɺ۩ମతͳ࣭໰Λ ఏࣔ͠ɺϦΫΤετʹؔΘΔ಺༰Λ؆ܿʹઆ ໌͠ɺ໌֬ͳΞΫγϣϯΛఏڙ͠·͢
33. https://m3.material.io/components/dialogs/guidelines#0c ff 8b6b-d4f3-4442-8194-31212f5d1a12 μΠΞϩάͷλΠτϧͰᐆດͳ࣭໰Λ͠ͳ ͍Ͱ͍ͩ͘͞
34. ͍ͭΞϥʔτΛ࢖ͬͨΒྑ͍͔ʁ
35. ΞϓϦ಺ͰͷόϥϯεͳͷͰਖ਼ղ͸ͳ͍
36. ΞϓϦ಺ͰΞϥʔτΛ૿΍͢͜ͱʹͳͬͨΒ ଞͷΞϥʔτ͕ඞཁ͔ઈ͑ͣݟ௚͕͠ඞཁ
37. ݸʑͷΞϓϦ͕ରԠ͢Δ͚ͩͰ͸ෆे෼
38. ·ͣ͸ݸʑͷΞϓϦ͔ΒରԠΛ ෭࣍తޮՌͰϨϏϡʔͷ৺৅͕Α͘ͳΔ ʢ͸ͣʣ
39. ͓ΘΓʹ ڞ௨ݴޠΛ࡞Ζ͏ ώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯ https://developer.apple.com/jp/design/human-interface-guidelines/ ϚςϦΞϧσβΠϯ https://m3.material.io/
40. ͓ΘΓʹ هࣄ঺հ iOS ʹ͍ͭͯͷ·ͱΊ https://zenn.dev/yumemi_inc/articles/effective-alert ݩωλͷεΫϥοϓ https://zenn.dev/ykws/scraps/1bd34b3f414206