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
830
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
Realtime API 入門
riofujimon
0
110
Outline View in SwiftUI
1024jp
1
150
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
Synchronizationを支える技術
s_shimotori
1
150
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.2k
GitHub's CSS Performance
jonrohan
1030
460k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Side Projects
sachag
452
42k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Being A Developer After 40
akosma
86
590k
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 ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ͓ͪͯ͠·͢ɻ