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
Middleman で GUI Editor を作った
Search
ngs
May 16, 2014
Programming
2
2.9k
Middleman で GUI Editor を作った
middleman meetup #2 で発表した資料 その 1
ngs
May 16, 2014
Tweet
Share
More Decks by ngs
See All by ngs
Mindstorms NXT Playground Book for iPad
ngs
0
1.7k
Hubot を使って日々のルーチンワークをゼロにする
ngs
3
1.5k
IBM Cloud Tools for Swift
ngs
0
460
WWDC 2016
ngs
2
1.4k
CI2Go
ngs
0
860
Oneteam の開発チームが行っている協同のための工夫 v2016-04-13
ngs
0
2.4k
Swift で開発した Web アプリケーションを Amazon EC2 Container Services で運用する
ngs
3
4.3k
Oneteam の 少人数で複数プロダクトを 開発する技術的な試行錯誤 #eventdots
ngs
2
2.6k
Electron アプリのビルド + 配信自動化
ngs
0
2.9k
Other Decks in Programming
See All in Programming
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
React 19アップデートのために必要なこと
uhyo
5
880
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Unity Android XR入門
sakutama_11
0
170
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
870
Introduction to kotlinx.rpc
arawn
0
750
『品質』という言葉が嫌いな理由
korimu
0
180
PRレビューのお供にDanger
stoticdev
1
220
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
120
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Cult of Friendly URLs
andyhume
78
6.2k
4 Signs Your Business is Dying
shpigford
182
22k
BBQ
matthewcrist
87
9.5k
Facilitating Awesome Meetings
lara
52
6.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Navigating Team Friction
lara
183
15k
Transcript
Middleman Ͱ GUI Editor Λ࡞ͬͨ @ngs ! Atsushi Nagase KAIZEN
platform Inc.
ࣗݾհ @ngs
ࣗݾհ ngs.io
Extensions • gem ‘middleman-blog-similar’ • gem ‘middleman-ogp’ • gem ‘middleman-google-analytics’
ݱࡏͷߏ • Editor ຊମ (slim+sass = middleman) • API (Ruby
on Rails) • JavaScript (grunt+requirejs) • Proxy (sinatra)
Editor ຊମ • middleman Ͱ࣮͍ͯ͠Δ • ಈతͳՕॴ JavaScript + API
ͰશͯϋϯυϦ ϯά͍ͯ͠Δ • GUI ͷશൠΛ࣮͍ͯ͠Δ • S3 Static Site Hosting
API • Ruby on Rails • Create/Read/Update A/B tests •
Upload/Delete Images • JSON ͷγϯϓϧͳͷ • CORS Ͱ௨৴͍ͯ͠Δ • CSRF Token ૹͬͯͳͯ͘ɺηογϣϯഁغ͞Ε͍ͯ᪴ ͨɻ
JavaScript • jQuery ͷϏϧυγεςϜΛࢀߟʹ • iframe ؒΛ postMessage ௨৴Ͱ •
ࢠͲͪΒʹ JS ͕ೖ͍ͬͯΔ • ςετϑϨʔϜϫʔΫ Jasmine
Proxy • ࢠϑϨʔϜଆ (ςετରαΠτ) ʹ planBCD JS ͕షΓ͚ΒΕͯͳ͔ͬͨ࣌༻ • </head>
Λ .gsub Ͱஔ • ࠷ॳɺProxy ͳ͠ͷ URL Λ iframe ʹϩʔυ͠ ͯɺ10ඵϨεϙϯε͕ͳ͚ΕɺProxy ͋ΓͰಡ ΈࠐΈͳ͓͍ͯ͠Δ
ࠓ·Ͱ • 4Ϟδϡʔϧશ͕ͯ Rails ͷΞϓϦέʔγϣϯʹΠϯ ςάϨʔτ͞Ε͍ͯͨ • 1ͭσϓϩΠ͢Δͷʹɺؔͳ͍ͱ͜ΖͰোΛى͜ ͨ͠Γ͍ͯͨ͠ɻ •
Rails ͷ CI ͱҰॹʹΔͷͰɺྃ·Ͱʹ͕͔࣌ؒ ͔Δ • ࢿࡐཧ͕εύήοςΟঢ়ଶʹ
ஈ֊తʹૄ݁߹Խ 1. ·ͣɺRails ͱ JavaScript ΛΓͨ͠! • Editor ͱష͚ίʔυΛҰॹͷϦϙδτϦͰཧ •
Rails ͱ partial Λڞ༗ͯ͠ Middleman ͰσϞ։ൃ • Ϗϧυͨ͠ JS ͱ partial Λ gem ͱͯ͠ Rails ʹࢀর͍ͤͯͨ͞ 2. Editor / ష͚ίʔυ ϦϙδτϦ! • Rails ͔Β Editor ͷίϯτϩʔϥʔͳ͘ͳΓɺAPI Λ৽ઃ • Middleman + S3 Sync 3. Proxy Λ Rails ͔ΒΓͨ͠! • શૄ݁߹Խྃʂ
ڥ͝ͱͷઃఆ Dotenv Ͱཧ: AWS AccessKeyId, SecretKey, S3 Bucket, Region
ڥ͝ͱͷઃఆ YAML Ͱཧ: API ΤϯυϙΠϯτͳͲ (ڥมΛ༏ઌ)
ڥ͝ͱͷઃఆ ΦϓγϣϯΛฦ٫͢Δ helper Λ࡞ͬͯɺbody λά ͷ data ଐੑʹ֨ೲɻJS ଆͰΑ͠ͳʹɻ
σϓϩΠ • grunt dev (= coffee compile, requirejs , concat)
• bundle exec middleman build • bundle exec middleman sync
σϓϩΠ • GitHub Pull Request + Circle CI • CI
ޙʹ middleman sync • ৄ͘͠ http://d.hatena.ne.jp/naoya/20140502/1399027655
·ͱΊ • ओʹϑϩϯτΤϯυͰΰϦΰϦ࣮ͯ͋͠ΔΞϓϦ έʔγϣϯ Middleman ΛϝΠϯʹͬͯ։ൃ͢Δ ͱָ • CRUD Ҏ֎ͳΒ
S3 ͚ͩͰ OK • ڥʹґଘ͠ͳ͍Α͏ʹɺΤϯυϙΠϯτͳͲՄ มʹ͢Δલఏʹ࡞Δͱͤ • σϓϩΠͰ͖Δ͚ͩख࡞ۀΛݮΒͦ͏
ʲPRʳ KAIZEN platform ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ͓ͪͯ͠·͢ɻ