とある端末の触覚技術 -フィードバック-

iOSDC Japan 2018（ https://fortee.jp/iosdc-japan-2018/proposal/26e6c9da-921a-4f47-a9d4-286c42d84bd7 ）での発表資料です。

スライド内で紹介したUIFeedBackGeneratorを一通り試すことのできるサンプラーは以下で確認できます。
・cokaholic/TapticSampler

https://github.com/cokaholic/TapticSampler

Transcript

1. iOSDC 2018 2018/8/31 cokaholic @TK_u_nya
2. cokaholic • iOS engineer at AbemaTV, Inc. • Github, Qiita: cokaholic • Twitter: @TK_u_nya • AppStore: Keisuke Tatsumi
3. iPhone6͔ΒiPhone8ʹങ͍ม͑·ͨ͠ 1೥΄Ͳલ
4. ͦͯ͠ɺීஈ௨Γʹૢ࡞ͯ͠ ͍Δ͏ͪʹࠓ·Ͱʹແ͔ͬͨ ͋Δҧ࿨ײʹؾ͖ͮ·ͨ͠…
5. ϒϧϯοʂϒϧϯοʂ
6. ͑ͬ…ʂʁ
7. ϒϧϯοʂϒϧϯοʂ
8. ͍ͭ͜ɾɾɾಈͧ͘ɾɾɾ
9. ͦͷਖ਼ମͱ͸…
10. Taptic Engine
11. Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary
12. Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary
13. What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ
14. Taptic Engine ͕౥ࡌ͞Ε͍ͯΔσόΠε • iPhone6s, 6s Plus • iPhone7, 7 Plus • iPhone8, 8 Plus • Apple Watch Series1, 2, 3 • iPhoneX
15. What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢Δ ͨΊʹ౥ࡌ͞Ε͍ͯΔ
16. What’s Haptic Feedback • ʮ৮֮ϑΟʔυόοΫʯͱ༁͠·͢ • ར༻ऀʹྗɺৼಈɺಈ͖ͳͲΛ༩͑Δ͜ͱͰൽ ෘײ֮ϑΟʔυόοΫΛಘΔςΫϊϩδʔͷ͜ͱ • աڈʹ͸NINTENDO64༻ίϯτϩʔϥͷৼಈ ύοΫ΍ιχʔͷDUALSHOCKͳͲ͕͜ΕΛ࣮ ݱ͢ΔͨΊͷ΋ͷͰ͋ͬͨ
17. What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢Δͨ Ίʹ౥ࡌ͞Ε͍ͯΔ • iOS10͔ΒUIKitʹTaptic EngineΛ੍ޚ͢ΔͨΊ ͷΫϥε (UIFeedbackGenerator) ͕௥Ճ͞Εͨ
18. Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary
19. How To Use • Taptic EngineΛ੍ޚ͢ΔͨΊͷΫϥε ‣ UIFeedbackGenerator ‣ UINotificationFeedbackGenerator ‣ UIImpactFeedbackGenerator ‣ UISelectionFeedbackGenerator
20. UIFeedbackGenerator • ଞ̏ͭͷΫϥεͷϕʔεΫϥεͰ͋Γɺந৅Ϋ ϥεͰ΋͋Δ • ͜ͷΫϥεΛ௚઀ΠϯελϯεԽͨ͠Γɺ਌Ϋ ϥεͱͯ͠ΧελϜͰ࢖༻͢Δ͜ͱ͸ඇਪ঑ͱ ͳ͍ͬͯΔ
21. UINotificationFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • ΞΫγϣϯͷ੒ޭɺࣦഊɺܯࠂΛ఻͑Δ৮֮Λੜ੒͢Δͨ ΊͷΫϥε • طఆͷಈ࡞γʔέϯεΛද͢ UINotificationFeedbackType Λࢦఆͯ͠ಈ͔ͤΔ
22. How To Use let generator = UINotificationFeedbackGenerator() generator.prepare() generator.notificationOccurred(.error) 1. GeneratorΛΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. notificationOccurred(UINotificationFeedbackType)ͰൃՐͤ͞Δ ͦΕͧΕͷৼಈͷҧ͍͸ҎԼͷ௨ΓͰ͢ɻ • error … τΡτΡτΡ ͱ͍͏ײ͡Ͱ3ճৼಈ • warning … τϯτϯ ͱ2ճৼಈ • success … τϯτϯ ͱ2ճৼಈ
23. How To Use let generator = UINotificationFeedbackGenerator() generator.prepare() generator.notificationOccurred(.error) 1. GeneratorΛΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. notificationOccurred(UINotificationFeedbackType)ͰൃՐͤ͞Δ ͦΕͧΕͷৼಈͷҧ͍͸ҎԼͷ௨ΓͰ͢ɻ • error … τΡτΡτΡ ͱ͍͏ײ͡Ͱ3ճৼಈ • warning … τϯτϯ ͱ2ճৼಈ • success … τϯτϯ ͱ2ճৼಈ ] େ͖ͳࠩ͸ແ͍͕ɺwarning ͸ʰΧϯΧϯʱͱߕߴ ͍ײ͡ͷ2ճৼಈɺsuccess ͸ʰά Χϯʱͱ͍͏ײ ͡Ͱ1ൃ໨ͷৼಈ͕ॏ͍ؾ͕͢Δ
24. UIImpactFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • େɾதɾখͷ༳Εͷେ͖͞ͷҟͳΔ৮֮Λੜ੒͢ΔͨΊ ͷΫϥε • طఆͷಈ࡞γʔέϯεΛද͢ UIImpactFeedbackStyle Λ ࢦఆͯ͠ಈ͔ͤΔ
25. How To Use let generator = UIImpactFeedbackGenerator(style: .light) generator.prepare() generator.impactOccurred() 1. GeneratorΛ UIImpactFeedbackStyle ͔ΒΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. impactOccurred()ͰൃՐͤ͞Δ • lightͩͱؾ͔ͮ͘Ͳ͏͔ͷΪϦΪϦ͙Β͍ͰɺheavyͰ΋ઌ΄Ͳͷ warning΄ͲͰ͸ແ͍ؾ͕͢Δ
26. UISelectionFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • બ୒ࢶͷมԽΛ఻͑Δ৮֮Λੜ੒͢ΔͨΊͷ Ϋϥε • ओʹUIPickerViewͳͲͷ࿈ଓతͳબ୒͕Մೳ ͳUIʹରͯ͠࢖༻͢Δ
27. How To Use let generator = UISelectionFeedbackGenerator() generator.prepare() generator.selectionChanged() 1. GeneratorΛΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. selectionChanged()ͰൃՐͤ͞Δ • ஋ͷมԽͷͨͼʹݺ͹ΕΔϝιου಺Ͱൃಈͤ͞Δ໨తͰ࢖༻͢Δ
28. Tips • ϝΠϯεϨου಺Ͱ͔࣮͠ߦͰ͖ͳ͍ ‣ αϒεϨουͰ࣮ߦ͠Α͏ͱ͢ΔͱԼهΤϥʔ͕ग़Δ
 
 • σϑΥϧτͰFeedback͕࣮૷͞Ε͍ͯΔඪ४UI΋͋Δ ‣ UIPickerView ‣ UIRefreshControl ‣ UISwitch ͳͲ • ը໘ऩ࿥த΍࿥Իத͸ൃՐ͞Εͳ͍ [Feedback] trying to activate the feedback engine from a non-main thread, this is unsupported.
