ふつうの技術スタックでアート作品を作ってみる

by Akira Yagi

Slide 1

Slide 1 text

;ͭ͏ͷٕज़ελοΫͰΞʔτ࡞඼Λ࡞ͬͯΈΔ

Slide 2

Slide 2 text

ീ໦ ষ Akira Yagi ɹ( akira888) Rubyք۾ʹࢀೖ͠ૣ3೥  ޷͖ͳϝιου͸Data.define  ٳ೔͸ΧϑΣ८ΓΛͨ͠Γࣾ௕ͱ͔ΔͨΛऔͬͨΓ Hotwire υΩϡϝϯτʢ༗ࢤ຋༁൛ʣΛӡӦ Creative Coding ͪΌΜͱॻ͚ΔΑ͏ʹͳΓ͍ͨ ࣗݾ঺հ

Slide 3

Slide 3 text

ࠓճͷΞϓϦΛ࡞ͬͨ ͖͔͚ͬ

Slide 4

Slide 4 text

3೥΄ͲલʹࠨهͷJSͰͰ͖ͨͷ࡞඼Λݟͯɺڻዼ ίʔυͷϝΠϯ෦෼͸Կ΍ͬͯΔͷ͔શવΘ͔Βͳ ͍͕ɺͳΜ͔͕ͩ֗ੜΈग़͞Ε͍ͯΔʂ ͜͏͍͏ͷ͕޷͖ͳΒProcessing͓޷͖ͩͱࢥ͍· ͢Αɺͱ౰࣌ಉ྅ͩͬͨ@chobishiba͞ΜʹΦεεϝ ͞ΕΔ Creative Codingͱ͍͏֓೦Λೝࣝ͢Δ https://x.com/KilledByAPixel/status/1517294627996545024 Processingͱͷग़ձ͍

Slide 5

Slide 5 text

Creative Codingָ͍͠ canvas্ͷͲ͜ʹԿΛυϩʔΠϯά͍͔ͯ͘͠ɺͱ͍͏͜ͱΛ ϓϩάϥϛϯά͍ͯ͘͠ ܭࢉͷ૊Έ߹ΘͤͰۮൃతʹૉ੖Β͍͠࡞඼͕ੜ·ΕΔ໘ന͞

Slide 6

Slide 6 text

͍ͭ΋ͷWEBαΠτߏங͢Δײ͡Ͱ ࣅͨΑ͏ͳ͜ͱ΍Εͳ͍͔ͳ🤔 HTMLཁૉͱCSSͰಈ͖ͷ͋ΔΞʔτ࡞඼Έ͍ͨͳ΋ͷΛ࡞Δ ηϚϯςΟοΫతʹ͸Ͳ͏͔ͱࢥ͍·͕͢ ;ͩΜͷࢥߟճ࿏ͰઃܭɾߏஙͰ͖Δͱ໘നͦ͏

Slide 7

Slide 7 text

Humans since 1982 ͱ͍͏ํͨͪͷϓϩμΫτ Ξφϩά࣌ܭ͕ͨ͘͞Μू·ͬͯɺ࣌ؒͷܦա ͱͱ΋ʹنଇతͳ໛༷Λ܁Γฦ͠ඳ͍͍ͯ͘ ؾͮ͘ͱ͠͹Β͘ͷؒɺͣͬͱோΊ͍ͯͨ ͋Δ೔ɺ;ͱݟ͔͚ͨ࡞඼ https://www.humanssince1982.com/en-int/products/a-million-times-72-white-sterling

Slide 8

Slide 8 text

͜ΕΛΦϚʔδϡͨ͠࡞඼Λ࡞ͬͯΈ͍ͨ γϯϓϧͳਤܗͱύλʔϯԽ͞Εͨಈ͖ͰදݱͰ͖Δ ͍ͭ΋ͷWebΞϓϦ͔Βগ͠಄Λ೧Ε͹Ͱ͖ΔͷͰ͸ͳ͍͔ →ͪΐ͏Ͳࣾ಺ͷ։ൃίϯςετ͕͋Δ͔ΒτϥΠͯ͠ΈΑ͏☺

Slide 9

Slide 9 text

1st try

Slide 10

Slide 10 text

ٕज़ΩϟονΞοϓ͕ओ໨తͰ ͷબఆ ͳΜͱ͔૝ఆ௨Γͷ࣮૷͕Ͱ͖ ͯɺ࡞඼΋໘ന͕ͬͯ΋Β͑ͨ ·͔͞ͷೖ৆ʂ ࣾ಺ίϯςετ Ͱ͸ɺVue.jsͰ ͭͬͨ͘

