Hapticをカスタマイズしてみよう / ZOZO Tech Talk #6 Customize Haptic

Transcript

1. HapticΛΧελϚΠζͯ͠ΈΑ͏
   גࣜձࣾZOZO
   ZOZOTOWN։ൃຊ෦ ZOZOTOWNΞϓϦ෦ iOSϒϩοΫ
   ԕ౻ ສཬ
   Copyright © ZOZO, Inc.
   1
   

   View Slide

2. © ZOZO, Inc.
   גࣜձࣾZOZO
   ZOZOTOWN։ൃຊ෦ ZOZOTOWNΞϓϦ෦ iOSϒϩοΫ
   ԕ౻ ສཬ
   Twitter:@re___you
   #ZOZOTOWN iOSΞϓϦ։ൃ୲౰👩💻
   #վળ׆ಈ΋ͯ͠·͢🛠
   #࠷ۙങͬͯΑ͔ͬͨ΋ͷ͸Apple Watch⌚
   2
   

   View Slide

3. © ZOZO, Inc.
   3
   ࠓ೔ͷςʔϚ
   

   View Slide

4. © ZOZO, Inc.
   4
   HapticΛΧελϚΠζͯ͠ΈΑ͏
   

   View Slide

5. © ZOZO, Inc.
   5
   Apple WatchΛ͚͍ͭͯͨΒHapticͷόϦΤʔγϣϯʹؾ͍ͮͨ
   ☀
   ىচΞϥʔϜ
   ಓҊ಺ͷࠨӈͷ
   
   
   ਐߦํ޲
   ϚεΫ࣌ͷ
   
   
   iPhoneͷղআ
   🔓
   ώμϦɾɾɾώμϦɾɾɾώμϦ
   ϛΪϛΪϛΪϛΪϛΪϛΪ
   Χνο
   ͱͱΜɺͱͱΜɺͱͱΜ
   

   View Slide

6. © ZOZO, Inc.
   6
   Core Hapticsొ৔Ͱ

   Hapticͷදݱ޲্
   

   View Slide

7. © ZOZO, Inc.
   7
   Core Hapticsʹ͍ͭͯ
   

   View Slide

8. © ZOZO, Inc.
   8
   UIFeedbackGeneratorͱCore Haptics
   UIFeedbackGenerator Core Haptics
   • iOS 10 ~
   • ܾΊΒΕͨHapticύλʔϯͷΈ

   ࠶ੜՄೳ
   • ZOZOTOWN΋͓ؾʹೖΓͱ͔Ͱ
   ࢖ͬͯΔ
   • iOS 13 ~
   • HapticύλʔϯΛΧελϚΠζͰ͖Δ
   

   View Slide

9. © ZOZO, Inc.
   9
   Core HapticsͷΧελϚΠζཁૉ
   ԻΛ࠶ੜ(.wav)
   ৮֮
   

   View Slide

10. © ZOZO, Inc.
    10
    Core HapticsͷΧελϚΠζͱ͸
    ৮֮ɺԻΛ૊Έ߹Θͤͯ
    1ͭͷύλʔϯΛ࡞Δ͜ͱ
    

    View Slide

11. © ZOZO, Inc.
    Core Hapticsͷ໾ׂ
    • Haptic ίϯςϯπͷ࡞੒
    • CHHapticEvent: ৮֮ɺԻ
    • CHHapticEventParameter: CHHapticEventͷύϥϝʔλʔ
    • CHHapticPattern: CHHapticEventΛ૊Έ߹Θͤͨ΋ͷ
    • Hapticͷ࠶ੜ
    • CHHapticPlayer: CHHapticPatternΛ࠶ੜ
    • CHHapticEngine: CHHapticPlayerΛ࡞੒
    11
    

    View Slide

12. © ZOZO, Inc.
    12
    Core Hapticsͷίϯςϯπߏ੒
    https://developer.apple.com/videos/play/wwdc2019/520
    WWDC 2019 520 Introducing Core HapticsΑΓ
    

    View Slide

13. © ZOZO, Inc.
    13
    Core HapticsͰઃఆͰ͖Δ2छྨͷ৮֮
    τϯο ϰΡʔʔʔʔʔʔʔʔ
    https://developer.apple.com/videos/play/wwdc2019/810
    Designing Audio-Haptic ExperiencesΑΓ
    

    View Slide