29. ͜͜Ͱࢲ͸ࢥͬͨ
30. ಉ࣌ʹͨ͘͞Μ࣮ߦ͢Ε͹ɺ ΑΓύϫϑϧͳ Feedback ΛൃੜͰ͖ΔͷͰ͸ʁ
31. ΍ͬͯΈͨ
32. Maximum Feedback let numberOfGenerators = 20 // ੜ੒਺ var generators: [UIImpactFeedbackGenerator] = [] // `generator`Λੜ੒ for _ in 0..<numberOfGenerators { let generator = UIImpactFeedbackGenerator(style: .heavy) generator.prepare() generators.append(generator) } // ੜ੒ͨ͠`generator`Λ͢΂ͯൃՐ for generator in generators { generator.impactOccurred() } 1. Generator Λੜ੒਺෼͚ͩੜ੒͠ɺ഑ྻʹ֨ೲ͢Δ 2. ϧʔϓͰҰؾʹ഑ྻ಺ͷ͢΂ͯͷ Generator ΛൃՐͤ͞Δ
33. 'FFECBDL
    5ZQF UIImpactFeedbackGenerator(style: .heavy) /VNCFS
    PG
    0DDVSSFE   *NQBDU )FBWZ 7FSZ
    7FSZ
    )FBWZ ݁ՌɿΑΓڧ͘ͳͬͨ
