Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Middleman で GUI Editor を作った

53bc8fa21f71dd8e63f3c94275c56191?s=47 ngs
May 16, 2014

Middleman で GUI Editor を作った

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

53bc8fa21f71dd8e63f3c94275c56191?s=128

ngs

May 16, 2014
Tweet

More Decks by ngs

Other Decks in Programming

Transcript

  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 ͸ΤϯδχΞΛืूͯ͠·͢ɻ ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞ΋΋ͪΖ Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ ΫςΟϏςΟ ΤϯδχΞ΋͓଴ͪͯ͠·͢ɻ