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.8k
Hubot を使って日々のルーチンワークをゼロにする
ngs
3
1.6k
IBM Cloud Tools for Swift
ngs
0
480
WWDC 2016
ngs
2
1.4k
CI2Go
ngs
0
890
Oneteam の開発チームが行っている協同のための工夫 v2016-04-13
ngs
0
2.4k
Swift で開発した Web アプリケーションを Amazon EC2 Container Services で運用する
ngs
3
4.3k
Oneteam の 少人数で複数プロダクトを 開発する技術的な試行錯誤 #eventdots
ngs
2
2.7k
Electron アプリのビルド + 配信自動化
ngs
0
2.9k
Other Decks in Programming
See All in Programming
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
810
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
技術同人誌をMCP Serverにしてみた
74th
1
640
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Side Projects
sachag
455
42k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Invisible Side of Design
smashingmag
301
51k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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 ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ͓ͪͯ͠·͢ɻ