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. 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