最近流行り？の Middleman でモダンな Web 開発

Middleman のインストール、プロジェクトの作成やローカル Web サーバを使った開発方法を簡単に説明します。

Transcript

1. ࠷ۙྲྀߦΓʁͷ Middleman Ͱ Ϟμϯͳ Web ։ൃ 13/09/21 ୈ8ճ Creators MeetUp 13೥9݄20೔༵ۚ೔
2. ࣗݾ঺հ 13೥9݄20೔༵ۚ೔
3. 13೥9݄20೔༵ۚ೔
4. • ೋٶ ࿨ಙ (χϊϛϠ ΧζϊϦ) 13೥9݄20೔༵ۚ೔
5. • ೋٶ ࿨ಙ (χϊϛϠ ΧζϊϦ) • Twitter: @wakuworks 13೥9݄20೔༵ۚ೔
6. • ೋٶ ࿨ಙ (χϊϛϠ ΧζϊϦ) • Twitter: @wakuworks • גࣜձࣾ ಼ 13೥9݄20೔༵ۚ೔
7. • ೋٶ ࿨ಙ (χϊϛϠ ΧζϊϦ) • Twitter: @wakuworks • גࣜձࣾ ಼ • ීஈ͸ PHP Λ͍ͬͯ͡·͢ɻ 13೥9݄20೔༵ۚ೔
8. • ೋٶ ࿨ಙ (χϊϛϠ ΧζϊϦ) • Twitter: @wakuworks • גࣜձࣾ ಼ • ීஈ͸ PHP Λ͍ͬͯ͡·͢ɻ ʢRuby ͸ͬ͞ͺΓΘ͔Γ·ͤΜʣ 13೥9݄20೔༵ۚ೔
9. 1. Middleman ͱ͸ʁ 2. Πϯετʔϧ 3. ։ൃͷྲྀΕ 1. ϓϩδΣΫτͷ࡞੒ 2. ϓϨϏϡʔαʔόͷىಈ 3. Ϗϧυ 4. ͓͞Β͍ 4. ͦͷଞ 5. ·ͱΊ ΞδΣϯμ 13೥9݄20೔༵ۚ೔
10. 1. Middleman ͱ͸ʁ 13೥9݄20೔༵ۚ೔
11. 1. Middleman ͱ͸ʁ Middleman ͸Ϟμϯͳ web ։ൃ؀ڥͷ͢΂ͯͷ γϣʔτΧοτ΍πʔϧΛ࢖༻ͯ͠੩త web αΠ τΛ࡞੒͢ΔͨΊͷίϚϯυϥΠϯπʔϧͰ͢ɻ Ҿ༻ɿhttp://middleman-guides.e2esound.com/getting-started/ l z ॴҦɺ੩తαΠτδΣωϨʔλͷҰͭͰ͢ɻ WEB ։ൃΛγϯϓϧ׌ͭߴ଎ʹͯ͘͠Ε·͢ɻ ࣅͨ෺Ͱ͸ Jekyll ͕༗໊Ͱ͢ɻ 13೥9݄20೔༵ۚ೔
12. 2. Πϯετʔϧ 13೥9݄20೔༵ۚ೔
13. 2. Πϯετʔϧ 13೥9݄20೔༵ۚ೔
14. 2. Πϯετʔϧ gem install middleman օ͞Μେ޷͖ʰࠇ͍ը໘ʱͰ ԼͷҰߦΛॻ͍ͯΤϯλʔԡ͚ͩ͢ʂ 13೥9݄20೔༵ۚ೔
15. 2. Πϯετʔϧ gem install middleman օ͞Μେ޷͖ʰࠇ͍ը໘ʱͰ ԼͷҰߦΛॻ͍ͯΤϯλʔԡ͚ͩ͢ʂ …جຊతʹ͸ɻ 13೥9݄20೔༵ۚ೔
16. • Mac 2. Πϯετʔϧ gem install middleman Xcode Command Line Tool ͕ඞཁͰ͢ɻ Xcode ܦ༝ͰΠϯετʔϧ͢Δ͔ɺσϕϩούϙʔλϧ͔Β௚઀ύοέʔ δΛμ΢ϯϩʔυ͢Δඞཁ͕͋Γ·͢ɻ Xcode Command Line Tool ͷΠϯετʔϧ͕׬ྃͨ͠Βɺ ޙ͸ԼͷίϚϯυΛ࣮ߦͯ͠Πϯετʔϧ͠·͢ɻ 13೥9݄20೔༵ۚ೔
17. 2. Πϯετʔϧ • Ubuntu sudo apt-get ruby-dev nodejs g++ make sudo gem install middleman nodejs ΋߹ΘͤͯೖΕ͓͔ͯͳ͍ͱɺ ޙड़͢ΔϓϨϏϡʔαʔόΛىಈ͢ΔࡍʹΤϥʔ͕ൃੜ͠·͢ɻ Ruby 1.8 ϢʔβͰ͋Ε͹ɺ߹Θͤͯ `ruby18_source_location` ͷΠϯετ ʔϧ͕ඞཁͰ͢ɻ sudo gem install ruby18_source_location 13೥9݄20೔༵ۚ೔
18. 2. Πϯετʔϧ • Windows ࠷ॳʹɺRuby, RubyGems ͸ೖ͍ͬͯ·ͤΜɻ ͜ΕΒ͸ࣗ෼ͰΠϯετʔϧ͠ͳ͚Ε͹ͳΓ·ͤΜɻ ▼Ruby, RubyGems ͷΠϯετʔϥ http://rubyinstaller.org/downloads/ RubyInstallers ͷ߲ʹμ΢ϯϩʔ υϦϯΫ͕͋Γ·͢ɻ޷͖ͳόʔδ ϣϯͷ෺Λམͱ͍ͯͩ͘͠͞ɻ ※ 1.8.7 Ҏ্Ͱ͋Ε͹໰୊ͳ͍ͱࢥ͍·͢ 13೥9݄20೔༵ۚ೔
19. • Windows 2. Πϯετʔϧ ΠϯετʔϥΛىಈ͢Δͱɺ΢Οβʔυ͕։͖·͢ɻ಺༰ʹैͬͯਐΊͯ͘ ͍ͩ͞ɻ͜ΕͰ Ruby, RubyGems ͷΠϯετʔϧ͸׬ྃͰ͢ɻ ࣍ʹɺDEVELOPMENT KIT ΠϯετʔϧͰ͢ɻ ઌ΄Ͳͷμ΢ϯϩʔυϖʔδͷԼʹ DEVELOPMENT KIT ͷμ΢ϯϩʔυ ϦϯΫ͕͋Γ·͢ɻ 13೥9݄20೔༵ۚ೔
20. • Windows 2. Πϯετʔϧ ӈਤͷ࿮ͰғͬͨϑΝΠϧΛ μ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ μ΢ϯϩʔυͨ͠ϑΝΠϧΛىಈ͢ΔͱɺͲ͜ʹల։͞ΕΔ͔ฉ͔Ε·͢ɻ ద౰ͳͱ͜ΖʹσΟϨΫτϦΛ࡞ͬͯల։͍ͯͩ͘͠͞ɻ 13೥9݄20೔༵ۚ೔
21. 2. Πϯετʔϧ • Windows ίϚϯυϓϩϯϓτɺ·ͨ͸ PowerShell Λ։͖ɺઌ΄Ͳల։ͨ͠σΟϨΫ τϦʹҠಈͯ͠ɺԼͷίϚϯυΛ࣮ߦ͍ͯͩ͘͠͞ɻ ໰୊͕ͳ͚Ε͹ɺ͜ΕͰΠϯετʔϧ׬ྃͰ͢ɻ ruby dk.rb init ruby dk.rb install gem update --system gem install wdm middleman 13೥9݄20೔༵ۚ೔
22. 3. ։ൃͷྲྀΕ 13೥9݄20೔༵ۚ೔
23. 3-1. ϓϩδΣΫτͷ࡞੒ 13೥9݄20೔༵ۚ೔
24. 3-1. ϓϩδΣΫτͷ࡞੒ 13೥9݄20೔༵ۚ೔
25. 3-1. ϓϩδΣΫτͷ࡞੒ middleman init [ϓϩδΣΫτ໊] ·ͨ·ͨօ͞Μେ޷͖ʰࠇ͍ը໘ʱͰ ԼͷҰߦΛॻ͍ͯΤϯλʔԡ͚ͩ͢ʂ 13೥9݄20೔༵ۚ೔
26. 3-1. ϓϩδΣΫτͷ࡞੒ ࣮ߦ͢Δͱɺ[ϓϩδΣΫτ໊] ʹࢦఆ໊ͨ͠લͷσΟϨΫτϦ͕৽ͨʹ࡞੒ ͞Ε·͢ɻ 13೥9݄20೔༵ۚ೔
27. 3-1. ϓϩδΣΫτͷ࡞੒ ࣮ߦ͢Δͱɺ[ϓϩδΣΫτ໊] ʹࢦఆ໊ͨ͠લͷσΟϨΫτϦ͕৽ͨʹ࡞੒ ͞Ε·͢ɻ ӈਤ͸ɺ`middleman init example` Ͱ࡞੒ͨ͠ϓϩδΣΫτ 13೥9݄20೔༵ۚ೔
28. 3-1. ϓϩδΣΫτͷ࡞੒ middleman init [ϓϩδΣΫτ໊] -T [ςϯϓϨʔτ໊] middleman init [ϓϩδΣΫτ໊] --template=[ςϯϓϨʔτ໊] or ϓϩδΣΫτςϯϓϨʔτΛ࢖͍ɺ༷ʑͳεέϧτϯΛ࡞Δࣄ͕ՄೳͰ͢ɻ 13೥9݄20೔༵ۚ೔
29. 3-1. ϓϩδΣΫτͷ࡞੒ • σϑΥϧτͰೖͬͯΔϓϩδΣΫτςϯϓϨʔτ • HTML5 Boilerplate • SMACSS • Mobile Boilerplate • ίϛϡχςΟϓϩδΣΫτςϯϓϨʔτ IUUQEJSFDUPSZNJEEMFNBOBQQDPNUFNQMBUFTBMM • ಠࣗϓϩδΣΫτςϯϓϨʔτ ~/.middleman/ ʹߋʹσΟϨΫτϦΛ࡞ͬͯಠࣗͷϓϩδΣΫτς ϯϓϨʔτΛ௥Ճ͢Δࣄ΋ՄೳͰ͢ɻ 13೥9݄20೔༵ۚ೔
30. 3-2. ϓϨϏϡʔαʔόͷىಈ 13೥9݄20೔༵ۚ೔
31. 3-2. ϓϨϏϡʔαʔόͷىಈ 13೥9݄20೔༵ۚ೔
32. 3-2. ϓϨϏϡʔαʔόͷىಈ middleman server ϓϩδΣΫτ಺͔Βɺʰࠇ͍ը໘ʱΛ࢖ͬͯ ԼͷҰߦΛॻ͍ͯΤϯλʔԡ͚ͩ͢ʂ 13೥9݄20೔༵ۚ೔
33. bundle exec middleman server 3-2. ϓϨϏϡʔαʔόͷىಈ middleman `server` ͸লུ͢Δࣄ΋ՄೳͰ͢ɻ ؀ڥʹΑͬͯ͸ɺઌͷೋͭͷίϚϯυͰΤϥʔ͕ൃੜ͢Δ৔߹͕͋Γ·͢ɻ ͦͷ৔߹͸ɺ`bundle exec` Λઌ಄ʹ෇͚࣮ͯߦ͍ͯͩ͘͠͞ɻ 13೥9݄20೔༵ۚ೔
34. 3-2. ϓϨϏϡʔαʔόͷىಈ 13೥9݄20೔༵ۚ೔
35. 3-2. ϓϨϏϡʔαʔόͷىಈ 13೥9݄20೔༵ۚ೔
36. 3-2. ϓϨϏϡʔαʔόͷىಈ 13೥9݄20೔༵ۚ೔
37. 3-2. ϓϨϏϡʔαʔόͷىಈ http://0.0.0.0:4567/ or http://localhost:4567/ 13೥9݄20೔༵ۚ೔
38. 3-2. ϓϨϏϡʔαʔόͷىಈ http://0.0.0.0:4567/ or http://localhost:4567/ 13೥9݄20೔༵ۚ೔
39. 3-2. ϓϨϏϡʔαʔόͷىಈ http://0.0.0.0:4567/ or http://localhost:4567/ 13೥9݄20೔༵ۚ೔
40. 3-2. ϓϨϏϡʔαʔόͷىಈ http://0.0.0.0:4567/ or http://localhost:4567/ 13೥9݄20೔༵ۚ೔
41. 3-3. Ϗϧυ 13೥9݄20೔༵ۚ೔
42. 3-1. ϓϩδΣΫτͷ࡞੒ 13೥9݄20೔༵ۚ೔
43. 3-1. ϓϩδΣΫτͷ࡞੒ middleman build ϓϩδΣΫτ಺͔Βɺʰࠇ͍ը໘ʱΛ࢖ͬͯ ʢҎԼུʣ 13೥9݄20೔༵ۚ೔
44. ؀ڥʹΑͬͯ͸ɺઌ΄ͲͷίϚϯυͰΤϥʔ͕ൃੜ͢Δ৔߹͕͋Γ·͢ɻ ͦͷ৔߹͸ɺ`bundle exec` Λઌ಄ʹ෇͚࣮ͯߦ͍ͯͩ͘͠͞ɻ 3-3. Ϗϧυ bundle exec middleman build Ϗϧυʹ੒ޭ͢Δͱɺ:build_dirʢσϑΥϧτ͸ buildʣʹ੩తϑΝΠϧΛ ॻ͖ग़͠·͢ɻ 13೥9݄20೔༵ۚ೔
45. 3-4. ͓͞Β͍ 13೥9݄20೔༵ۚ೔
46. 3-4. ͓͞Β͍ middleman init my_project ϓϩδΣΫτΛ࡞ͬͯ 13೥9݄20೔༵ۚ೔
47. 3-4. ͓͞Β͍ middleman init my_project ϓϩδΣΫτΛ࡞ͬͯ cd my_project ࡞ͬͨϓϩδΣΫτʹҠಈͯ͠ 13೥9݄20೔༵ۚ೔
48. 3-4. ͓͞Β͍ middleman init my_project ϓϩδΣΫτΛ࡞ͬͯ cd my_project ࡞ͬͨϓϩδΣΫτʹҠಈͯ͠ middleman server ϓϨϏϡʔαʔόΛىಈ͢Δ middleman build Ϗϧυ͢Δ or 13೥9݄20೔༵ۚ೔
49. 3-4. ͓͞Β͍ middleman init my_project ϓϩδΣΫτΛ࡞ͬͯ cd my_project ࡞ͬͨϓϩδΣΫτʹҠಈͯ͠ middleman server ϓϨϏϡʔαʔόΛىಈ͢Δ middleman build Ϗϧυ͢Δ or ऴΘΓ 13೥9݄20೔༵ۚ೔
50. 4. ͦͷଞ 13೥9݄20೔༵ۚ೔
51. 4. ͦͷଞ ςϯϓϨʔτΤϯδϯɾϓϦϓϩηοα • ERb • Haml • Sass • Slim • Erubis • Less CSS • Builder • Liquid • RDiscount • Redcarpet • BlueCloth • Kramdown • Maruku • RedCloth • RDoc • Radius • Markaby • Nokogiri • CoffeeScript • Creole (Wiki markup) • WikiCloth (Wiki markup) • Yajl • Stylus 13೥9݄20೔༵ۚ೔
52. 4. ͦͷଞ ֦ுػೳ • sprockets • frontmatter • cache_buster • relative_assets • asset_host • minify_css • minify_javascript • gzip • assert_hash • directory_indexes • automatic_image_sizes • i18n • livereload ͳͲͳͲ… 13೥9݄20೔༵ۚ೔
53. 5. ·ͱΊ 13೥9݄20೔༵ۚ೔
54. • ϓϩδΣΫτςϯϓϨʔτͰ࡞ۀ͕࢝Ίқ͍ • ϩʔΧϧ Web αʔό͕༻ҙ͞Ε͍ͯΔ • ςϯϓϨʔτΤϯδϯɺ ϓϦϓϩηοαʹରԠ • LiveReload ΍ HTML, CSS, JS ͷ minifyɺ gzip ѹॖͱݴ֦ͬͨுػೳ͕࢖͑Δ • ެࣜαΠτͷ࿨༁͕͋Δʢॏཁʣ 5. ·ͱΊ 13೥9݄20೔༵ۚ೔
55. 5. ·ͱΊ ͱʹ͔͘؆୯ɻ આ໌͖͠Ε͍ͯͳ͍ػೳ୔ࢁɻ ڵຯ͕ग़ͨΒ࿨༁αΠτΛݟ͍ͯͩ͘͞ɻ http://middleman-guides.e2esound.com/ ੩తαΠτδΣωϨʔλ͸ଞʹ΋͔ͳΓͷ਺͋Γ·͢ɻ ࢖͍ൺ΂ͯࣗ෼ʹ߹ͬͨ෺Λݟ෇͚ɺ໘౗ͳ࡞ۀΛָʹ͠· ͠ΐ͏ɻ 13೥9݄20೔༵ۚ೔
56. Ҏ্ ͋Γ͕ͱ͏͍͟͝·ͨ͠ 13೥9݄20೔༵ۚ೔