34. ͕͔ͩ͠͠
35. Deprecated Tips • ಉ࣌ʹ࣮ߦ͢ΔͱɺΑΓύϫϑϧͳFeedbackΛੜ੒͢Δ͜ͱ ͸Մೳ • ੜ੒ͨ͠FeedbackΛಉ࣌ʹ࣮ߦͰ͖Δݸ਺͸20ݸ·Ͱ ‣ 21ݸҎ্ൃੜͤ͞Α͏ͱ͢ΔͱԼهΤϥʔ͕ग़ͯɺ21ݸ໨ Ҏ߱ͷFeedback͸ൃՐ͞Εͳ͍
 • ಉ࣌ʹ࣮ߦͤ͗͢͞ΔͱɺTaptic Engine ͔Βίπϯͱ͍͏Ի ͕ฉ͑͜ΔϨϕϧͷিܸʹͳΓɺނোͷݪҼͱͳΓ͏ΔՄೳ ੑ͕͋ΔͨΊɺਖ਼௚͋·ΓΦεεϝͰ͖ͳ͍ [Feedback] out of channels
36. Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary
37. When should I use Taptic Engine? • iOS Human Interface Guidelines ʹ Taptic Engine Λ ࢖ͬͨϑΟʔυόοΫΛ࣮૷͢Δ্Ͱͷ஫ҙ఺͕·ͱΊ ΒΕ͍ͯΔ • ͜͜Ͱ͍͏ϑΟʔυόοΫͱ͸ɺΞΫγϣϯͷ݁ՌΛ ϢʔβʔʹϑΟʔυόοΫ͢Δखஈͷ͜ͱΛࢦ͢ • Ҏ߱͸ͦͷҙ༁ͱ࣮ࡍʹ࢖༻͞Ε͍ͯΔΞϓϦͷྫΛ· ͱΊͨ಺༰Ͱ͋Δ
38. When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ
39. Success ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δ͜ͱͰɺ՝͕ۚ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ
40. Success ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δ͜ͱͰɺ՝͕ۚ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ • ೝূࣦഊ࣌ʹ͸ͳ͔ͥී௨ͷόΠϒϨʔγϣϯΛൃՐ͍ͤͯ͞Δ
 ʢͳͥ .error Ͱ͸ͳ͍ͷ͔ ʣ
