Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MIDDLEMAN

809 views

Published on

TISMatsuri第三回のLT資料
MIDDLEMAN

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MIDDLEMAN

  1. 1. MIDDLEMAN @koudaiii
  2. 2. MIDDLEMAN http://middlemanapp.com/jp/
  3. 3. MIDDLEMANを採用してるサイト http://frontcube.com/
  4. 4. MIDDLEMANって? • 静的 Web サイトを作成するためのフレームワーク • RubyとWebフレームワークのSinatraがベース • ERBやSlimなどのテンプレートエンジンをサポート • アセットパイプライン,ローカルデータにYAML • middleman build で公開用にFileをビルド • プロモサイト、blog,help,製品サイトetc *アセットパイプラインとは JavaScriptやCSSを結合したり圧縮したりする。また、CoffeeScriptやSass、ERBの言語を使ってJavaScriptやCSSを書くこともできる
  5. 5. Ruby on Railsをフルで使わないような WebApplicationに最適! しかも、公式サイトが日本語!←
  6. 6. MIDDLEMAN ! $ gem install middleman $ gem install middleman $ middleman init update Gemfile run bundle install from “.” Resolving dependecies… ! $ middleman server == The Middleman is standing watch at http://0.0.0.0:4567 == Inspect your site configuration at http://0.0.0.0:4567/ __middleman/
  7. 7. http://0.0.0.0:4567
  8. 8. MIDDLEMAN ! ディレクトリ構成 $ tree . "## Gemfile "## Gemfile.lock "## config.rb $## source "## images %   "## background.png %   $## middleman.png "## index.html.erb "## javascripts %   $## all.js "## layouts %   $## layout.erb $## stylesheets "## all.css $## normalize.css 5 directories, 10 files image sass,slim,haml,coffeescript Markdownでサイト作れる
  9. 9. MIDDLEMAN ! ビルドコマンド $ middleman build Please report a bug if this causes problems. create build/stylesheets/all.css create build/stylesheets/normalize.css create build/images/background.png create build/images/middleman.png create build/javascripts/all.js create build/index.html 静的HTMLへ変換
  10. 10. deploy • deployの方法もgit,ftp, rsync, sftpといくつか • deploy先はAWS(S3)やGitHub Page、CDN • TISMatsuriではGitHub Pageを使ってます • gem ‘middleman-gh-pages' • rake publishのみで簡単deploy
  11. 11. Template http://directory.middlemanapp.com/#/templates/all
  12. 12. deployment tool http://directory.middlemanapp.com/#/extensions/deployment
  13. 13. TISMatsuri Promotion Site http://matsuri.doyomeki.com/matsuri3/
  14. 14. ちょっとお知らせ アクセス: 弱3,000PV ブラウザ: 1位 Chrome(53%) 2位 Safari(13.46%) 3位 IE(11.11%) 4位 FireFox(10.07%)
  15. 15. 使ってみてよかったこと • Rubyのコミュニティ • bundlerが使えたり、gemが豊富 • YAMLでローカルデータ保存 • ググれば情報がたくさんあって参考になるサイトが豊富 • LiveReload+ChromeでSP/PC画面を編集しながら確認できる • S3やGitHubPageに簡単にDeployができる その他類似ツールでは、JekyllやYeomanがあります:)
  16. 16. Thank you

×