Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVGアニメーションをやってみたら結構いい感じにできた話
Search
inureo
April 23, 2015
Programming
1
150
SVGアニメーションをやってみたら結構いい感じにできた話
inureo
April 23, 2015
Tweet
Share
More Decks by inureo
See All by inureo
IGNITION: What we did to provide a high-quality experience
inureo
0
96
リアルタイム回答集計システムを作って、実際にイベントで使った話
inureo
1
830
はじめてのexpress+socket.io
inureo
1
4.1k
Other Decks in Programming
See All in Programming
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.5k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
役立つログに取り組もう
irof
28
9.6k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Arm移行タイムアタック
qnighy
0
310
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
cmp.Or に感動した
otakakot
1
120
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Typedesign – Prime Four
hannesfritz
40
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Adopting Sorbet at Scale
ufuk
73
9.1k
Writing Fast Ruby
sferik
627
61k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Transcript
SVGΞχϝʔγϣϯΛͬͯΈͨΒ ݁ߏ͍͍ײ͡ʹͰ͖ͨ גࣜձࣾnanapi ख௩ ྄ @inureo
ࣗݾհ ख௩ ྄ @inureo גࣜձࣾnanapi ΤϯδχΞ - άϥϑΟοΫσβΠϯͷઐֶߍΛଔۀ - Web੍࡞ձࣾ
5 - 201310݄ nanapiʹΤϯδχΞͱͯ͠ೖࣾ དྷྺ ※ ݩʑσβΠφʔͳͷͰϑϩϯτपΓ͕ಘҙ ϝΠϯͷۀͰRailsʴTypeScript+Markup ɹCapybara+PoltergeistͰE2Eςετ͕͖ʹͳΔ
ࠓ͍͑ͨ͜ͱ 47(Ξχϝʔγϣϯ ݁ߏΑ͘ͳ͍ʁ
ࠓ͍͑ͨ͜ͱ ࠓճ47(Λಈతʹ ಈ͔ͯ͠Έ͓ͨΛ͠·͢ʂ
1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺͯΈΔ 4. ·ͱΊ ࠓͷΞδΣϯμ
1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺͯΈΔ 4. ·ͱΊ ࠓͷΞδΣϯμ
SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ ԿΛ࡞ͬͯΔͷ͔
SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ InTHEnetͷΦʔϓχϯάΞχϝʔγϣϯ InTHEnetͱ ౦ژϝτϩΦʔϓϯσʔλίϯςετʹԠืͨ͠ʮϝτ ϨϙʯɺYahoo!ϓϩτλΠϓίϯςετ’14 Ͱ४άϥ ϯϓϦɾUIΛ֫ಘͨ͠ʮϋϛΨίʯΛ࡞ͬͨνʔϜ
SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ InTHEnetͷΦʔϓχϯάΞχϝʔγϣϯ InTHEnetͱ ౦ژϝτϩΦʔϓϯσʔλίϯςετʹԠืͨ͠ʮϝτ ϨϙʯɺYahoo!ϓϩτλΠϓίϯςετ’14 Ͱ४άϥ ϯϓϦɾUIΛ֫ಘͨ͠ʮϋϛΨίʯΛ࡞ͬͨνʔϜ σϞ
SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ *MMVTUSBUPSͷϊϦ͕௨͡Δ ɹɹɹɹɹ⾪ ɹɹTWHKTͱ͍͏ศརͳϥΠϒϥϦ ɹɹɹɹɹ⾫ ࠲ඪυϦϒϯΘ͔Γ͍͢ ɹɹɹ⾪ ɹɹԿΑΓ͍ܰ ɹɹɹ⾫ ʊਓਓਓਓਓਓʊ
ʼɹఱ࠽͔Αɹʻ ʉ?:?:?:?:?ʉ
1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺͯΈΔ 4. ·ͱΊ ࠓͷΞδΣϯμ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ྑ͍ͱݴͬͯ Կ͕͍͍ͷ͔ʁ ͭ͋ΔΑʂ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 47(+4͕ศརʂ 47(+4ͱ͍͏ϥΠϒϥϦ͕͋ͬͯɺͦΕΛ͏ͱ DBOWBTฒʹ؆୯ʹ47(Λѻ͏͜ͱ͕Ͱ͖Δʂ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
ࡾ֯Ͱ͖ͪΌ͏ʜ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU ࢛֯Ͱ͖ͪΌ͏ʜQYQYͷʜ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU ࢛֯Ͱ͖ͪΌ͏ʜQYQYͷʜ TWHSFDU Y Z pMM b⒎⒎⒎` TUZMF bPQBDJUZ`
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ TWH47( TFMFDUPS TJ[F b ඳը͢Δ47(Λઃఆ͢ΔͰʔ TWHQPMZHPO
ࡾ֯Ͱ͖ͪΌ͏ʜ TWHSFDU ࢛֯Ͱ͖ͪΌ͏ʜQYQYͷʜ TWHSFDU Y Z pMM b⒎⒎⒎` TUZMF bPQBDJUZ` QYਖ਼ํܗ͔ͭ࠲ඪ͕ Ͱಁ໌ͳ࢛͕֯Ͱ͖Δ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ͪΖΜఆٛϑΝΠϧ͋ΔͷͰ 5ZQFTDSJQU͔͚ΔΑ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ΠϥϨͷਤܗΛͦͷ··͑Δʂ *MMVTUSBUPSͰਤܗΛ࡞ͬͯ47(Ͱอଘ͢Εɺ ෳࡶͳਤܗ1PMZHPOܗࣜʹͳΔͷͰ͍͍͢ʂ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ΠϥϨͷਤܗΛͦͷ··͑Δʂ *MMVTUSBUPSͰਤܗΛ࡞ͬͯ47(Ͱอଘ͢Εɺ ෳࡶͳਤܗ1PMZHPOܗࣜʹͳΔͷͰ͍͍͢ʂ ͨͩ͠ɺɺ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ಈతʹ࡞Δ߹ ࠲ඪΛྻͰ࣋ͭͷͰਏ͍
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ॻ͖ग़࣌͠ҙ 47(ॻ͖ग़࣌͠ʹ࠲ඪͷ খͷܻΛ૿ͯ͠ ͓͔ͳ͍ͱ൵͘͠ͳΔ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ খΛ૿͞ͳ͍ͱ͜͏ͳΔΑ σϞ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ খΛ૿͢ͱ͜͏ͳΔΑ σϞ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ૿ͯ͠ղܾ͠ͳ͍͜ͱ͋Δ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ͦ͏͍͏࣌*MMVTUSBUPSΈ͍ͨʹ ઢΛ͚ͭͯղܾ͢Δͱૣ͍ʜ TUZMF TUSPLF ⒎⒎⒎ TUZMF TUSPLFXJEUI
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ Ξχϝʔγϣϯ؆୯ʂ TWH@FMFNFOU BOJNBUF EVSBUJPO FBTJOH EFMBZ NPWF Y
Z ͜Ε͚ͩͰ͵Δ͵Δͬͱಈ͍ͪΌ͏ʜ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ Ξχϝʔγϣϯ؆୯ʂ TWH@FMFNFOU BOJNBUF EVSBUJPO FBTJOH EFMBZ NPWF Y
Z ͜Ε͚ͩͰ͵Δ͵Δͬͱಈ͍ͪΌ͏ʜ ͔͠ɺɺ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ ϨεϙϯγϒʹͰ͖ͪΌ͏ʂ *MMVTUSBUPSͷάϧʔϓԽͷΑ͏ʹɺ ΞχϝʔγϣϯΛHͰғͬͯάϧʔϓԽ͢Εɺ άϧʔϓશମΛTDBMFϝιουͰ֦େͰ͖ΔͷͰɺ DBOWBTͱҧͬͯɺࡉ͔͍ௐΛ͠ͳ͍͍ͯ͘ʂ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 1. SVG.JS͕ศརʂ 2. ΠϥϨͷਤܗͦͷ··͑Δʂ 3. Ξχϝʔγϣϯ͕؆୯ʂ ·ͱΊ
SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 1. SVG.JS͕ศརʂ 2. ΠϥϨͷਤܗͦͷ··͑Δʂ 3. Ξχϝʔγϣϯ͕؆୯ʂ ·ͱΊ ͱ͍͑ࠓճ*O5)&OFUͷϩΰͱ 47(Ξχϝʔγϣϯͷ૬ੑ͕
Α͔ͬͨײ͕ڧ͍ͷͰࢀߟ·Ͱʹʂ
1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺͯΈΔ 4. ·ͱΊ ࠓͷΞδΣϯμ
canvasͱൺͯΈΔ
canvasͱൺͯΈΔ DBOWBTॻ͍ͨ͜ͱ ͳ͔ͬͨʜ
canvasͱൺͯΈΔ ͰൺͯΈΔ w ϙΠϯτΛࢦఆͯ͠ΦϒδΣΫτ͕ඳըͰ͖Δ w $44Ͱมߋ͕Մೳ w ͭͷ1PMZHPOɺ3FDUɺ1BUI͕%0.ཁૉ w ֦େ͕؆୯ʢஔҐஔཁ੍ޚʣ
ϝϦοτ w ΦϒδΣΫτ͕ͭͣͭ%0.ʹͳΔͷͰɺΦϒ δΣΫτ͕૿͑Δͱॏͦ͏ σϝϦοτ
1. SVGΞχϝʔγϣϯ࡞ͬͯΔͳ͏ 2. SVGΞχϝʔγϣϯΛ࡞ΔϙΠϯτ 3. canvasͱൺͯΈΔ 4. ·ͱΊ ࠓͷΞδΣϯμ
·ͱΊ IllustratorϊϦͰͰ͖ΔͷͰ ෑډָ͕͍͍͠͠Αʙʂ օͰSVGΞχϝʔγϣϯ͠Α͏ʂ Sin! Cos! Tan!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