41. When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ • Use haptics judiciously. ‣ ϑΟʔυόοΫશମͷҙຯ͕ബΕͯ͠·͏ͷͰɺଟ༻͸ආ͚·͠ΐ͏ɻ
42. When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ • Use haptics judiciously. ‣ ϑΟʔυόοΫશମͷҙຯ͕ബΕͯ͠·͏ͷͰɺଟ༻͸ආ͚·͠ΐ͏ɻ • In general, provide haptic feedback in response to user-initiated actions. ‣ ϢʔβʔͷΞΫγϣϯʹ߹ΘͤͯϑΟʔυόοΫΛൃੜͤ͞·͠ΐ͏ɻ ೚ҙͷλΠϛϯάͰͷϑΟʔυόοΫ͸ҙࣝΛதஅͤ͞ɺޡղΛੜΈ· ͢ɻ
43. When should I use Taptic Engine? • Don’t redefine feedback types. ‣ ϑΟʔυόοΫλΠϓ͸ҙਤͲ͓Γʹ࢖༻͍ͯͩ͘͠͞ɻλεΫ͕੒ޭ͠ ͨ͜ͱΛϢʔβʔʹ௨஌͢Δʹ͸ɺ UINotificationFeedbackGenerator ͷ UINotificationFeedbackType.success Λ࢖༻͠ɺͦΕҎ֎ͷ΋ͷ͸࢖ Θͳ͍Α͏ʹ͠·͠ΐ͏ɻ
44. When should I use Taptic Engine? • Don’t redefine feedback types. ‣ ϑΟʔυόοΫλΠϓ͸ҙਤͲ͓Γʹ࢖༻͍ͯͩ͘͠͞ɻλεΫ͕੒ޭ͠ ͨ͜ͱΛϢʔβʔʹ௨஌͢Δʹ͸ɺ UINotificationFeedbackGenerator ͷ UINotificationFeedbackType.success Λ࢖༻͠ɺͦΕҎ֎ͷ΋ͷ͸࢖ Θͳ͍Α͏ʹ͠·͠ΐ͏ɻ • Fine tune your visual experience for haptics. ‣ ࢹ֮ͱ৮֮ͷϑΟʔυόοΫΛಉ࣌ʹൃੜͤ͞Δ͜ͱͰΞΫγϣϯͱ݁Ռ ͷΑΓਂ͍ͭͳ͕ΓΛఏڙ͠·͠ΐ͏ɻ
45. With Visual Experience For Haptics ex.ʣYouTube • YouTubeΞϓϦͰ͸ਧ͖ग़͕͠දࣔ͞ΕΔࡍʹ UIImpactFeedbackGenerator ͷ .light Λಉ࣌ʹൃՐͤ͞Δ͜ͱͰɺࢹ֮ ͱ৮֮ͷϑΟʔυόοΫΛಉ࣌ʹ࣮ݱ͍ͯ͠Δ
46. When should I use Taptic Engine? • Don’t redefine feedback types. ‣ ϑΟʔυόοΫλΠϓ͸ҙਤͲ͓Γʹ࢖༻͍ͯͩ͘͠͞ɻλεΫ͕੒ޭ͠ ͨ͜ͱΛϢʔβʔʹ௨஌͢Δʹ͸ɺ UINotificationFeedbackGenerator ͷ UINotificationFeedbackType.success Λ࢖༻͠ɺͦΕҎ֎ͷ΋ͷ͸࢖ Θͳ͍Α͏ʹ͠·͠ΐ͏ɻ • Fine tune your visual experience for haptics. ‣ ࢹ֮ͱ৮֮ͷϑΟʔυόοΫΛಉ࣌ʹൃੜͤ͞Δ͜ͱͰΞΫγϣϯͱ݁Ռ ͷΑΓਂ͍ͭͳ͕ΓΛఏڙ͠·͠ΐ͏ɻ • Don’t rely on a single mode of communication. ‣ શͯͷ୺຤͕Haptic FeedbackΛαϙʔτ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ͷͰɺΞ Ϋγϣϯͷ݁ՌΛHaptic Feedback͚ͩʹͯ͠͸͍͚·ͤΜɻ
47. When should I use Taptic Engine? • Use haptics when visual feedback may be occluded. ‣ ΦϒδΣΫτΛεΫϦʔϯ্ͷ৔ॴʹυϥοά͢Δͱ͖ͳͲ͸ɺ ࢦͰӅΕͯ͠·͍·͢ɻಛఆͷ৔ॴ΍஋ʹ౸ୡͨ͠ͱ͖ʹϢʔ βʔʹHaptic FeedbackͰ௨஌͢Δ͜ͱΛݕ౼͍ͯͩ͘͠͞ɻ
48. When Reaching the "Edge" ex.ʣTwitter • TwitterΞϓϦͰ͸ը૾ͷϓϨϏϡʔը໘Ͱॖখɾ֦େͷ୺·Ͱ౸ୡͨ͠ͱ͖ ʹ UIImpactFeedbackGenerator ͷ .light ΛൃՐ͍ͤͯ͞Δ • ඪ४ͷϝʔϧΞϓϦͰ͸ड৴ϘοΫεͰηϧΛࠨʹҾͬுͬͨ࣌ʹ̏ͭͷબ ୒ࢶ͕ݱΕɺͦͷ··ࠨʹҾͬுΓ੾ͬͯ୺·Ͱ౸ୡͨ͠ͱ͖ʹ UIImpactFeedbackGenerator ͷ .medium ΛൃՐ͍ͤͯ͞Δ ex.ʣඪ४ͷϝʔϧΞϓϦ
49. When should I use Taptic Engine? • Use haptics when visual feedback may be occluded. ‣ ΦϒδΣΫτΛεΫϦʔϯ্ͷ৔ॴʹυϥοά͢Δͱ͖ͳͲ͸ɺ ࢦͰӅΕͯ͠·͍·͢ɻಛఆͷ৔ॴ΍஋ʹ౸ୡͨ͠ͱ͖ʹϢʔ βʔʹHaptic FeedbackͰ௨஌͢Δ͜ͱΛݕ౼͍ͯͩ͘͠͞ɻ • Synchronize haptics with accompanying sound. ‣ Haptic FeedbackͰ͸Ի͸ൃੜ͠·ͤΜɻHaptic Feedbackͱ ಉ࣌ʹԻ͕ඞཁͰ͋Ε͹ɺ֤ࣗͰԻ੠ಉظॲཧΛ࣮૷͢Δඞ ཁ͕͋Γ·͢ɻ
50. Success With Sound Effect ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δͱಉ࣌ʹߪೖ׬ྃͷԻΛ໐Β͢͜ͱͰɺ՝͕ۚ ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ ԻΛར༻͢Δ͜ͱͰɺϢʔβʔʹରͯ͠ૢ࡞ΠϝʔδΛ࣋ͨͤ΍͘͢ͳΔ
51. Success With Sound Effect ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δͱಉ࣌ʹߪೖ׬ྃͷԻΛ໐Β͢͜ͱͰɺ՝͕ۚ ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ • Ի΋ར༻͢Δ͜ͱͰɺϢʔβʔʹରͯ͠ૢ࡞ΠϝʔδΛ࣋ͨͤ΍͘͢ͳΔ ߪೖ׬ྃͷԻʹؔ͢ΔTwitterͷ൓Ԡ
52. Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary
53. Summary • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢ΔͨΊʹ౥ࡌ͞ Ε͍ͯΔ • iOS10Ҏ্Ͱ͋Ε͹ɺUIFeedbackGeneratorΛ࢖༻͢Δ͜ ͱͰHaptic FeedbackΛ࣮૷Ͱ͖Δ • ϑΟʔυόοΫ͸࢖͏΂͖Օॴ͚ͩʹ࢖༻͠ɺଟ༻͗ͯ͢͠ ҙຯ͕ബΕͳ͍Α͏ʹ஫ҙ͢Δ • ΄ͲΑ͍FeedbackͰɺϫϯϥϯΫ্ͷϢʔβʔମݧΛ
54. • cokaholic/TapticSampler
 https://github.com/cokaholic/TapticSampler
