Tweet
Tweet

Slide 1

Slide 1 text

iOSDC 2018 2018/8/31 cokaholic @TK_u_nya

Slide 2

Slide 2 text

cokaholic • iOS engineer at AbemaTV, Inc. • Github, Qiita: cokaholic • Twitter: @TK_u_nya • AppStore: Keisuke Tatsumi

Slide 3

Slide 3 text

iPhone6͔ΒiPhone8ʹങ͍ม͑·ͨ͠ 1೥΄Ͳલ

Slide 4

Slide 4 text

ͦͯ͠ɺීஈ௨Γʹૢ࡞ͯ͠ ͍Δ͏ͪʹࠓ·Ͱʹແ͔ͬͨ ͋Δҧ࿨ײʹؾ͖ͮ·ͨ͠…

Slide 5

Slide 5 text

ϒϧϯοʂϒϧϯοʂ

Slide 6

Slide 6 text

͑ͬ…ʂʁ

Slide 7

Slide 7 text

ϒϧϯοʂϒϧϯοʂ

Slide 8

Slide 8 text

͍ͭ͜ɾɾɾಈͧ͘ɾɾɾ

Slide 9

Slide 9 text

ͦͷਖ਼ମͱ͸…

Slide 10

Slide 10 text

Taptic Engine

Slide 11

Slide 11 text

Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary

Slide 12

Slide 12 text

Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary

Slide 13

Slide 13 text

What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ

Slide 14

Slide 14 text

Taptic Engine ͕౥ࡌ͞Ε͍ͯΔσόΠε • iPhone6s, 6s Plus • iPhone7, 7 Plus • iPhone8, 8 Plus • Apple Watch Series1, 2, 3 • iPhoneX

Slide 15

Slide 15 text

What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢Δ ͨΊʹ౥ࡌ͞Ε͍ͯΔ

Slide 16

Slide 16 text

What’s Haptic Feedback • ʮ৮֮ϑΟʔυόοΫʯͱ༁͠·͢ • ར༻ऀʹྗɺৼಈɺಈ͖ͳͲΛ༩͑Δ͜ͱͰൽ ෘײ֮ϑΟʔυόοΫΛಘΔςΫϊϩδʔͷ͜ͱ • աڈʹ͸NINTENDO64༻ίϯτϩʔϥͷৼಈ ύοΫ΍ιχʔͷDUALSHOCKͳͲ͕͜ΕΛ࣮ ݱ͢ΔͨΊͷ΋ͷͰ͋ͬͨ

Slide 17

Slide 17 text

What’s Taptic Engine • iPhone6s͔Β಺෦ʹ౥ࡌ͞Εͨϋʔυ΢ΣΞ • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢Δͨ Ίʹ౥ࡌ͞Ε͍ͯΔ • iOS10͔ΒUIKitʹTaptic EngineΛ੍ޚ͢ΔͨΊ ͷΫϥε (UIFeedbackGenerator) ͕௥Ճ͞Εͨ

Slide 18

Slide 18 text

Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary

Slide 19

Slide 19 text

How To Use • Taptic EngineΛ੍ޚ͢ΔͨΊͷΫϥε ‣ UIFeedbackGenerator ‣ UINotificationFeedbackGenerator ‣ UIImpactFeedbackGenerator ‣ UISelectionFeedbackGenerator

Slide 20

Slide 20 text

UIFeedbackGenerator • ଞ̏ͭͷΫϥεͷϕʔεΫϥεͰ͋Γɺந৅Ϋ ϥεͰ΋͋Δ • ͜ͷΫϥεΛ௚઀ΠϯελϯεԽͨ͠Γɺ਌Ϋ ϥεͱͯ͠ΧελϜͰ࢖༻͢Δ͜ͱ͸ඇਪ঑ͱ ͳ͍ͬͯΔ

Slide 21

Slide 21 text

UINotificationFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • ΞΫγϣϯͷ੒ޭɺࣦഊɺܯࠂΛ఻͑Δ৮֮Λੜ੒͢Δͨ ΊͷΫϥε • طఆͷಈ࡞γʔέϯεΛද͢ UINotificationFeedbackType Λࢦఆͯ͠ಈ͔ͤΔ

Slide 22

Slide 22 text

How To Use let generator = UINotificationFeedbackGenerator() generator.prepare() generator.notificationOccurred(.error) 1. GeneratorΛΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. notificationOccurred(UINotificationFeedbackType)ͰൃՐͤ͞Δ ͦΕͧΕͷৼಈͷҧ͍͸ҎԼͷ௨ΓͰ͢ɻ • error … τΡτΡτΡ ͱ͍͏ײ͡Ͱ3ճৼಈ • warning … τϯτϯ ͱ2ճৼಈ • success … τϯτϯ ͱ2ճৼಈ

