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.8k
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
440
WWDC 2016
ngs
2
1.4k
CI2Go
ngs
0
840
Oneteam の開発チームが行っている協同のための工夫 v2016-04-13
ngs
0
2.3k
Swift で開発した Web アプリケーションを Amazon EC2 Container Services で運用する
ngs
3
4.2k
Oneteam の 少人数で複数プロダクトを 開発する技術的な試行錯誤 #eventdots
ngs
2
2.6k
Electron アプリのビルド + 配信自動化
ngs
0
2.8k
Other Decks in Programming
See All in Programming
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Contemporary Test Cases
maaretp
0
130
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
EventSourcingの理想と現実
wenas
6
2.3k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
200
役立つログに取り組もう
irof
28
9.6k
Arm移行タイムアタック
qnighy
0
320
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Speed Design
sergeychernyshev
24
610
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
What's in a price? How to price your products and services
michaelherold
243
12k
Facilitating Awesome Meetings
lara
50
6.1k
Faster Mobile Websites
deanohume
305
30k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Navigating Team Friction
lara
183
14k
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 ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ͓ͪͯ͠·͢ɻ