Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

M"e
May 16, 2022

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

M"e

May 16, 2022
Tweet

More Decks by M"e

Other Decks in Programming

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