Slide 23

Slide 23 text

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ൃ໨ͷৼಈ͕ॏ͍ؾ͕͢Δ

Slide 24

Slide 24 text

UIImpactFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • େɾதɾখͷ༳Εͷେ͖͞ͷҟͳΔ৮֮Λੜ੒͢ΔͨΊ ͷΫϥε • طఆͷಈ࡞γʔέϯεΛද͢ UIImpactFeedbackStyle Λ ࢦఆͯ͠ಈ͔ͤΔ

Slide 25

Slide 25 text

How To Use let generator = UIImpactFeedbackGenerator(style: .light) generator.prepare() generator.impactOccurred() 1. GeneratorΛ UIImpactFeedbackStyle ͔ΒΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. impactOccurred()ͰൃՐͤ͞Δ • lightͩͱؾ͔ͮ͘Ͳ͏͔ͷΪϦΪϦ͙Β͍ͰɺheavyͰ΋ઌ΄Ͳͷ warning΄ͲͰ͸ແ͍ؾ͕͢Δ

Slide 26

Slide 26 text

UISelectionFeedbackGenerator • UIFeedbackGeneratorͷαϒΫϥε • બ୒ࢶͷมԽΛ఻͑Δ৮֮Λੜ੒͢ΔͨΊͷ Ϋϥε • ओʹUIPickerViewͳͲͷ࿈ଓతͳબ୒͕Մೳ ͳUIʹରͯ͠࢖༻͢Δ

Slide 27

Slide 27 text

How To Use let generator = UISelectionFeedbackGenerator() generator.prepare() generator.selectionChanged() 1. GeneratorΛΠϯελϯεԽ͢Δ 2. prepare() Λݺͼग़͢ (Φϓγϣϯ) 3. selectionChanged()ͰൃՐͤ͞Δ • ஋ͷมԽͷͨͼʹݺ͹ΕΔϝιου಺Ͱൃಈͤ͞Δ໨తͰ࢖༻͢Δ

Slide 28

Slide 28 text

Tips • ϝΠϯεϨου಺Ͱ͔࣮͠ߦͰ͖ͳ͍ ‣ αϒεϨουͰ࣮ߦ͠Α͏ͱ͢ΔͱԼهΤϥʔ͕ग़Δ
 
 • σϑΥϧτͰFeedback͕࣮૷͞Ε͍ͯΔඪ४UI΋͋Δ ‣ UIPickerView ‣ UIRefreshControl ‣ UISwitch ͳͲ • ը໘ऩ࿥த΍࿥Իத͸ൃՐ͞Εͳ͍ [Feedback] trying to activate the feedback engine from a non-main thread, this is unsupported.

Slide 29

Slide 29 text

͜͜Ͱࢲ͸ࢥͬͨ

Slide 30

Slide 30 text

ಉ࣌ʹͨ͘͞Μ࣮ߦ͢Ε͹ɺ ΑΓύϫϑϧͳ Feedback ΛൃੜͰ͖ΔͷͰ͸ʁ

Slide 31

Slide 31 text

΍ͬͯΈͨ

Slide 32

Slide 32 text

Maximum Feedback let numberOfGenerators = 20 // ੜ੒਺ var generators: [UIImpactFeedbackGenerator] = [] // `generator`Λੜ੒ for _ in 0..

Slide 33

Slide 33 text

'FFECBDL5ZQF UIImpactFeedbackGenerator(style: .heavy) /VNCFSPG0DDVSSFE *NQBDU )FBWZ 7FSZ7FSZ)FBWZ ݁ՌɿΑΓڧ͘ͳͬͨ

Slide 34

Slide 34 text

͕͔ͩ͠͠

Slide 35

Slide 35 text

Deprecated Tips • ಉ࣌ʹ࣮ߦ͢ΔͱɺΑΓύϫϑϧͳFeedbackΛੜ੒͢Δ͜ͱ ͸Մೳ • ੜ੒ͨ͠FeedbackΛಉ࣌ʹ࣮ߦͰ͖Δݸ਺͸20ݸ·Ͱ ‣ 21ݸҎ্ൃੜͤ͞Α͏ͱ͢ΔͱԼهΤϥʔ͕ग़ͯɺ21ݸ໨ Ҏ߱ͷFeedback͸ൃՐ͞Εͳ͍
 • ಉ࣌ʹ࣮ߦͤ͗͢͞ΔͱɺTaptic Engine ͔Βίπϯͱ͍͏Ի ͕ฉ͑͜ΔϨϕϧͷিܸʹͳΓɺނোͷݪҼͱͳΓ͏ΔՄೳ ੑ͕͋ΔͨΊɺਖ਼௚͋·ΓΦεεϝͰ͖ͳ͍ [Feedback] out of channels

