HammerGestureConfigの 浅掘り /ionic-meetup-10

by Sayaka Nakatsuka

Slide 1

Slide 1 text

HammerGestureConﬁgͷ  ઙ۷Γ 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

HammerGestureConﬁg • @angular/platform-browser • https://angular.jp/api/platform-browser/ HammerGestureConﬁg • hammerJSΛAngularͰ  ศརʹऔΓѻ͑ΔΑ͏ʹͳΔ

Slide 6

Slide 6 text

HammerGestureConﬁg • 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Λ࢖͏৔߹ɺ  HammerGestureConﬁgΛ࢖͏ͱɺ  ಠࣗͷδΣενϟʔΠϕϯτΛ  ΋͞΋͞ੜ΍ͤΔ • hammerJSͷ஌͕ࣝগ͚ͩ͠ඞཁ

Slide 18

Slide 18 text

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