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