Slide 36

Slide 36 text

Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary

Slide 37

Slide 37 text

When should I use Taptic Engine? • iOS Human Interface Guidelines ʹ Taptic Engine Λ ࢖ͬͨϑΟʔυόοΫΛ࣮૷͢Δ্Ͱͷ஫ҙ఺͕·ͱΊ ΒΕ͍ͯΔ • ͜͜Ͱ͍͏ϑΟʔυόοΫͱ͸ɺΞΫγϣϯͷ݁ՌΛ ϢʔβʔʹϑΟʔυόοΫ͢Δखஈͷ͜ͱΛࢦ͢ • Ҏ߱͸ͦͷҙ༁ͱ࣮ࡍʹ࢖༻͞Ε͍ͯΔΞϓϦͷྫΛ· ͱΊͨ಺༰Ͱ͋Δ

Slide 38

Slide 38 text

When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ

Slide 39

Slide 39 text

Success ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δ͜ͱͰɺ՝͕ۚ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ

Slide 40

Slide 40 text

Success ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δ͜ͱͰɺ՝͕ۚ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ • ೝূࣦഊ࣌ʹ͸ͳ͔ͥී௨ͷόΠϒϨʔγϣϯΛൃՐ͍ͤͯ͞Δ
 ʢͳͥ .error Ͱ͸ͳ͍ͷ͔ ʣ

Slide 41

Slide 41 text

When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ • Use haptics judiciously. ‣ ϑΟʔυόοΫશମͷҙຯ͕ബΕͯ͠·͏ͷͰɺଟ༻͸ආ͚·͠ΐ͏ɻ

Slide 42

Slide 42 text

When should I use Taptic Engine? • Success. ‣ ೖۚ΍ղৣͳͲ͕੒ޭͨ͜͠ͱΛ఻͑ΔͨΊʹ࢖༻Ͱ͖·͢ɻ • Use haptics judiciously. ‣ ϑΟʔυόοΫશମͷҙຯ͕ബΕͯ͠·͏ͷͰɺଟ༻͸ආ͚·͠ΐ͏ɻ • In general, provide haptic feedback in response to user-initiated actions. ‣ ϢʔβʔͷΞΫγϣϯʹ߹ΘͤͯϑΟʔυόοΫΛൃੜͤ͞·͠ΐ͏ɻ ೚ҙͷλΠϛϯάͰͷϑΟʔυόοΫ͸ҙࣝΛதஅͤ͞ɺޡղΛੜΈ· ͢ɻ

Slide 43

Slide 43 text

When should I use Taptic Engine? • Don’t redefine feedback types. ‣ ϑΟʔυόοΫλΠϓ͸ҙਤͲ͓Γʹ࢖༻͍ͯͩ͘͠͞ɻλεΫ͕੒ޭ͠ ͨ͜ͱΛϢʔβʔʹ௨஌͢Δʹ͸ɺ UINotificationFeedbackGenerator ͷ UINotificationFeedbackType.success Λ࢖༻͠ɺͦΕҎ֎ͷ΋ͷ͸࢖ Θͳ͍Α͏ʹ͠·͠ΐ͏ɻ

Slide 44

Slide 44 text

When should I use Taptic Engine? • Don’t redefine feedback types. ‣ ϑΟʔυόοΫλΠϓ͸ҙਤͲ͓Γʹ࢖༻͍ͯͩ͘͠͞ɻλεΫ͕੒ޭ͠ ͨ͜ͱΛϢʔβʔʹ௨஌͢Δʹ͸ɺ UINotificationFeedbackGenerator ͷ UINotificationFeedbackType.success Λ࢖༻͠ɺͦΕҎ֎ͷ΋ͷ͸࢖ Θͳ͍Α͏ʹ͠·͠ΐ͏ɻ • Fine tune your visual experience for haptics. ‣ ࢹ֮ͱ৮֮ͷϑΟʔυόοΫΛಉ࣌ʹൃੜͤ͞Δ͜ͱͰΞΫγϣϯͱ݁Ռ ͷΑΓਂ͍ͭͳ͕ΓΛఏڙ͠·͠ΐ͏ɻ

Slide 45

Slide 45 text

