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
87
0
Share
Phics
Web application of generative art
Matts966
December 18, 2018
More Decks by Matts966
See All by Matts966
OSS分散ベクトル検索エンジンValdと最新の取り組み
matts966
0
120
Grafana Dashboard as Code using Grafana Foundation SDK
matts966
3
270
nilarg
matts966
0
170
Static Analysis in Go
matts966
0
3.1k
Other Decks in Programming
See All in Programming
NakouPAY説明用
annouim0
0
270
Angular Signal Forms
debug_mode
0
120
Claude CodeでETLジョブ実行テストを自動化してみた
yoshikikasama
0
970
Road to RubyKaigi: Play Hard(ware)
makicamel
1
480
SREに優しいTerraform構成 modulesとstateの組み方
hiyanger
2
150
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
310
PHP で mp3 プレイヤーを実装しよう
m3m0r7
PRO
0
290
Liberating Ruby's Parser from Lexer Hacks
ydah
2
2.2k
Swift Concurrency Type System
inamiy
1
550
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
430
Don't Prompt Harder, Structure Better
kitasuke
0
790
決定論 vs 確率論:Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
shukob
0
130
Featured
See All Featured
Music & Morning Musume
bryan
47
7.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
680
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
180
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
110k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
540
Everyday Curiosity
cassininazir
0
200
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.9k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
170
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
280
Into the Great Unknown - MozCon
thekraken
41
2.4k
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.