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.7k
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.6k
Hubot を使って日々のルーチンワークをゼロにする
ngs
3
1.4k
IBM Cloud Tools for Swift
ngs
0
410
WWDC 2016
ngs
2
1.2k
CI2Go
ngs
0
750
Oneteam の開発チームが行っている協同のための工夫 v2016-04-13
ngs
0
2.2k
Swift で開発した Web アプリケーションを Amazon EC2 Container Services で運用する
ngs
3
4k
Oneteam の 少人数で複数プロダクトを 開発する技術的な試行錯誤 #eventdots
ngs
2
2.3k
Electron アプリのビルド + 配信自動化
ngs
0
2.7k
Other Decks in Programming
See All in Programming
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
830
オブジェクトしこう
okuramasafumi
2
130
Parallel Socket Communication in Swift
s_shimotori
0
210
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
object-oriented-conference-2024
fuwasegu
6
1.4k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
18k
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.3k
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.7k
Featured
See All Featured
A Philosophy of Restraint
colly
195
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Building Adaptive Systems
keathley
29
1.8k
Faster Mobile Websites
deanohume
296
30k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Rails Girls Zürich Keynote
gr2m
91
13k
Done Done
chrislema
178
15k
Code Review Best Practice
trishagee
54
15k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Designing the Hi-DPI Web
ddemaree
275
33k
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 ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ͓ͪͯ͠·͢ɻ