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