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

Middleman で GUI Editor を作った

ngs
May 16, 2014

Middleman で GUI Editor を作った

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

ngs

May 16, 2014
Tweet

More Decks by ngs

Other Decks in Programming

Transcript

  1. ݱࡏͷߏ੒ • Editor ຊମ (slim+sass = middleman) • API (Ruby

    on Rails) • JavaScript (grunt+requirejs) • Proxy (sinatra)
  2. Editor ຊମ • middleman Ͱ࣮૷͍ͯ͠Δ • ಈతͳՕॴ͸ JavaScript + API

    ͰશͯϋϯυϦ ϯά͍ͯ͠Δ • GUI ͷશൠΛ࣮૷͍ͯ͠Δ • S3 Static Site Hosting
  3. API • Ruby on Rails • Create/Read/Update A/B tests •

    Upload/Delete Images • JSON ͷγϯϓϧͳ΋ͷ • CORS Ͱ௨৴͍ͯ͠Δ • CSRF Token ૹͬͯͳͯ͘ɺηογϣϯഁغ͞Ε͍ͯ᪴ ͨɻ
  4. JavaScript • jQuery ͷϏϧυγεςϜΛࢀߟʹ • iframe ؒΛ postMessage ௨৴Ͱ •

    ਌ࢠͲͪΒʹ΋ JS ͕ೖ͍ͬͯΔ • ςετϑϨʔϜϫʔΫ͸ Jasmine
  5. Proxy • ࢠϑϨʔϜଆ (ςετର৅αΠτ) ʹ planBCD JS ͕షΓ෇͚ΒΕͯͳ͔ͬͨ࣌༻ • </head>

    Λ .gsub Ͱஔ׵ • ࠷ॳɺProxy ͳ͠ͷ URL Λ iframe ʹϩʔυ͠ ͯɺ10ඵϨεϙϯε͕ͳ͚Ε͹ɺProxy ͋ΓͰಡ ΈࠐΈͳ͓͍ͯ͠Δ
  6. ஈ֊తʹૄ݁߹Խ 1. ·ͣɺRails ͱ JavaScript Λ੾Γ཭ͨ͠! • Editor ͱష෇͚ίʔυΛҰॹͷϦϙδτϦͰ؅ཧ •

    Rails ͱ partial Λڞ༗ͯ͠ Middleman ͰσϞ։ൃ • Ϗϧυͨ͠ JS ͱ partial Λ gem ͱͯ͠ Rails ʹࢀর͍ͤͯͨ͞ 2. Editor / ష෇͚ίʔυ ϦϙδτϦ෼཭! • Rails ͔Β Editor ͷίϯτϩʔϥʔ͸ͳ͘ͳΓɺAPI Λ৽ઃ • Middleman + S3 Sync 3. Proxy Λ Rails ͔Β੾Γ཭ͨ͠! • શૄ݁߹Խ׬ྃʂ
  7. σϓϩΠ • grunt dev (= coffee compile, requirejs , concat)

    • bundle exec middleman build • bundle exec middleman sync
  8. σϓϩΠ • GitHub Pull Request + Circle CI • CI

    ޙʹ middleman sync • ৄ͘͠͸ http://d.hatena.ne.jp/naoya/20140502/1399027655
  9. ·ͱΊ • ओʹϑϩϯτΤϯυͰΰϦΰϦ࣮૷ͯ͋͠ΔΞϓϦ έʔγϣϯ͸ Middleman ΛϝΠϯʹ࢖ͬͯ։ൃ͢Δ ͱָ • CRUD Ҏ֎ͳΒ

    S3 ͚ͩͰ OK • ؀ڥʹґଘ͠ͳ͍Α͏ʹɺΤϯυϙΠϯτͳͲ͸Մ มʹ͢Δલఏʹ࡞Δͱ޾ͤ • σϓϩΠ͸Ͱ͖Δ͚ͩख࡞ۀΛݮΒͦ͏