14. © ZOZO, Inc.
    14
    Core HapticsͰઃఆͰ͖Δ2छྨͷ৮֮
    τϯο ϰΡʔʔʔʔʔʔʔʔ
    - durationΛઃఆͰ͖Δ
    
    
    - duration͕0ͩͱHaptic͕࠶ੜͰ͖ͳ͍
    - durationͷઃఆ͸ͳ͍
    Designing Audio-Haptic ExperiencesΑΓ
    

    View Slide

15. © ZOZO, Inc.
    TransientͷCHHapticEventParameter
    15
    Haptic Intensity
    Haptic Sharpness
    0 1
    1
    ߗ͍ײ͡
    ॊΒ͔͍ײ͡
    

    View Slide

16. © ZOZO, Inc.
    ContinuousͷCHHapticEventParameter
    16
    Haptic Intensity
    Haptic Sharpness
    ;ΜΘΓৼಈΛײ͡Δ ͸͖ͬΓͱৼಈΛײ͡Δ
    

    View Slide

17. © ZOZO, Inc.
    ԻͷCHHapticEventParameter
    17
    • audioVolume
    • audioPitch
    • audioPan
    • audioBrightness
    

    View Slide

18. © ZOZO, Inc.
    Hapticͷ࠶ੜ
    https://developer.apple.com/documentation/corehaptics/chhapticengine
    HapticίϯςϯπΛ࡞੒
    CHHapticEngineͷυΩϡϝϯτΑΓ
    

    View Slide

19. © ZOZO, Inc.
    19
    Engine४උ
    class ViewController: UIViewController {
    // ࠶ੜதʹ։์͞Εͳ͍Α͏ʹϝϯόม਺ʹ͢Δ
    private let engine: CHHapticEngine!
    override func viewDidLoad() {
    super.viewDidLoad()
    // engine͸init΍viewDidLoad()ͳͲͷૣ͍λΠϛϯάͰ࡞੒
    engine = try! CHHapticEngine(audioSession: AVAudioSession.sharedInstance())
    try! engine.start()
    }
    }
    

    View Slide

20. © ZOZO, Inc.
    20
    Hapticίϯςϯπ࡞੒
    // Transient Event
    let transientEvent = CHHapticEvent(eventType: .hapticTransient,
    parameters: [
    CHHapticEventParameter(parameterID: .hapticIntensity, value: 0.3),
    CHHapticEventParameter(parameterID: .hapticSharpness, value: 0.3)],
    relativeTime: 0.2)
    // Audio Event
    let audioResourceID = try! engine.registerAudioResource(resourceURL)
    let audioEvent = CHHapticEvent(audioResourceID: audioResourceID, parameters:
    [CHHapticEventParameter(parameterID: .audioVolume, value: 0.3)], relativeTime: 0)
    do {
    // ΠϕϯτΛ΋ͱʹHapticύλʔϯΛ࡞੒
    let pattern = try CHHapticPattern(events: [transientEvent, audioEvent], parameters: [])
    } catch let error {ɾɾɾ}
    

    View Slide

21. © ZOZO, Inc.
    21
    Haptic࠶ੜ
    do {
    let pattern = try CHHapticPattern(events: [event, audioEvent], parameters: [])
    let player = try engine.makePlayer(with: pattern)
    try player?.start(atTime: CHHapticTimeImmediate)
    } catch let error {ɾɾɾ}
    

    View Slide

22. © ZOZO, Inc.
    22
    

    View Slide

23. © ZOZO, Inc.
    23
    ΧελϚΠζΛߟ͑ͯΈΔ
    

    View Slide

24. © ZOZO, Inc.
    24
    ʮ঎඼ΛΧʔτʹೖΕΔʯ
    ࣌Λߟ͑ͯΈΔ
    ϦϦʔε͸͠ͳ͍Α
    ͋͘·Ͱ࣮ݧͶ
    👆
    

    View Slide

25. © ZOZO, Inc.
    25
    ʮ঎඼ΛΧʔτʹೖΕΔʯ
    ࣌Λߟ͑ͯΈΔ
    ϦϦʔε͸͠ͳ͍Α
    ͋͘·Ͱ࣮ݧͶ
    👆
    

    View Slide

26. © ZOZO, Inc.
    26
    Designing
    Audio-Haptic Experiences
    https://developer.apple.com/videos/play/wwdc2019/810/
    

    View Slide

27. © ZOZO, Inc.
    27
    Appleͷࣄྫ
    https://developer.apple.com/videos/play/wwdc2019/810/
    

    View Slide

28. © ZOZO, Inc.
    28
    Appleͷࣄྫ
    Apple Watch ཉ͍͠ɾɾɾ
    https://developer.apple.com/videos/play/wwdc2019/810/
    

    View Slide

