HammerGestureConfigの 浅掘り /ionic-meetup-10

Ionic Meetup #10 Osaka (2019/02/23) での発表資料です。
https://ionic-jp.connpass.com/event/112592/

サンプルソースコードは下記です。
https://github.com/sayanaka/angular-with-hammer

Transcript

1. HammerGestureConfigͷ
 ઙ۷Γ Ionic Meetup #10 Osaka
 @sayanaka
2. sayanaka • JavaScriptྺ 3೥ɺAngularྺ 2೥ • ng-kyoto୅ද
 https://ng-kyoto.angular.jp/ • Twitter 
 @zilch8
3. ಋೖ • Ionic 4ͰGestureΛ࣮૷͢Δํ๏ʢAngularʣ
4. hammerJS • http://hammerjs.github.io/ • δΣενϟʔΠϕϯτʢswipe, tapͳͲʣΛ࢖ ͍΍͍͢ܗͰੜ΍ͯ͘͠ΕΔ
5. HammerGestureConfig • @angular/platform-browser • https://angular.jp/api/platform-browser/ HammerGestureConfig • hammerJSΛAngularͰ
 ศརʹऔΓѻ͑ΔΑ͏ʹͳΔ
6. HammerGestureConfig • angular/materialͰ࢖༻͢ΔͨΊʹ௥Ճ͞Εͨʁ
 (slider, slider-toggle, tooltip)
7. ࢖͑ΔΠϕϯτҰཡ • ॳظ஋
 https://github.com/angular/angular/blob/ f0989b786b3bfa15e7de43ff1c2645a318209 ea6/packages/platform-browser/src/dom/ events/hammer_gestures.ts#L18
9. ಠࣗΠϕϯτͷ௥Ճ
10. ಠࣗΠϕϯτͷ௥Ճʢαϯϓϧʣ • ιʔείʔυ
 https://github.com/sayanaka/angular-with- hammer
11. ಠࣗΠϕϯτͷ௥Ճ 1. “twosecondspress”Πϕϯτͷఆٛ
 “press”͕2ඵൃੜͨ͠Β“twosecondspress”
12. ಠࣗΠϕϯτͷ௥Ճ 1. “twosecondspress”Πϕϯτͷఆٛ
 “twosecondspress”͸ɺ”press”ͱಉ࣌ʹൃੜ͢Δ
13. ಠࣗΠϕϯτͷ௥Ճ 1. “twosecondspress”Πϕϯτͷఆٛ
 “twosecondspress”͕ൃੜͨ͠Βɺ”press”͸ͳ͔ͬͨ͜ͱ ʹ
14. ಠࣗΠϕϯτͷ௥Ճ 3. htmlͰ࢖͑ΔΑ͏ʹ͢Δ
 eventsϓϩύςΟʹɺΠϕϯτ໊Λ௥Ճ
15. ͪͳΈʹ • “doubletap”͸ɺhammerJS͕͢Ͱʹఆٛͯ͠ ͘Ε͍ͯΔͷͰeventsʹ௥Ճ͢Δ͚ͩͰOK
16. ͪͳΈʹ • Ͳ͏ͯ͠doubletap͚ͩɾɾɾʁ • https://github.com/hammerjs/hammer.js/ blob/master/hammer.js#L2952
17. ·ͱΊ • AngularΛ࢖͏৔߹ɺ
 HammerGestureConfigΛ࢖͏ͱɺ
 ಠࣗͷδΣενϟʔΠϕϯτΛ
 ΋͞΋͞ੜ΍ͤΔ • hammerJSͷ஌͕ࣝগ͚ͩ͠ඞཁ
18. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