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
94
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Phics
Web application of generative art
Matts966
December 18, 2018
More Decks by Matts966
See All by Matts966
OSS分散ベクトル検索エンジンValdと最新の取り組み
matts966
0
140
Grafana Dashboard as Code using Grafana Foundation SDK
matts966
3
290
nilarg
matts966
0
180
Static Analysis in Go
matts966
0
3.2k
Other Decks in Programming
See All in Programming
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
cottpan
1
150
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
270
継続モナドとリアクティブプログラミング
yukikurage
3
660
数百円から始めるRuby電子工作
tarosay
0
120
React本体のコードリーディング
high_g_engineer
0
110
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
210
Built Our Own Background Agent at LayerX #aidevex_findy
layerx
PRO
9
3.8k
Google Apps Script で Ruby を動かす
kawahara
0
120
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
starfish719
0
2.7k
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
rkaga
2
1.8k
霧の中の代数的エフェクト
funnyycat
1
440
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
180
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.7k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
67
56k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Code Reviewing Like a Champion
maltzj
528
40k
The Cult of Friendly URLs
andyhume
79
7k
A designer walks into a library…
pauljervisheath
211
24k
Navigating Weather and Climate Data
rabernat
0
420
Java REST API Framework Comparison - PWX 2021
mraible
34
9.6k
Thoughts on Productivity
jonyablonski
76
5.3k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
190
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
250
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
350
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.