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
動画再生速度を変更する コンポーネントを作ろう として諦めた話 ՌϦϯ@FruitRiin גࣜձࣾελσΟετ 2020/08/25 Vue.js v-tokyo ΦϯϥΠϯ Meetup #11
Slide 2
Slide 2 text
͓ͭ·Έ Έ͍ͨͳͳͷͰؾָʹ…
Slide 3
Slide 3 text
自己紹介 • ՌϦϯ@FruitRiin • Twitter, Github, Qiita, SpeakerDeck • גࣜձࣾελσΟετ • Vue+RailsͰTeachme Biz͍ͬͯ͏αʔϏε • Vue͍͍ͧʂ
Slide 4
Slide 4 text
雑誌に特集が載りました!
Slide 5
Slide 5 text
ʮݱײͷ͋Δ͕ฉ͖͍ͨͰ͢ʯ ʮݱײͷ͋Δɾɾɾͦ͏Ͱ͢Ͷ͐ʯ
Slide 6
Slide 6 text
ϏδϡΞϥΠζखॱॻͷ࡞ɾڞ༗ɾཧͷTeachme Biz
Slide 7
Slide 7 text
動画再生速度を変更する コンポーネントを作ろう として諦めた話
Slide 8
Slide 8 text
仕様 • ಈըϓϨΠϠʔ্Ͱ࠶ੜΛઃఆͰ͖Δɻ • σβΠϯ༻ҙ͔ͨ͠Βʂ
Slide 9
Slide 9 text
デザイン
Slide 10
Slide 10 text
ͳΔ΄Ͳʁ
Slide 11
Slide 11 text
動画にコントロールを重ねる • Λposition:relativeͳ
ͰғΉ • position:absoluteͳ
ʹίϯτϩʔϧΛॏͶΔ
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
再生速度を変更する • ͷ playback-rateଐੑΛมߋ͢Δ
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Ͱ͖·ͨ͠ʂ
Slide 16
Slide 16 text
ΊͰͨ͠ΊͰͨ͠
Slide 17
Slide 17 text
ड͚ೖΕ݅ ɾඪ४ίϯτϩʔϧͱදࣔΛ͋ΘͤΔ
Slide 18
Slide 18 text
Μͬʁʂ
Slide 19
Slide 19 text
標準コントロール(だいたい) • ϚεΛಈ͔͢ͱݱΕΔ • ϚεΛࢭΊͯ2ඵ͘Β͍͢Δͱফ͑Δ • ը໘֎ʹϑΥʔΧεΞτ͢Δͱফ͑Δ • ࠶ੜ͕ࢭ·ΔͱݱΕΔ • ϒϥβʹΑͬͯৄࡉҟͳΔ
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
標準コントロール(スマホ • λονͨ͠ΒݱΕΔ • ͏Ұλον͢Δͱফ͑Δ • ࣌ؒܦաͰফ͑Δ • ͳΜ͔PCͷϒϥβͱ࣌ؒҧ͏ͬΆ͍
Slide 22
Slide 22 text
ʔແཧʂ
Slide 23
Slide 23 text
ΊΑ͏ʂ
Slide 24
Slide 24 text
検討したこと • ࠶ੜมߋίϯϙʔωϯτ͚ͩՃ • ↑දࣔͷλΠϛϯάΛ͋ΘͤΔͷ͕ແཧήʔ • ಈըϓϨΠϠʔͷίϯτϩʔϥʔΛϑϧεΫϥον • ↑ͦ͜·Ͱίετ͔͚ͨ͘ͳ͍ • ϥΠϒϥϦʹཔΔ • ↑ίεύྑͦ͞͏
Slide 25
Slide 25 text
Plyr
Slide 26
Slide 26 text
再生速度も変更できる!
Slide 27
Slide 27 text
ʮͲ͔ͬ͢ʁʯ ʮ͑͑ΜͪΌ͏ʁʯ
Slide 28
Slide 28 text
ελΠϧ่͕ΕΔͳͲ ࡉ͔͍मਖ਼Λͯ͠…
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
ΊͰͨ͠ΊͰͨ͠…
Slide 31
Slide 31 text
Ͱͳ͍Μͩͳ
Slide 32
Slide 32 text
εϥΠυγϣʔػೳ
Slide 33
Slide 33 text
͋ʔʂ ϖʔδΊ͘Γʹ ΠϕϯτऔΒΕΔ
Slide 34
Slide 34 text
兄弟要素なのでz-indexできなかった
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
ϝχϡʔ։͍ͨΒফ͢…ʁ
Slide 37
Slide 37 text
ͰϝχϡʔPlyr͕ੜͨ͠ੜDOM…
Slide 38
Slide 38 text
Observerతͳ…ʁ
Slide 39
Slide 39 text
MutationObserver • MutationObserver ͱɺࢦఆͨ͠ίʔϧόοΫؔΛ DOM ͷมߋ࣌ʹ࣮ߦͤ͞Δ API Ͱ͢ɻ ͜ͷ API ɺDOM3 Events ͷ༷Ͱఆٛ͞Ε͍ͯͨ Mutation Events Λ৽͘͠ઃܭͨ͠͠ͷͰ͢ɻ ʔMDN Web Docs
Slide 40
Slide 40 text
MutationObserver
Slide 41
Slide 41 text
ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ
Slide 42
Slide 42 text
ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ
Slide 43
Slide 43 text
MutationObserverΛnew ͯ͠observe()
Slide 44
Slide 44 text
ΠϕϯτΛ$emit
Slide 45
Slide 45 text
ΠΠײ͡ʂ ϖʔδૹΓϘλϯ ফ͑ͯΔ
Slide 46
Slide 46 text
*MutationObserverいいぞではない • VueͰཧ͞Εͯͳ͍ੜDOM͕ͦ͜ʹ͋Δ͔Β • VueͷίʔυͳΒదʹঢ়ଶཧ͢Ε͍͍͚ͩ • watchͱ͔͑ΔͶ
Slide 47
Slide 47 text
ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ
Slide 48
Slide 48 text
ͬͨͥʂʢϦϦʔεʣ
Slide 49
Slide 49 text
まとめっぽいもの • ຊʹղܾ͍ͨ͠ͷཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબͳ͚ΕͳΜͱͳΔ • ͜ͱ͋Δ
Slide 50
Slide 50 text
ΊͰͨ͠ΊͰͨ͠