29. © ZOZO, Inc.
    29
    HapticsΛઃܭ͢Δͷʹॏཁͳ3ͭͷ͜ͱ
    ௐ࿨ੑ
    ҼՌؔ܎ ࣮༻ੑ
    

    View Slide

30. © ZOZO, Inc.
    30
    ҼՌؔ܎
    ඞཁͳ͜ͱ
    • ԿʹΑͬͯࣄ৅͕ى͖͔ͨ໌֬ʹ͢Δ
    ͳͥඞཁͳͷ͔
    • ҼՌؔ܎͕߹Θͳ͍ͱҧ࿨ײΛײ͡Δ
    

    View Slide

31. © ZOZO, Inc.
    31
    ҼՌؔ܎
    Designing Audio-Haptic ExperiencesΑΓ
    ྫ) αοΧʔϘʔϧΛऽͬͨͱ͖ͷԻ͕ҧ͏ͱҧ࿨ײ͕͋Δ
    https://developer.apple.com/videos/play/wwdc2019/810/
    

    View Slide

32. © ZOZO, Inc.
    32
    ௐ࿨ੑ
    ඞཁͳ͜ͱ
    • ࢹ֮(Ξχϝʔγϣϯ)ɺௌ֮(Ի)ɺ৮֮ΛҰகͤ͞Δ
    ͳͥඞཁͳͷ͔
    • ௐ࿨่͕ΕΔͱମݧ͕ଛͳΘΕΔ
    • ྫ) αοΧʔϘʔϧΛऽΔલʹ৮͕֮ൃੜ͢Δ
    

    View Slide

33. © ZOZO, Inc.
    33
    ࣮༻ੑ
    ඞཁͳ͜ͱ
    • ΞϓϦέʔγϣϯͷମݧ͕࣮֬ʹ޲্͢ΔՕॴʹಋೖ͢Δ
    ͳͥඞཁͳͷ͔
    • HapticΛ௥Ճ͗͢͠Δͱཁ఺͕բΉ
    

    View Slide

34. © ZOZO, Inc.
    34
    ·ͣΧελϚΠζΛߟ͑Δ্Ͱେࣄͳ͜ͱ
    https://developer.apple.com/videos/play/wwdc2019/810
    ৮֮ɺԻ͕
    ͦΕΒ͍͜͠ͱ
    

    View Slide

35. © ZOZO, Inc.
    35
    ෰ΛΧʔτʹೖΕΔ࣌ͷ
    ৮֮ͷͦΕΒ͠͞ͱ͸ʁ
    

    View Slide

36. © ZOZO, Inc.
    36
    https://developer.apple.com/videos/play/wwdc2019/810
    ϙϯ
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    

    View Slide

37. © ZOZO, Inc.
    37
    https://developer.apple.com/videos/play/wwdc2019/810
    ϙϯ
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    ୯ൃతͳ৮͕֮1౓
    

    View Slide

38. © ZOZO, Inc.
    38
    https://developer.apple.com/videos/play/wwdc2019/810
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    βοβοβο
    

    View Slide

39. © ZOZO, Inc.
    39
    https://developer.apple.com/videos/play/wwdc2019/810
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    βοβοβο
    ܧଓతͳ৮֮
    or
    ୯ൃతͳ৮͕֮ෳ਺ճ
    

    View Slide

40. © ZOZO, Inc.
    40
    https://developer.apple.com/videos/play/wwdc2019/810
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    Ψγϟʔϯ
    ͺΓʔΜ
    ऑ͍ ~ த͘Β͍ͷ৮֮ ڧ͍৮֮
    

    View Slide

41. © ZOZO, Inc.
    41
    https://developer.apple.com/videos/play/wwdc2019/810
    ৮͕֮ͦΕΒ͍͠ͱ͸ʁ
    ΍ΘΒ͔͍৮֮ Ӷ͍৮֮
    ΅;ͬ
    Ψπϯ
    

    View Slide

42. © ZOZO, Inc.
    42
    ৮֮͸Ի΍ࡐ࣭ͱؔ࿈͕͋Γͦ͏
    

    View Slide

43. © ZOZO, Inc.
    43
    ͕͜͜෼͔Ε͹৮֮Λ
    
    
    ܾΊ΍͘͢Γͦ͏
    ৮֮͸Ի΍ࡐ࣭ͱؔ࿈͕͋Γͦ͏
    

    View Slide

