Middleman で GUI Editor を作った

middleman meetup #2 で発表した資料 その 1

1. Middleman Ͱ GUI Editor Λ࡞ͬͨ @ngs ! Atsushi Nagase KAIZEN platform Inc.
2. ࣗݾ঺հ @ngs
3. ࣗݾ঺հ ngs.io
4. Extensions • gem ‘middleman-blog-similar’ • gem ‘middleman-ogp’ • gem ‘middleman-google-analytics’
5. ݱࡏͷߏ੒ • Editor ຊମ (slim+sass = middleman) • API (Ruby on Rails) • JavaScript (grunt+requirejs) • Proxy (sinatra)
6. Editor ຊମ • middleman Ͱ࣮૷͍ͯ͠Δ • ಈతͳՕॴ͸ JavaScript + API ͰશͯϋϯυϦ ϯά͍ͯ͠Δ • GUI ͷશൠΛ࣮૷͍ͯ͠Δ • S3 Static Site Hosting
7. API • Ruby on Rails • Create/Read/Update A/B tests • Upload/Delete Images • JSON ͷγϯϓϧͳ΋ͷ • CORS Ͱ௨৴͍ͯ͠Δ • CSRF Token ૹͬͯͳͯ͘ɺηογϣϯഁغ͞Ε͍ͯ᪴ ͨɻ
8. JavaScript • jQuery ͷϏϧυγεςϜΛࢀߟʹ • iframe ؒΛ postMessage ௨৴Ͱ • ਌ࢠͲͪΒʹ΋ JS ͕ೖ͍ͬͯΔ • ςετϑϨʔϜϫʔΫ͸ Jasmine
9. Proxy • ࢠϑϨʔϜଆ (ςετର৅αΠτ) ʹ planBCD JS ͕షΓ෇͚ΒΕͯͳ͔ͬͨ࣌༻ • </head> Λ .gsub Ͱஔ׵ • ࠷ॳɺProxy ͳ͠ͷ URL Λ iframe ʹϩʔυ͠ ͯɺ10ඵϨεϙϯε͕ͳ͚Ε͹ɺProxy ͋ΓͰಡ ΈࠐΈͳ͓͍ͯ͠Δ
10. ࠓ·Ͱ • 4Ϟδϡʔϧશ͕ͯ Rails ͷΞϓϦέʔγϣϯʹΠϯ ςάϨʔτ͞Ε͍ͯͨ • 1ͭσϓϩΠ͢Δͷʹɺؔ܎ͳ͍ͱ͜ΖͰো֐Λى͜ ͨ͠Γ͍ͯͨ͠ɻ • Rails ͷ CI ͱҰॹʹ૸ΔͷͰɺ׬ྃ·Ͱʹ͕͔࣌ؒ ͔Δ • ࢿࡐ؅ཧ͕εύήοςΟঢ়ଶʹ
11. ஈ֊తʹૄ݁߹Խ 1. ·ͣɺRails ͱ JavaScript Λ੾Γ཭ͨ͠! • Editor ͱష෇͚ίʔυΛҰॹͷϦϙδτϦͰ؅ཧ • Rails ͱ partial Λڞ༗ͯ͠ Middleman ͰσϞ։ൃ • Ϗϧυͨ͠ JS ͱ partial Λ gem ͱͯ͠ Rails ʹࢀর͍ͤͯͨ͞ 2. Editor / ష෇͚ίʔυ ϦϙδτϦ෼཭! • Rails ͔Β Editor ͷίϯτϩʔϥʔ͸ͳ͘ͳΓɺAPI Λ৽ઃ • Middleman + S3 Sync 3. Proxy Λ Rails ͔Β੾Γ཭ͨ͠! • શૄ݁߹Խ׬ྃʂ
12. ؀ڥ͝ͱͷઃఆ Dotenv Ͱ؅ཧ: AWS AccessKeyId, SecretKey, S3 Bucket, Region
13. ؀ڥ͝ͱͷઃఆ YAML Ͱ؅ཧ: API ΤϯυϙΠϯτͳͲ (؀ڥม਺Λ༏ઌ)
14. ؀ڥ͝ͱͷઃఆ ΦϓγϣϯΛฦ٫͢Δ helper Λ࡞ͬͯɺbody λά ͷ data ଐੑʹ֨ೲɻJS ଆͰΑ͠ͳʹɻ
15. σϓϩΠ • grunt dev (= coffee compile, requirejs , concat) • bundle exec middleman build • bundle exec middleman sync
16. σϓϩΠ • GitHub Pull Request + Circle CI • CI ޙʹ middleman sync • ৄ͘͠͸ http://d.hatena.ne.jp/naoya/20140502/1399027655
17. ·ͱΊ • ओʹϑϩϯτΤϯυͰΰϦΰϦ࣮૷ͯ͋͠ΔΞϓϦ έʔγϣϯ͸ Middleman ΛϝΠϯʹ࢖ͬͯ։ൃ͢Δ ͱָ • CRUD Ҏ֎ͳΒ S3 ͚ͩͰ OK • ؀ڥʹґଘ͠ͳ͍Α͏ʹɺΤϯυϙΠϯτͳͲ͸Մ มʹ͢Δલఏʹ࡞Δͱ޾ͤ • σϓϩΠ͸Ͱ͖Δ͚ͩख࡞ۀΛݮΒͦ͏
18. ʲPRʳ KAIZEN platform ͸ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞ΋΋ͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ΋͓଴ͪͯ͠·͢ɻ