Middleman で GUI Editor を作った

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

Transcript

1. Middleman Ͱ GUI
   Editor Λ࡞ͬͨ
   @ngs
   !
   Atsushi Nagase
   KAIZEN platform Inc.
   

   View Slide

2. ࣗݾ঺հ
   @ngs
   

   View Slide

3. ࣗݾ঺հ
   ngs.io
   

   View Slide

4. Extensions
   • gem ‘middleman-blog-similar’
   • gem ‘middleman-ogp’
   • gem ‘middleman-google-analytics’
   

   View Slide

5. ݱࡏͷߏ੒
   • Editor ຊମ (slim+sass = middleman)
   • API (Ruby on Rails)
   • JavaScript (grunt+requirejs)
   • Proxy (sinatra)
   

   View Slide

6. Editor ຊମ
   • middleman Ͱ࣮૷͍ͯ͠Δ
   • ಈతͳՕॴ͸ JavaScript + API ͰશͯϋϯυϦ
   ϯά͍ͯ͠Δ
   • GUI ͷશൠΛ࣮૷͍ͯ͠Δ
   • S3 Static Site Hosting
   

   View Slide

7. API
   • Ruby on Rails
   • Create/Read/Update A/B tests
   • Upload/Delete Images
   • JSON ͷγϯϓϧͳ΋ͷ
   • CORS Ͱ௨৴͍ͯ͠Δ
   • CSRF Token ૹͬͯͳͯ͘ɺηογϣϯഁغ͞Ε͍ͯ᪴
   ͨɻ
   

   View Slide

8. JavaScript
   • jQuery ͷϏϧυγεςϜΛࢀߟʹ
   • iframe ؒΛ postMessage ௨৴Ͱ
   • ਌ࢠͲͪΒʹ΋ JS ͕ೖ͍ͬͯΔ
   • ςετϑϨʔϜϫʔΫ͸ Jasmine
   

   View Slide

9. Proxy
   • ࢠϑϨʔϜଆ (ςετର৅αΠτ) ʹ planBCD JS
   ͕షΓ෇͚ΒΕͯͳ͔ͬͨ࣌༻
   • Λ .gsub Ͱஔ׵
   • ࠷ॳɺProxy ͳ͠ͷ URL Λ iframe ʹϩʔυ͠
   ͯɺ10ඵϨεϙϯε͕ͳ͚Ε͹ɺProxy ͋ΓͰಡ
   ΈࠐΈͳ͓͍ͯ͠Δ
   

   View Slide

10. ࠓ·Ͱ
    • 4Ϟδϡʔϧશ͕ͯ Rails ͷΞϓϦέʔγϣϯʹΠϯ
    ςάϨʔτ͞Ε͍ͯͨ
    • 1ͭσϓϩΠ͢Δͷʹɺؔ܎ͳ͍ͱ͜ΖͰো֐Λى͜
    ͨ͠Γ͍ͯͨ͠ɻ
    • Rails ͷ CI ͱҰॹʹ૸ΔͷͰɺ׬ྃ·Ͱʹ͕͔࣌ؒ
    ͔Δ
    • ࢿࡐ؅ཧ͕εύήοςΟঢ়ଶʹ
    

    View Slide

11. ஈ֊తʹૄ݁߹Խ
    1. ·ͣɺRails ͱ JavaScript Λ੾Γ཭ͨ͠!
    • Editor ͱష෇͚ίʔυΛҰॹͷϦϙδτϦͰ؅ཧ
    • Rails ͱ partial Λڞ༗ͯ͠ Middleman ͰσϞ։ൃ
    • Ϗϧυͨ͠ JS ͱ partial Λ gem ͱͯ͠ Rails ʹࢀর͍ͤͯͨ͞
    2. Editor / ష෇͚ίʔυ ϦϙδτϦ෼཭!
    • Rails ͔Β Editor ͷίϯτϩʔϥʔ͸ͳ͘ͳΓɺAPI Λ৽ઃ
    • Middleman + S3 Sync
    3. Proxy Λ Rails ͔Β੾Γ཭ͨ͠!
    • શૄ݁߹Խ׬ྃʂ
    

    View Slide

12. ؀ڥ͝ͱͷઃఆ
    Dotenv Ͱ؅ཧ: AWS AccessKeyId, SecretKey, S3 Bucket, Region
    

    View Slide

13. ؀ڥ͝ͱͷઃఆ
    YAML Ͱ؅ཧ: API ΤϯυϙΠϯτͳͲ (؀ڥม਺Λ༏ઌ)
    

    View Slide

14. ؀ڥ͝ͱͷઃఆ
    ΦϓγϣϯΛฦ٫͢Δ helper Λ࡞ͬͯɺbody λά
    ͷ data ଐੑʹ֨ೲɻJS ଆͰΑ͠ͳʹɻ
    

    View Slide

15. σϓϩΠ
    • grunt dev (= coffee compile, requirejs , concat)
    • bundle exec middleman build
    • bundle exec middleman sync
    

    View Slide

16. σϓϩΠ
    • GitHub Pull Request + Circle CI
    • CI ޙʹ middleman sync
    • ৄ͘͠͸ http://d.hatena.ne.jp/naoya/20140502/1399027655
    

    View Slide

17. ·ͱΊ
    • ओʹϑϩϯτΤϯυͰΰϦΰϦ࣮૷ͯ͋͠ΔΞϓϦ
    έʔγϣϯ͸ Middleman ΛϝΠϯʹ࢖ͬͯ։ൃ͢Δ
    ͱָ
    • CRUD Ҏ֎ͳΒ S3 ͚ͩͰ OK
    • ؀ڥʹґଘ͠ͳ͍Α͏ʹɺΤϯυϙΠϯτͳͲ͸Մ
    มʹ͢Δલఏʹ࡞Δͱ޾ͤ
    • σϓϩΠ͸Ͱ͖Δ͚ͩख࡞ۀΛݮΒͦ͏
    

    View Slide

18. ʲPRʳ
    KAIZEN platform ͸ΤϯδχΞΛืूͯ͠·͢ɻ
    ΞϓϦέʔγϣϯɾΠϯϑϥ ΤϯδχΞ΋΋ͪΖ
    Μɺ։ൃऀͷੜ࢈ੑΛߴΊΔɺσϕϩούʔϓϩμ
    ΫςΟϏςΟ ΤϯδχΞ΋͓଴ͪͯ͠·͢ɻ
    

    View Slide