HammerGestureConfigの
浅掘り /ionic-meetup-10

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

Ebd60ccc96d5c538398b4c9121c64317?s=128

Sayaka Nakatsuka

February 23, 2019
Tweet

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

  8. None
  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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