Slide 11

Slide 11 text

ͦͷޙɺࣾ֎ͷํʹ ࡞඼Λݟͯ΋Β͑Δ ػձ͕͋ͬͨ ϙδςΟϒͳ൓ԠΛ͍͚ͨͩͨ •ʮRubyͰॻ͍ͨΒൃදͰ͖ΔΑʂʯ •ʮؔ੢RubyձٞʹCFPग़ͯ͠Έͨ Βʂʯ ͱɺ͙ͬͱഎதΛԡ͍͖ͯͨͩ͠·͠ ͨ ͦͯ͠·͔͞ͷ࠾୒ʂ🎉

Slide 12

Slide 12 text

2nd try ʢࠓճʣ

Slide 13

Slide 13 text

Ҏ߱͸͢΂ͯRubyͱ Railsͷ͓࿩Ͱ͢

Slide 14

Slide 14 text

RubyͰಈ͔ͤΔΑ͏ʹ͢ΔʂͲ͏͢ΔɺͲ͏΍Δ ೃછͷ͋Δ;ͭ͏ͷWebΞϓϦߏ੒Ͱম͖௚͢ લճ͸JS͚ͩͰ࡞ͬͨͷͰࠓճ͸JSΛগͳ͍ͨ͘͠ HotwireΛ࢖ͬͯΈͯ͸Ͳ͏͔ʁ

Slide 15

Slide 15 text

ϩδοΫ͸ͳΔ΂͘Railsʹد͍ͤͨʢHotwireޫͷಓʣ ࿈ଓͨ͠ಈ͖ͷ࡞඼ͳͷͰɺ௨৴͕ଟগ஗Ԇͯ͠΋ಈ͖ʹӨ ڹ͕ग़ͳ͍Α͏ʹ͍ͨ͠ Rails & HotwireͰ࡞Δͱ͖ͷߟྀ఺

Slide 16

Slide 16 text

ߟྀ఺ΛՃຯͯ͠ Rails & HotwireͰ ࡞ͬͯΈ·ͨ͠

Slide 17

Slide 17 text

DEMO

Slide 18

Slide 18 text

͍͍ͭͭோΊͯ͠·͏… ࣌ؒΛ༹͔࣌͢ܭ😇

Slide 19

Slide 19 text

Ͱ΋೉͍͜͠ͱ͸ ͍ͯ͠·ͤΜ

Slide 20

Slide 20 text

ͬ͘͟Γ Ξϓϩʔνղઆ

Slide 21

Slide 21 text

Ξφϩά࣌ܭ͕ͨ͘͞ΜฒΜͰ͍Δ ࣌ؒܦաͱͱ΋ʹ༷ʑͳ਑ͷಈ͖ΛݟͤΔ ࣍ʹ঺հ͢Δ̎ύλʔϯΛ܁Γฦ͢ ΞϓϦͷಈ࡞֓ཁ

Slide 22

Slide 22 text

͢΂ͯͷ࣌ܭΛ࢖ͬͯ਺छྨͷύλʔϯΛඳը͍ͯ͘͠ 30ඵʹͳΔͱ͖ʹ໛༷͕׬੒͢Δ ຖ෼00~30ඵͷؒ

Slide 23

Slide 23 text

60ඵʹͳͬͨͱ͖ͷ࣌ࠁʢ1෼ޙʣΛදࣔͰ͖ΔΑ͏ʹඳը͠ ͍ͯ͘ 60ඵʹͳΔͱ͖ʹͦͷͱ͖ͷ࣌ࠁ͕දࣔ͞ΕΔ σδλϧ࣌ܭͷ໾ׂΛ࣋ͭ࣌ܭͱͦΕҎ֎Ͱಈ͖͕ҟͳΔ ຖ෼30~60ඵͷؒ

Slide 24

Slide 24 text

࣮ݱͷͨΊʹඞཁͳ͜ͱ

Slide 25

Slide 25 text

࣌ܭͷ਑Λࣗ༝ʹૢ࡞Ͱ͖Δ ࣌ܭΛϧʔϧʹԊͬͯฒ΂Δ ਑ͷಈ͖͸࣌ܭʹΑͬͯҟͳΔ ͣͬͱಈ͔͠ଓ͚Δ େ͖̐ͭ͘ʹΘ͚ͯߟ͑·ͨ͠

Slide 26

Slide 26 text

ͻͱͭͣͭݟ͍͖ͯ·͢

Slide 27

Slide 27 text

;ͭ͏ͷ࣌ܭͰ͸͋Γ͑ͳ͍਑ͷ֯౓Λࢦͤͳ͍ͱ͍͚ͳ͍ ʮݟͨ໨͕࣌ܭͬΆ͍ɺ࣌ܭͷΑ͏ͳৼΔ෣͍Λ͢Δύʔ πʯΛ࡞Δ ࣌ܭͷ਑Λࣗ༝ʹૢ࡞Ͱ͖Δ

Slide 28

Slide 28 text

࣌ܭModelΛ࡞ΓɺModel಺Ͱ௕਑ͱ୹਑ͷ֯౓ΛͦΕͧΕࢉ ग़Ͱ͖Δͱྑͦ͞͏ ࣮૷Ͱߟ͑Δͱ

Slide 29

Slide 29 text

ΞϓϦͷجૅͱͳΔཁૉ HTMLͱCSSͳͲͰܗ࡞ Δ ݟͨ໨͸ ͜Μͳײ͡Ͱ ࿮ ௕਑ ୹਑

Slide 30

Slide 30 text

࣌ܭͷView ࿮(rim) ௕਑(big-hand) ୹਑(small-hand) ਑͸ͦΕͧΕϞσϧ͔Β֯ ౓Λड͚औΓɺstyleΛద༻ ͠·͢

Slide 31

Slide 31 text

͔࣌ؒΒ֯౓ ΛׂΓग़ͤΔ Α͏ʹ͢Δ ͜Ε͸Ξφϩά࣌ܭͱ͠ ͯৼΔ෣͏ͨΊͷmodule ඵ୯Ґͷ֯౓ΛٻΊΔ →͜ΕͰύʔπ४උOK

Slide 32

Slide 32 text

࣌ܭͷϙδγϣϯʹΑͬͯ͸਺ࣈΛද͢ύʔπʹͳΔͨΊɺ ഑ஔΛ͋Δఔ౓ܾΊΔඞཁ͕͋Δ ࣌ܭΛϧʔϧʹԊͬͯฒ΂Δ

Slide 33

Slide 33 text

੺࿮ͷ࣌ܭͨͪΛ15ݸ1η οτɻ1ηοτ͝ͱʹσδλ ϧ਺ࣈΛද͢࢓ࣄΛ࣋ͭ ഑ஔͱදݱ͢Δ਺ࣈʹΑͬ ͯ਑ͷ֯౓͕ܾ·Δ ࣌ܭͷҐஔͰ ੑ࣭Λ෼͚Δ

Slide 34

Slide 34 text

σδλϧ਺ࣈ༻ͷ࣌ܭΛਖ਼͠ ͘഑ஔ͢Δඞཁ͕͋ΔͨΊɺ ϚοϓΛੜ੒͢Δ 15ݸ1૊ͳͷͰɺͦΕͧΕͷ ഑ஔ͸16ਐ਺Λ౰ͯͯ൑ผͰ ͖ΔΑ͏ʹ͓ͯ͘͠ ઌఔͷ഑ஔΛ Ϛοϐϯά͢Δ xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xx012x012x012x012xx xx345x345x345x345xx xx678x678x678x678xx xx9abx9abx9abx9abxx xxcdexcdexcdexcdexx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

Slide 35

Slide 35 text

྘ͷ෦෼͸ϚʔδϯʹͳΔ ϚʔδϯΛআ֎͢Δͱ֤਺ࣈͷ ؒ͸1Ϛεຖʹొ৔͢Δ ্هͷੑ࣭͔ΒHH:MMͷ͏ͪ Ͳͷ਺ࣈͷ୲౰άϧʔϓ͔͕Θ ͔Δ Ϛοϓ͔Β දࣔ͢Δ਺ࣈΛ ׂΓग़͢ xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xx012x012x012x012xx xx345x345x345x345xx xx678x678x678x678xx xx9abx9abx9abx9abxx xxcdexcdexcdexcdexx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx ̌ ̏ ̎ ̍ H H M M

Slide 36

Slide 36 text

਺ࣈΛද͢ϙδγϣϯͱͦΕҎ֎Ͱ࣌ࠁදࣔͷ࢓ํ͕ҧ͏ ҰํͰ00~30ඵͷύλʔϯΛඳը͢Δͱ͖͸օಉ͡ʹͳΔ →ͦΕͧΕͷ࣌ܭͰ਑ͷ֯౓ΛܭࢉͰ͖Δͱ·ͱ·Γͦ͏ ਑ͷಈ͖͸࣌ܭʹΑͬͯҟͳΔ

Slide 37

Slide 37 text

࣌ܭϞσϧ͕ܭࢉ͢ΔछྨͱλΠϛϯά Ξφϩά࣌ܭ σδλϧ࣌ܭ ΞΫηε͞Εͨͱ͖ͷඵ Ξφϩά࣌ܭ ਺ࣈ୲౰ 00ඵ ࣌ࠁදࣔͷ֯౓ʢ׬੒ʣ ࣌ࠁදࣔͷ֯౓ʢ׬੒ʣ ~29ඵ ໛༷ͷ֯౓(్த) ໛༷ͷ֯౓(్த) 30ඵ ໛༷ͷ֯౓(׬੒ʣ ໛༷ͷ֯౓(׬੒ʣ ~59ඵ ࣌ࠁදࣔͷ֯౓(్த) ࣌ࠁදࣔͷ֯౓

Slide 38

Slide 38 text

ॏෳ͢ΔॲཧΛmoduleԽ ͢Ε͹ྑͦ͞͏ ܭࢉʹඞཁͳ৘ใΛड͚ औΔඞཁ͕͋Γͦ͏ ࣮૷Ͱߟ͑Δͱ

Slide 39

Slide 39 text

ࠓ·Ͱͷߟ͑Ͱ ඳըͯ͠ΈΔ

Slide 40

Slide 40 text

࣌ܭΛ࡞ΔϞ σϧΛ༻ҙͯ͠ ࣌ࠁ΍ύλʔϯ ৘ใΛ౉͢

Slide 41

Slide 41 text

Ϛοϓʹैͬͯ ࣌ܭϞσϧΛશ ͯ࣋ͬͨ഑ྻΛ ࡞Δ matrixʹ͸ઌఔͷϚοϓͷจ ࣈ͕̎࣍ݩ഑ྻͰೖͬͯ·͢ digital_parts_groupϝιου ͸ HH:MM ͷ4ͭͷ਺ࣈͷ͏ ͪɺͦͷ࣌ܭ͕୲౰͢΂͖਺ ࣈΛrow, colͷҐஔʹج͍ͮ ͯฦ͠·͢ ୲౰͢Δ਺ࣈ ୲౰ϙδγϣϯ

Slide 42

Slide 42 text

ͦΕΛ controllerͰ ड͚औͬͯ

Slide 43

Slide 43 text

partialʹ౉͠ ͯฒ΂͍͖ͯ ·͢ ͜ͷล͸;ͭ͏ͷWebΞ ϓϦͬΆ͍

Slide 44

Slide 44 text

͜Μͳײ͡🎉

Slide 45

Slide 45 text

ϖʔδΞΫηεޙ΋ ࣌ؒܦաͰ ਑Λಈ͔͍ͯ͘͠

Slide 46

Slide 46 text

͸͡Ί͸1ඵ͓͖͘Β͍ʹturbo framesʹΞΫηεͯ࣌͠ܭ͕ ਐΉ༷ࢠΛ࣮ݱ͠Α͏ͱࢥ͍ͬͯͨ ͱ͜Ζ͕frames͕ฦ͢ͷ͸ʮ৽͍͠ϖʔδʯͳͷͰɺCSSͷ duration͕શવޮ͔ͳ͍͜ͱʹ͖ͮ͘ʢΧΫΧΫͯ͠͠·͏ʣ ࣮ݱ͕ͪΐͬͱ೉͍͠

Slide 47

Slide 47 text

ͦΕͧΕͷ࣌ܭͷ਑ʹ̎ͭͷ৘ใΛ࣋ͨͤͯΈΔ ʮϨϯμϦϯά࣌ͷ਑ͷ֯౓ʯ ʮNඵޙͷ֯౓ʯ JSͰ࣌ܭͷ਑ʹରͯ͠CSSΞχϝʔγϣϯΛઃఆ͢Δ Ͱ͸Ͳ͏͢Δ͔

Slide 48

Slide 48 text

Railsଆ Turbo frame༻λΠϚʔηοτ CSSΞχϝʔγϣϯ։࢝ ɹ30ඵ͔͚ͯ਑ΛҠಈ Turbo frame༻λΠϚʔൃՐ ݱࡏͷ֯౓ͱ 30ඵޙͷ֯౓Λܭࢉ Stimulusଆ ݱࡏͷ֯౓ͱ 30ඵޙͷ֯౓Λܭࢉ CSSΞχϝʔγϣϯ։࢝ ܁Γฦ͠

Slide 49

Slide 49 text

ΞΫηεޙͷදࣔ͸਺ඵɺදࣔΛݻఆͤͯ͞ޡຐԽ͢ ͪΐ͏Ͳ໛༷΍࣌ࠁ͕׬੒ͨ͠ͱ͜Ζʹ߹ΘͤΕ͹ࣗવ… fetchͯ͠΋ଈ࣌ʹϨεϙϯε͞Εͳ͍

Slide 50

Slide 50 text

ͱ͍͏ͷΛશ෦΍ͬͯ ࣮ݱͰ͖·ͨ͠

Slide 51

Slide 51 text

RailsͰ࡞ͬͯΈͨײ૝

Slide 52

Slide 52 text

͍ͭ΋ͷRailsΞϓϦΛ࡞Δײ͡ʹ͍ۙ MVCߏ଄Λ׆͔ͯ͠ߏஙͰ͖Δ Ξχϝʔγϣϯ͸CSSʹཔΔ෦෼͕େ͖͔͕ͬͨɺΠϝʔδ௨Γ ʹ͸࡞Εͨ σʔλͷ४උͱϏϡʔଆͷ޻෉࣍ୈͰ৭ʑͳ͜ͱ͕Ͱ͖ͦ͏

Slide 53

Slide 53 text

େมͩͬͨϙΠϯτ Ruby͕αʔόʔଆʹ͋ΔͷͰɺΞχϝʔγϣϯͱ׬શʹ੾Γ཭ ͢ඞཁ͕͋ͬͨ ΞχϝʔγϣϯͱܭࢉΛγʔϜϨεʹॻ͚ͨΒྑͦ͞͏ ͱ͍͏͜ͱͰ

Slide 54

Slide 54 text

3rd try

Slide 55

Slide 55 text

WASM্Ͱಈ͘΋ͷ΋ ࡞Γ·ͨ͠

Slide 56

Slide 56 text

DEMO

Slide 57

Slide 57 text

Copilot AgentɺClaude Code ͱҰॹʹ։ൃ͠·ͨ͠🤖 ;ͭ͏ͷWebΞϓϦ࡞ͬͯͳ͍͔Βɺ࢓༷͕఻ΘΔ͔ෆ҆ ࠷ॳ͸IssueϕʔεͰ͸ͳ͘ɺIDEӽ͠ʹର໘ʁͰਐΊͯΈͨ WASM൛͸AIΤʔδΣϯτͱ࡞Γ·ͨ͠

Slide 58

Slide 58 text

΍Γ͍ͨ͜ͱΛখ͍͞ػೳʹ෼͚ͯ఻͍͑ͯͬͨͱ͜Ζɺ͢ ͙ʹཧղ࣮ͯ͠૷ͯ͘͠ΕΔ͜ͱ͕ଟ͔ͬͨ Issueϕʔεͷ΍ΓऔΓ΋ࢼͯ͠ΈͨˠෳࡶͰͳ͚Ε͹ͳΜͱ ͔ͳͬͨ ྑ͍ମݧ͕Ͱ͖·ͨ͠ ҙ֎ͱΘ͔ͬͯ΋Β͑Δ

Slide 59

Slide 59 text

࠷ޙʹ

Slide 60

Slide 60 text

ۀ຿ͰΨοπϦ͞ΘΕͳ͍ٕज़Λଘ෼ʹຯΘ͑Δ มΘͬͨςʔϚʹऔΓ૊Ήͱ಄ͷମૢʹͳͬͯΦεεϝͰ͢ RailsΛಋೖ͓͍ͯͯ͠ԿͷϢʔβʔΞΫγϣϯ΋औΕͳ͍Ξ ϓϦΛ࡞ͬͯ΋ྑ͍ΜͰ͢() ݸਓ։ൃָ͍͠ʂ

Slide 61

Slide 61 text

·ͨҧ͏΋ͷΛݟ͚ͭͨΓͻΒΊ͍ͨΒ ͳʹ͔࡞ͬͯΈ͍ͨͱࢥ͍·͢

Slide 62

Slide 62 text

օ͞ΜͷΞϓϦ΋ݟͯΈ͍ͨͷͰ ͥͻͲ͔͜Ͱൃදͯ͠Έ͍ͯͩ͘͞ʂ ݟʹߦ͖·͢ʂʂ

Slide 63

Slide 63 text

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