With Visual Experience For Haptics ex.ʣYouTube • YouTubeΞϓϦͰ͸ਧ͖ग़͕͠දࣔ͞ΕΔࡍʹ UIImpactFeedbackGenerator ͷ .light Λಉ࣌ʹൃՐͤ͞Δ͜ͱͰɺࢹ֮ ͱ৮֮ͷϑΟʔυόοΫΛಉ࣌ʹ࣮ݱ͍ͯ͠Δ

Slide 46

Slide 46 text

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͚ͩʹͯ͠͸͍͚·ͤΜɻ

Slide 47

Slide 47 text

When should I use Taptic Engine? • Use haptics when visual feedback may be occluded. ‣ ΦϒδΣΫτΛεΫϦʔϯ্ͷ৔ॴʹυϥοά͢Δͱ͖ͳͲ͸ɺ ࢦͰӅΕͯ͠·͍·͢ɻಛఆͷ৔ॴ΍஋ʹ౸ୡͨ͠ͱ͖ʹϢʔ βʔʹHaptic FeedbackͰ௨஌͢Δ͜ͱΛݕ౼͍ͯͩ͘͠͞ɻ

Slide 48

Slide 48 text

When Reaching the "Edge" ex.ʣTwitter • TwitterΞϓϦͰ͸ը૾ͷϓϨϏϡʔը໘Ͱॖখɾ֦େͷ୺·Ͱ౸ୡͨ͠ͱ͖ ʹ UIImpactFeedbackGenerator ͷ .light ΛൃՐ͍ͤͯ͞Δ • ඪ४ͷϝʔϧΞϓϦͰ͸ड৴ϘοΫεͰηϧΛࠨʹҾͬுͬͨ࣌ʹ̏ͭͷબ ୒ࢶ͕ݱΕɺͦͷ··ࠨʹҾͬுΓ੾ͬͯ୺·Ͱ౸ୡͨ͠ͱ͖ʹ UIImpactFeedbackGenerator ͷ .medium ΛൃՐ͍ͤͯ͞Δ ex.ʣඪ४ͷϝʔϧΞϓϦ

Slide 49

Slide 49 text

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ͱ ಉ࣌ʹԻ͕ඞཁͰ͋Ε͹ɺ֤ࣗͰԻ੠ಉظॲཧΛ࣮૷͢Δඞ ཁ͕͋Γ·͢ɻ

Slide 50

Slide 50 text

Success With Sound Effect ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δͱಉ࣌ʹߪೖ׬ྃͷԻΛ໐Β͢͜ͱͰɺ՝͕ۚ ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ ԻΛར༻͢Δ͜ͱͰɺϢʔβʔʹରͯ͠ૢ࡞ΠϝʔδΛ࣋ͨͤ΍͘͢ͳΔ

Slide 51

Slide 51 text

Success With Sound Effect ex.ʣIn App Purchase • ΞϓϦ಺՝ۚͷTouch IDೝূ੒ޭ࣌ʹUINotificationFeedbackGenerator ͷ .success ΛൃՐͤ͞Δͱಉ࣌ʹߪೖ׬ྃͷԻΛ໐Β͢͜ͱͰɺ՝͕ۚ ੒ޭͨ͜͠ͱΛ఻͍͑ͯΔ • Ի΋ར༻͢Δ͜ͱͰɺϢʔβʔʹରͯ͠ૢ࡞ΠϝʔδΛ࣋ͨͤ΍͘͢ͳΔ ߪೖ׬ྃͷԻʹؔ͢ΔTwitterͷ൓Ԡ

Slide 52

Slide 52 text

Agenda • What’s Taptic Engine • How To Use • When should I use Taptic Engine? • Summary

Slide 53

Slide 53 text

Summary • Taptic Engine͸Haptic FeedbackΛ࣮ݱ͢ΔͨΊʹ౥ࡌ͞ Ε͍ͯΔ • iOS10Ҏ্Ͱ͋Ε͹ɺUIFeedbackGeneratorΛ࢖༻͢Δ͜ ͱͰHaptic FeedbackΛ࣮૷Ͱ͖Δ • ϑΟʔυόοΫ͸࢖͏΂͖Օॴ͚ͩʹ࢖༻͠ɺଟ༻͗ͯ͢͠ ҙຯ͕ബΕͳ͍Α͏ʹ஫ҙ͢Δ • ΄ͲΑ͍FeedbackͰɺϫϯϥϯΫ্ͷϢʔβʔମݧΛ

Slide 54

Slide 54 text

• cokaholic/TapticSampler
 https://github.com/cokaholic/TapticSampler

Slide 55

Slide 55 text

Thank you for listeningʂ

Slide 56

Slide 56 text

ࢀߟϦϯΫ • 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