55. Thank you for listeningʂ
56. ࢀߟϦϯΫ • UIFeedbackGenerator - UIKit | Apple Developer Documentation
 https://developer.apple.com/documentation/uikit/uifeedbackgenerator • iPhone 7 Λೖखͨ͠ͷͰૣ଎ Taptic Engine ͷ API Λࢼͯ͠Έ·ͨ͠ -Qiita
 https://qiita.com/griffin_stewie/items/298f57ca3f1714ebe45c • [iOS 10] UIFeedbackGenerator Ͱ iPhone 7 ͷ Taptic Engine Λ੍ޚ͢Δ - Developers.IO
 https://dev.classmethod.jp/smartphone/iphone/ios-10-ui-feedback-generator/ • UIFeedbackGeneratorͷ࢖͍ํͱศརʹ࢖͑ΔϥΠϒϥϦ - VASILY DEVELOPERS BLOG
 http://tech.vasily.jp/entry/ios_ui_feedbcak_generator • iPhone 7ͷTaptic Engine͕ࠓޙͷεϚϗΠϯλʔϑΣʔεΛม͑Δ͔΋ͷ࿩ - FICC Workbook
 http://ficc-workbook.tumblr.com/post/151637042116/iphone-7%E3%81%AEtaptic- engine%E3%81%8C%E4%BB%8A%E5%BE%8C%E3%81%AE%E3%82%B9%E3%83%9 E%E3%83%9B%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3 %82%A7%E3%83%BC%E3%82%B9%E3%82%92%E5%A4%89%E3%81%88%E3%82% 8B%E3%81%8B%E3%82%82%E3%81%AE%E8%A9%B1