44. © ZOZO, Inc.
    44
    ෰ΛΧʔτʹೖΕΔ࣌͸
    ͲΜͳԻ͕͢ΔͩΖ͏͔ʁ
    

    View Slide

45. © ZOZO, Inc.
    45
    • ାʹٵ͍ࠐ·ΕΔγϡοͬͯԻ
    • ϋϯΨʔˠ෰ˠΧʔτ(͔͝?)ɺʹ͋ͨΔͱ͢Ε͹ɺΰοͱ͔ίϯ ʹͳΔ
    • Ϙϑοͯײ͡
    • ෍ͷ͜͢ΕΔԻ͔ͳ͋ʮγϡοʯͬͯײ͡
    • ෍͕མͪͨԻ͔ͳ
    • ϙϑͬײʢϘϑΑΓϙϑ೿ʣ
    • ચ୕ΧΰʹҥྨΛೖΕΔΑ͏ͳʮόαοʯͱ͍͏ײ͡
    νʔϜϝϯόʔʹҙݟΛฉ͍ͯΈͨ
    

    View Slide

46. © ZOZO, Inc.
    46
    • ାʹٵ͍ࠐ·ΕΔγϡοͬͯԻ
    • ϋϯΨʔˠ෰ˠΧʔτ(͔͝?)ɺʹ͋ͨΔͱ͢Ε͹ɺΰοͱ͔ίϯ ʹͳΔ
    • Ϙϑοͯײ͡
    • ෍ͷ͜͢ΕΔԻ͔ͳ͋ʮγϡοʯͬͯײ͡
    • ෍͕མͪͨԻ͔ͳ
    • ϙϑͬײʢϘϑΑΓϙϑ೿ʣ
    • ચ୕ΧΰʹҥྨΛೖΕΔΑ͏ͳʮόαοʯͱ͍͏ײ͡
    νʔϜϝϯόʔʹҙݟΛฉ͍ͯΈͨ
    

    View Slide

47. © ZOZO, Inc.
    47
    ୯ൃతͳ৮͕֮߹͍ͦ͏
    

    View Slide

48. © ZOZO, Inc.
    48
    ΧʔτʹೖΕΔԻΛ࠶ݱͯ͠ΈΑ͏
    • ϋϯΨʔʹ͔͔ͬͨγϟπ
    • ΧʔτʹೖΕΔಈ࡞
    ؀ڥ
    

    View Slide

49. © ZOZO, Inc.
    49
    ΧʔτʹೖΕΔԻΛ࠶ݱͯ͠ΈΑ͏
    • ϋϯΨʔʹ͔͔ͬͨγϟπ
    • ΧʔτʹೖΕΔಈ࡞
    ؀ڥ
    γϡοɺΧϯʁ
    Χϯʁ
    

    View Slide

50. © ZOZO, Inc.
    50
    ԻΛݟͯΈΑ͏
    

    View Slide

51. © ZOZO, Inc.
    51
    

    View Slide

52. © ZOZO, Inc.
    52
    • 2ͭͷԻ͕ͳ͍ͬͯΔ
    • খ͍͞Իͱେ͖ͳԻ
    • ҥࡲΕˠϋϯΨʔ
    ࿥Իͨ͠Իͷ೾ܗ
    

    View Slide

53. © ZOZO, Inc.
    53
    ԻΛࢀߟʹߟ͑Δͱ
    • ୯ൃతͳ৮֮
    • খ͘͞ॊΒ͔͍৮֮ → 1ճ໨ΑΓ΋େ͖͘Ӷརͳ৮֮
    

    View Slide

54. © ZOZO, Inc.
    54
    

    View Slide

55. © ZOZO, Inc.
    55
    Χʔτʹ෰͕ೖͬͨ
    ײ֮ͬΆ͍ؾ͕͢Δ
    

    View Slide

56. © ZOZO, Inc.
    56
    ৮֮Λߟ͑Δͷʹ
    Ի͸ඇৗʹࢀߟʹͳΔ
    

    View Slide

57. © ZOZO, Inc.
    57
    ·ͱΊ
    • ΧελϚΠζʹ͸Core HapticsΛ࢖͏
    • Hapticͷઃܭʹ͸ʮҼՌؔ܎ʯʮௐ࿨ੑʯʮ࣮༻ੑʯ͕ॏཁ
    • ৮֮͸ԻΛࢀߟʹ͢ΔͱܾΊ΍͍͢
    

    View Slide

58. © ZOZO, Inc.
    58
    HapticΛΧελϚΠζ͠Α͏ʂ
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide