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

関西Ruby会議08での発表資料です
https://regional.rubykaigi.org/kansai08/

---

一部ページについてご指摘を頂き、記憶違いだったところを思い出したため加筆・訂正しています。
ご指摘ありがとうございます。

4ページ目:
- 街を生み出すコードはProcessingを用いた作品ではなくJSのコードでした
- chobishibaさんもこの作品をProcessingと言ったのではなく、Processingに興味を持つだろうと紹介してくださったのでした

Transcript

1. ;ͭ͏ͷٕज़ελοΫͰΞʔτ࡞඼Λ࡞ͬͯΈΔ
2. ീ໦ ষ Akira Yagi ɹ( akira888) Rubyք۾ʹࢀೖ͠ૣ3೥
 ޷͖ͳϝιου͸Data.define
 ٳ೔͸ΧϑΣ८ΓΛͨ͠Γࣾ௕ͱ͔ΔͨΛऔͬͨΓ Hotwire υΩϡϝϯτʢ༗ࢤ຋༁൛ʣΛӡӦ Creative Coding ͪΌΜͱॻ͚ΔΑ͏ʹͳΓ͍ͨ ࣗݾ঺հ
3. ࠓճͷΞϓϦΛ࡞ͬͨ ͖͔͚ͬ
4. 3೥΄ͲલʹࠨهͷJSͰͰ͖ͨͷ࡞඼Λݟͯɺڻዼ ίʔυͷϝΠϯ෦෼͸Կ΍ͬͯΔͷ͔શવΘ͔Βͳ ͍͕ɺͳΜ͔͕ͩ֗ੜΈग़͞Ε͍ͯΔʂ ͜͏͍͏ͷ͕޷͖ͳΒProcessing͓޷͖ͩͱࢥ͍· ͢Αɺͱ౰࣌ಉ྅ͩͬͨ@chobishiba͞ΜʹΦεεϝ ͞ΕΔ Creative Codingͱ͍͏֓೦Λೝࣝ͢Δ https://x.com/KilledByAPixel/status/1517294627996545024 Processingͱͷग़ձ͍
5. Creative Codingָ͍͠ canvas্ͷͲ͜ʹԿΛυϩʔΠϯά͍͔ͯ͘͠ɺͱ͍͏͜ͱΛ ϓϩάϥϛϯά͍ͯ͘͠ ܭࢉͷ૊Έ߹ΘͤͰۮൃతʹૉ੖Β͍͠࡞඼͕ੜ·ΕΔ໘ന͞
6. ͍ͭ΋ͷWEBαΠτߏங͢Δײ͡Ͱ ࣅͨΑ͏ͳ͜ͱ΍Εͳ͍͔ͳ🤔 HTMLཁૉͱCSSͰಈ͖ͷ͋ΔΞʔτ࡞඼Έ͍ͨͳ΋ͷΛ࡞Δ ηϚϯςΟοΫతʹ͸Ͳ͏͔ͱࢥ͍·͕͢ ;ͩΜͷࢥߟճ࿏ͰઃܭɾߏஙͰ͖Δͱ໘നͦ͏
7. Humans since 1982 ͱ͍͏ํͨͪͷϓϩμΫτ Ξφϩά࣌ܭ͕ͨ͘͞Μू·ͬͯɺ࣌ؒͷܦա ͱͱ΋ʹنଇతͳ໛༷Λ܁Γฦ͠ඳ͍͍ͯ͘ ؾͮ͘ͱ͠͹Β͘ͷؒɺͣͬͱோΊ͍ͯͨ ͋Δ೔ɺ;ͱݟ͔͚ͨ࡞඼ https://www.humanssince1982.com/en-int/products/a-million-times-72-white-sterling
8. ͜ΕΛΦϚʔδϡͨ͠࡞඼Λ࡞ͬͯΈ͍ͨ γϯϓϧͳਤܗͱύλʔϯԽ͞Εͨಈ͖ͰදݱͰ͖Δ ͍ͭ΋ͷWebΞϓϦ͔Βগ͠಄Λ೧Ε͹Ͱ͖ΔͷͰ͸ͳ͍͔ →ͪΐ͏Ͳࣾ಺ͷ։ൃίϯςετ͕͋Δ͔ΒτϥΠͯ͠ΈΑ͏☺
9. 1st try
10. ٕज़ΩϟονΞοϓ͕ओ໨తͰ ͷબఆ ͳΜͱ͔૝ఆ௨Γͷ࣮૷͕Ͱ͖ ͯɺ࡞඼΋໘ന͕ͬͯ΋Β͑ͨ ·͔͞ͷೖ৆ʂ ࣾ಺ίϯςετ Ͱ͸ɺVue.jsͰ ͭͬͨ͘
11. ͦͷޙɺࣾ֎ͷํʹ ࡞඼Λݟͯ΋Β͑Δ ػձ͕͋ͬͨ ϙδςΟϒͳ൓ԠΛ͍͚ͨͩͨ •ʮRubyͰॻ͍ͨΒൃදͰ͖ΔΑʂʯ •ʮؔ੢RubyձٞʹCFPग़ͯ͠Έͨ Βʂʯ ͱɺ͙ͬͱഎதΛԡ͍͖ͯͨͩ͠·͠ ͨ ͦͯ͠·͔͞ͷ࠾୒ʂ🎉
12. 2nd try ʢࠓճʣ
13. Ҏ߱͸͢΂ͯRubyͱ Railsͷ͓࿩Ͱ͢
14. RubyͰಈ͔ͤΔΑ͏ʹ͢ΔʂͲ͏͢ΔɺͲ͏΍Δ ೃછͷ͋Δ;ͭ͏ͷWebΞϓϦߏ੒Ͱম͖௚͢ લճ͸JS͚ͩͰ࡞ͬͨͷͰࠓճ͸JSΛগͳ͍ͨ͘͠ HotwireΛ࢖ͬͯΈͯ͸Ͳ͏͔ʁ
15. ϩδοΫ͸ͳΔ΂͘Railsʹد͍ͤͨʢHotwireޫͷಓʣ ࿈ଓͨ͠ಈ͖ͷ࡞඼ͳͷͰɺ௨৴͕ଟগ஗Ԇͯ͠΋ಈ͖ʹӨ ڹ͕ग़ͳ͍Α͏ʹ͍ͨ͠ Rails & HotwireͰ࡞Δͱ͖ͷߟྀ఺
16. ߟྀ఺ΛՃຯͯ͠ Rails & HotwireͰ ࡞ͬͯΈ·ͨ͠
17. DEMO
18. ͍͍ͭͭோΊͯ͠·͏… ࣌ؒΛ༹͔࣌͢ܭ😇
19. Ͱ΋೉͍͜͠ͱ͸ ͍ͯ͠·ͤΜ
20. ͬ͘͟Γ Ξϓϩʔνղઆ
21. Ξφϩά࣌ܭ͕ͨ͘͞ΜฒΜͰ͍Δ ࣌ؒܦաͱͱ΋ʹ༷ʑͳ਑ͷಈ͖ΛݟͤΔ ࣍ʹ঺հ͢Δ̎ύλʔϯΛ܁Γฦ͢ ΞϓϦͷಈ࡞֓ཁ
22. ͢΂ͯͷ࣌ܭΛ࢖ͬͯ਺छྨͷύλʔϯΛඳը͍ͯ͘͠ 30ඵʹͳΔͱ͖ʹ໛༷͕׬੒͢Δ ຖ෼00~30ඵͷؒ
23. 60ඵʹͳͬͨͱ͖ͷ࣌ࠁʢ1෼ޙʣΛදࣔͰ͖ΔΑ͏ʹඳը͠ ͍ͯ͘ 60ඵʹͳΔͱ͖ʹͦͷͱ͖ͷ࣌ࠁ͕දࣔ͞ΕΔ σδλϧ࣌ܭͷ໾ׂΛ࣋ͭ࣌ܭͱͦΕҎ֎Ͱಈ͖͕ҟͳΔ ຖ෼30~60ඵͷؒ
24. ࣮ݱͷͨΊʹඞཁͳ͜ͱ
25. ࣌ܭͷ਑Λࣗ༝ʹૢ࡞Ͱ͖Δ ࣌ܭΛϧʔϧʹԊͬͯฒ΂Δ ਑ͷಈ͖͸࣌ܭʹΑͬͯҟͳΔ ͣͬͱಈ͔͠ଓ͚Δ େ͖̐ͭ͘ʹΘ͚ͯߟ͑·ͨ͠
26. ͻͱͭͣͭݟ͍͖ͯ·͢
27. ;ͭ͏ͷ࣌ܭͰ͸͋Γ͑ͳ͍਑ͷ֯౓Λࢦͤͳ͍ͱ͍͚ͳ͍ ʮݟͨ໨͕࣌ܭͬΆ͍ɺ࣌ܭͷΑ͏ͳৼΔ෣͍Λ͢Δύʔ πʯΛ࡞Δ ࣌ܭͷ਑Λࣗ༝ʹૢ࡞Ͱ͖Δ
28. ࣌ܭModelΛ࡞ΓɺModel಺Ͱ௕਑ͱ୹਑ͷ֯౓ΛͦΕͧΕࢉ ग़Ͱ͖Δͱྑͦ͞͏ ࣮૷Ͱߟ͑Δͱ
29. ΞϓϦͷجૅͱͳΔཁૉ HTMLͱCSSͳͲͰܗ࡞ Δ ݟͨ໨͸ ͜Μͳײ͡Ͱ ࿮ ௕਑ ୹਑
30. ࣌ܭͷView ࿮(rim) ௕਑(big-hand) ୹਑(small-hand) ਑͸ͦΕͧΕϞσϧ͔Β֯ ౓Λड͚औΓɺstyleΛద༻ ͠·͢
31. ͔࣌ؒΒ֯౓ ΛׂΓग़ͤΔ Α͏ʹ͢Δ ͜Ε͸Ξφϩά࣌ܭͱ͠ ͯৼΔ෣͏ͨΊͷmodule ඵ୯Ґͷ֯౓ΛٻΊΔ →͜ΕͰύʔπ४උOK
32. ࣌ܭͷϙδγϣϯʹΑͬͯ͸਺ࣈΛද͢ύʔπʹͳΔͨΊɺ ഑ஔΛ͋Δఔ౓ܾΊΔඞཁ͕͋Δ ࣌ܭΛϧʔϧʹԊͬͯฒ΂Δ
33. ੺࿮ͷ࣌ܭͨͪΛ15ݸ1η οτɻ1ηοτ͝ͱʹσδλ ϧ਺ࣈΛද͢࢓ࣄΛ࣋ͭ ഑ஔͱදݱ͢Δ਺ࣈʹΑͬ ͯ਑ͷ֯౓͕ܾ·Δ ࣌ܭͷҐஔͰ ੑ࣭Λ෼͚Δ
34. σδλϧ਺ࣈ༻ͷ࣌ܭΛਖ਼͠ ͘഑ஔ͢Δඞཁ͕͋ΔͨΊɺ ϚοϓΛੜ੒͢Δ 15ݸ1૊ͳͷͰɺͦΕͧΕͷ ഑ஔ͸16ਐ਺Λ౰ͯͯ൑ผͰ ͖ΔΑ͏ʹ͓ͯ͘͠ ઌఔͷ഑ஔΛ Ϛοϐϯά͢Δ xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xx012x012x012x012xx xx345x345x345x345xx xx678x678x678x678xx xx9abx9abx9abx9abxx xxcdexcdexcdexcdexx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx
35. ྘ͷ෦෼͸ϚʔδϯʹͳΔ ϚʔδϯΛআ֎͢Δͱ֤਺ࣈͷ ؒ͸1Ϛεຖʹొ৔͢Δ ্هͷੑ࣭͔ΒHH:MMͷ͏ͪ Ͳͷ਺ࣈͷ୲౰άϧʔϓ͔͕Θ ͔Δ Ϛοϓ͔Β දࣔ͢Δ਺ࣈΛ ׂΓग़͢ xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xx012x012x012x012xx xx345x345x345x345xx xx678x678x678x678xx xx9abx9abx9abx9abxx xxcdexcdexcdexcdexx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx ̌ ̏ ̎ ̍ H H M M
36. ਺ࣈΛද͢ϙδγϣϯͱͦΕҎ֎Ͱ࣌ࠁදࣔͷ࢓ํ͕ҧ͏ ҰํͰ00~30ඵͷύλʔϯΛඳը͢Δͱ͖͸օಉ͡ʹͳΔ →ͦΕͧΕͷ࣌ܭͰ਑ͷ֯౓ΛܭࢉͰ͖Δͱ·ͱ·Γͦ͏ ਑ͷಈ͖͸࣌ܭʹΑͬͯҟͳΔ
37. ࣌ܭϞσϧ͕ܭࢉ͢ΔछྨͱλΠϛϯά Ξφϩά࣌ܭ σδλϧ࣌ܭ ΞΫηε͞Εͨͱ͖ͷඵ Ξφϩά࣌ܭ ਺ࣈ୲౰ 00ඵ ࣌ࠁදࣔͷ֯౓ʢ׬੒ʣ ࣌ࠁදࣔͷ֯౓ʢ׬੒ʣ ~29ඵ ໛༷ͷ֯౓(్த) ໛༷ͷ֯౓(్த) 30ඵ ໛༷ͷ֯౓(׬੒ʣ ໛༷ͷ֯౓(׬੒ʣ ~59ඵ ࣌ࠁදࣔͷ֯౓(్த) ࣌ࠁදࣔͷ֯౓
38. ॏෳ͢ΔॲཧΛmoduleԽ ͢Ε͹ྑͦ͞͏ ܭࢉʹඞཁͳ৘ใΛड͚ औΔඞཁ͕͋Γͦ͏ ࣮૷Ͱߟ͑Δͱ
39. ࠓ·Ͱͷߟ͑Ͱ ඳըͯ͠ΈΔ
40. ࣌ܭΛ࡞ΔϞ σϧΛ༻ҙͯ͠ ࣌ࠁ΍ύλʔϯ ৘ใΛ౉͢
41. Ϛοϓʹैͬͯ ࣌ܭϞσϧΛશ ͯ࣋ͬͨ഑ྻΛ ࡞Δ matrixʹ͸ઌఔͷϚοϓͷจ ࣈ͕̎࣍ݩ഑ྻͰೖͬͯ·͢ digital_parts_groupϝιου ͸ HH:MM ͷ4ͭͷ਺ࣈͷ͏ ͪɺͦͷ࣌ܭ͕୲౰͢΂͖਺ ࣈΛrow, colͷҐஔʹج͍ͮ ͯฦ͠·͢ ୲౰͢Δ਺ࣈ ୲౰ϙδγϣϯ
42. ͦΕΛ controllerͰ ड͚औͬͯ
43. partialʹ౉͠ ͯฒ΂͍͖ͯ ·͢ ͜ͷล͸;ͭ͏ͷWebΞ ϓϦͬΆ͍
44. ͜Μͳײ͡🎉
45. ϖʔδΞΫηεޙ΋ ࣌ؒܦաͰ ਑Λಈ͔͍ͯ͘͠
46. ͸͡Ί͸1ඵ͓͖͘Β͍ʹturbo framesʹΞΫηεͯ࣌͠ܭ͕ ਐΉ༷ࢠΛ࣮ݱ͠Α͏ͱࢥ͍ͬͯͨ ͱ͜Ζ͕frames͕ฦ͢ͷ͸ʮ৽͍͠ϖʔδʯͳͷͰɺCSSͷ duration͕શવޮ͔ͳ͍͜ͱʹ͖ͮ͘ʢΧΫΧΫͯ͠͠·͏ʣ ࣮ݱ͕ͪΐͬͱ೉͍͠
47. ͦΕͧΕͷ࣌ܭͷ਑ʹ̎ͭͷ৘ใΛ࣋ͨͤͯΈΔ ʮϨϯμϦϯά࣌ͷ਑ͷ֯౓ʯ ʮNඵޙͷ֯౓ʯ JSͰ࣌ܭͷ਑ʹରͯ͠CSSΞχϝʔγϣϯΛઃఆ͢Δ Ͱ͸Ͳ͏͢Δ͔
48. Railsଆ Turbo frame༻λΠϚʔηοτ CSSΞχϝʔγϣϯ։࢝ ɹ30ඵ͔͚ͯ਑ΛҠಈ Turbo frame༻λΠϚʔൃՐ ݱࡏͷ֯౓ͱ 30ඵޙͷ֯౓Λܭࢉ Stimulusଆ ݱࡏͷ֯౓ͱ 30ඵޙͷ֯౓Λܭࢉ CSSΞχϝʔγϣϯ։࢝ ܁Γฦ͠
49. ΞΫηεޙͷදࣔ͸਺ඵɺදࣔΛݻఆͤͯ͞ޡຐԽ͢ ͪΐ͏Ͳ໛༷΍࣌ࠁ͕׬੒ͨ͠ͱ͜Ζʹ߹ΘͤΕ͹ࣗવ… fetchͯ͠΋ଈ࣌ʹϨεϙϯε͞Εͳ͍
50. ͱ͍͏ͷΛશ෦΍ͬͯ ࣮ݱͰ͖·ͨ͠
51. RailsͰ࡞ͬͯΈͨײ૝
52. ͍ͭ΋ͷRailsΞϓϦΛ࡞Δײ͡ʹ͍ۙ MVCߏ଄Λ׆͔ͯ͠ߏஙͰ͖Δ Ξχϝʔγϣϯ͸CSSʹཔΔ෦෼͕େ͖͔͕ͬͨɺΠϝʔδ௨Γ ʹ͸࡞Εͨ σʔλͷ४උͱϏϡʔଆͷ޻෉࣍ୈͰ৭ʑͳ͜ͱ͕Ͱ͖ͦ͏
53. େมͩͬͨϙΠϯτ Ruby͕αʔόʔଆʹ͋ΔͷͰɺΞχϝʔγϣϯͱ׬શʹ੾Γ཭ ͢ඞཁ͕͋ͬͨ ΞχϝʔγϣϯͱܭࢉΛγʔϜϨεʹॻ͚ͨΒྑͦ͞͏ ͱ͍͏͜ͱͰ
54. 3rd try
55. WASM্Ͱಈ͘΋ͷ΋ ࡞Γ·ͨ͠
56. DEMO
57. Copilot AgentɺClaude Code ͱҰॹʹ։ൃ͠·ͨ͠🤖 ;ͭ͏ͷWebΞϓϦ࡞ͬͯͳ͍͔Βɺ࢓༷͕఻ΘΔ͔ෆ҆ ࠷ॳ͸IssueϕʔεͰ͸ͳ͘ɺIDEӽ͠ʹର໘ʁͰਐΊͯΈͨ WASM൛͸AIΤʔδΣϯτͱ࡞Γ·ͨ͠
58. ΍Γ͍ͨ͜ͱΛখ͍͞ػೳʹ෼͚ͯ఻͍͑ͯͬͨͱ͜Ζɺ͢ ͙ʹཧղ࣮ͯ͠૷ͯ͘͠ΕΔ͜ͱ͕ଟ͔ͬͨ Issueϕʔεͷ΍ΓऔΓ΋ࢼͯ͠ΈͨˠෳࡶͰͳ͚Ε͹ͳΜͱ ͔ͳͬͨ ྑ͍ମݧ͕Ͱ͖·ͨ͠ ҙ֎ͱΘ͔ͬͯ΋Β͑Δ
59. ࠷ޙʹ
60. ۀ຿ͰΨοπϦ͞ΘΕͳ͍ٕज़Λଘ෼ʹຯΘ͑Δ มΘͬͨςʔϚʹऔΓ૊Ήͱ಄ͷମૢʹͳͬͯΦεεϝͰ͢ RailsΛಋೖ͓͍ͯͯ͠ԿͷϢʔβʔΞΫγϣϯ΋औΕͳ͍Ξ ϓϦΛ࡞ͬͯ΋ྑ͍ΜͰ͢() ݸਓ։ൃָ͍͠ʂ
61. ·ͨҧ͏΋ͷΛݟ͚ͭͨΓͻΒΊ͍ͨΒ ͳʹ͔࡞ͬͯΈ͍ͨͱࢥ͍·͢
62. օ͞ΜͷΞϓϦ΋ݟͯΈ͍ͨͷͰ ͥͻͲ͔͜Ͱൃදͯ͠Έ͍ͯͩ͘͞ʂ ݟʹߦ͖·͢ʂʂ
63. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