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
Phics
Search
Matts966
December 18, 2018
Programming
90
0
Share
Phics
Web application of generative art
Matts966
December 18, 2018
More Decks by Matts966
See All by Matts966
OSS分散ベクトル検索エンジンValdと最新の取り組み
matts966
0
130
Grafana Dashboard as Code using Grafana Foundation SDK
matts966
3
280
nilarg
matts966
0
170
Static Analysis in Go
matts966
0
3.1k
Other Decks in Programming
See All in Programming
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
310
Swiftのレキシカルスコープ管理
kntkymt
0
180
Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか
syumai
1
440
横断組織出身のQAEがインプロセスQAEでつまずいたこと・活かせたこと
ty89
0
170
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
410
AI時代になぜ書くのか
mutsumix
0
450
GitHub Copilot CLIのいいところ
htkym
2
570
AIエージェントの隔離技術の徹底比較
kawayu
0
390
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
hayatokudou
5
920
開発とはなにか、Essenceカーネルで見えるもの
ukin0k0
0
200
権限チェックの一貫性を型で守る TypeScript による多層防御
mnch
3
460
AlarmKitで明後日起きれるアラームアプリを作る
trickart
0
140
Featured
See All Featured
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
280
We Have a Design System, Now What?
morganepeng
55
8.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.6k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Navigating Weather and Climate Data
rabernat
0
190
Side Projects
sachag
455
43k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
140
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
570
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
90
Transcript
Phics Phics Graphics Generation Service. Graphics Generation Service. Created by
Service Slide Masahiro Matsui
None
࣍ ࣍ 1. 2. 3. 4. 5. 6. 7. 8.
ΞϓϦέʔγϣϯ֓ཁ δΣωϥςΟϒΞʔτͱ αʔόʔଆ࣮ ΫϥΠΞϯτଆ࣮ ڥߏங&DeployࣗಈԽ ল ࠓޙͷ՝ ࢀߟจݙ
ΞϓϦέʔγϣϯ֓ཁ ΞϓϦέʔγϣϯ֓ཁ ϢʔβʔϩάΠϯޙɺཪฦ͠ͷΧʔυΛΒΕ Δɻ λοϓ͢Δ͜ͱͰɺΧʔυΛཪฦ͢͜ͱ͕Ͱ͖ɺΦ Ϟς໘ʹδΣωϥςΟϒΞʔτ͕දࣔ͞ΕΔɻ ϘλϯΛԡ͢͜ͱͰɺը૾Λอଘ͢Δ͜ͱ͕Ͱ͖ Δɻ
δΣωϥςΟϒΞʔτͱ δΣωϥςΟϒΞʔτͱ
αʔόʔଆ࣮ αʔόʔଆ࣮ Nginx Rails 5.2.1 Ruby 2.3.7 Webpacker devise react-rails
αʔόʔଆ࣮ αʔόʔଆ࣮ αϒυϝΠϯͰͷӡ༻ʢDNS,VPNͷϓϩόΠμͰ ͷઃఆ ʴ NginxͰͷϙʔτϑΥϫʔσΟϯάʣɻ Webpacker ͰΫϥΠΞϯτଆͷίϯύΠϧɻ devise ͰϢʔβೝূɻomniauth
ʹΑΔGoogleೝ ূΛ࣮ʢબࢶ͕ଟ͍ͱٯʹ໎ͬͯ໘ͱ͍͏࣮ ମݧͱɺཧͷख͔ܰ͞ΒҰͭʹߜͬͨʣɻ react-rails Ͱ rails ଆͷσʔλΛ React ΫϥΠΞϯ τଆʹ͢ɻ
Webpacker Webpacker Webpacker͕ϩάΛు͔ͣʹམͪΔ ͦͷଞͷ໘͝ͱ ࠷৽൛webpackͷରԠͷΕ
ΫϥΠΞϯτଆ࣮ ΫϥΠΞϯτଆ࣮ React.js 16.7.0-alpha.0 React P5Wrapper Material UI 3.7.1
P5Wrapper ͰͷReactͬΆ͍ P5Wrapper ͰͷReactͬΆ͍ σʔλϋϯυϦϯά σʔλϋϯυϦϯά p.setup = function ()
{ p.myCustomRedrawAccordingToNewPropsHandler = propsHandler(p, canvas); }
ڥߏங&DeployࣗಈԽ ڥߏங&DeployࣗಈԽ capistrano unicorn webpack-dev-server foreman
σϓϩΠϑϩʔ σϓϩΠϑϩʔ rails s , webpacker-dev-server, ΛbundleͰ ࣮ߦʢforemanͰ·ͱΊ͓ͯ͘ʣɺ࣮ͷ࠷ऴ֬ ೝɻ 1.
ͳ͚Εcap production deployͰσϓϩ ΠΛ࣮ߦɻ 2. ෦Ͱassets:precompile, webpacker:compileΛߦ͍ɺunicornαʔόͷ࠶ ىಈɻ 3. 3ͷλΠϛϯάɺॴ͕ͱͳͬͨɻ
Webpacker Webpacker WebpackerWebpackͷઃఆϑΝΠϧͳͲΛӅṭ ͯ͘͠ΕΔɻymlදهͰൺֱత؆қʹઃఆՄೳɻ ͦͷ݁Ռ͍Ζ͍Ζแ·ͳ͍ͱ͍͚ͳ͍ͨΊɺ PermissionΤϥʔbundleͷversionཧͷͳ ͲͰߴසͰ͚͜Δɻ --trace Λ͔͚ͯϩά͕·ͱʹు͔Εͳ͍͜ ͱ͕͋Δɻ
Webpacker Webpacker Ͳ͏͢Δ͔ʁ Ͳ͏͢Δ͔ʁ ϩʔΧϧͰϩάग़Δ͠ɺ͋·Γ͚͜ͳ͍͜ͱʹ ؾͮ͘ɻ Ϣʔβʔ͕σϑΥϧτͰ root ͩͬͨΓɺͱͱ system͕
ruby 2.3.0 Λࠅͯ͠Δαʔόͩͬͨ ͷͰɺઌड़ͷ༷ͳ͕ग़ͨͱߟ͑ΒΕΔɻ → ϩʔΧϧͰίϯύΠϧΛ௨ͯ͠͠·͍͍͑ɻ → ͦͷޙrsyncͰϑΝΠϧసૹΛߦ͏ capistarano λεΫΛఆٛͯ͠͏ɻ
None
ল ল Γ͍ͨ͜ͱʹྗΛஔ͍࣮ͨϥΠϒϥϦͷ ༻ޮΑ͘ਐΊΒΕͨͷͰɺͦ͏͍ͬͨํʹ࣌ ؒΛ͏গ͑͠ΕΑ͔ͬͨɻ ͳΜͲߦ͏σϓϩΠޮԽ͓ͯ͜͠͏ͱࢥͬͨ ݁ՌɺͦͪΒʹ࣌ؒΛ͍ա͗ͯ͠·ͬͨɻ ܭըΛશཱͯͣ͘ʹ࡞ͬͨͨΊɺURLͳͲ͕ࡶɻ ͍Ζ͍Ζͱؒʹ߹Θͣɺೝূͷҙຯ͕ͳ͍ͱ͍͏ ೦ͳঢ়ଶɻ
ࠓޙͷ՝ ࠓޙͷ՝ νέοτγεςϜʢ͜ΕΛೖΕͳ͍ͱϩάΠϯͷҙ ຯͳ͠ʣ Email Confirmation ϦηϚϥରࡦ༻ͷΞΧϯτsoft-deleteʢίϯςϯ πͷՁͱྔΛ্͛ͳ͍ͱҙຯͳ͠ʣ GANϞσϧͷΞϓϦέʔγϣϯͷऔΓࠐΈ(Ruby Ͱॻ͖ͨ͘ͳ͍ͷͰGAE/GOͷ༧ఆ)
࣮ࡍͷDBͷը૾ͷอଘʢSaveϘλϯΧʔυΛ දʹฦ͔ͯ͠Βग़͍ͨ͠ʣ
ࠓޙͷ՝ ࠓޙͷ՝ Ϣʔβʔ͝ͱͷॴ࣋ը૾Ұཡػೳ SNS share ΞΠίϯ PWAରԠ Χʔυͷछྨ૿͢ LP࡞Δ
ࢀߟจݙ ࢀߟจݙ [ීٴ൛]δΣωϥςΟϒɾΞʔτ―ProcessingʹΑ Δ࣮ફΨΠυ,ɹMatt Pearson (ஶ), ٱอా ߊ߂ ( म),
ԭ ܒհ (༁), ϏʔɾΤψɾΤψ৽ࣾ, 2014/11 1. The Nature of Code (English Edition), Daniel Shiffman, Amazon Services International, Inc. 2.