Edited at

Middleman入門

More than 3 years have passed since last update.

======================


目的

Middlemanを使ってサイトの作成・更新が出来るようになる。


前提

ソフトウェア
バージョン
備考

OS X
10.8.5

ruby
1.9.3p392

middleman
3.2.0


構成


  • はじめに

  • テンプレート

  • Frontmatter

  • 動的ページ

  • アセットパイプライン

  • きれいなURL

  • LiveReload

  • ブログ機能


詳細


はじめに


インストール

$ rvm gemset create middle_man

$ rvm use ruby-1.9.3-p392@middle_man
$ gem install middleman


新しいサイトの開発を始める

$ middleman init introduction

$ tree introduction/
introduction/
├── 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


開発サイクル



  1. サーバー起動

    $ cd introduction
    
    $ middleman server



  2. ブラウザで確認

    http://localhost:4567/
    



  3. 静的サイトのエクスポート

    $ cd introduction
    
    $ middleman build



プロジェクトテンプレート



  1. HTML5 Boilerplateプロジェクト作成

    $ middleman init introduction_boilerplate -T=html5

    $ tree introduction_boilerplate/
    introduction_boilerplate/
    ├── Gemfile
    ├── Gemfile.lock
    ├── config.rb
    └── source
    ├── 404.html
    ├── LICENSE.md
    ├── README.md
    ├── apple-touch-icon-114x114-precomposed.png
    ├── apple-touch-icon-144x144-precomposed.png
    ├── apple-touch-icon-57x57-precomposed.png
    ├── apple-touch-icon-72x72-precomposed.png
    ├── apple-touch-icon-precomposed.png
    ├── apple-touch-icon.png
    ├── crossdomain.xml
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── favicon.ico
    ├── humans.txt
    ├── img
    ├── index.html.erb
    ├── js
    │   ├── main.js
    │   ├── plugins.js
    │   └── vendor
    │   ├── jquery-1.8.0.min.js
    │   └── modernizr-2.6.1.min.js
    ├── layouts
    │   └── layout.erb
    └── robots.txt




  2. モバイルテンプレートの作成

    $ mkdir introduction_boilerplate/.middleman
    
    $ cd introduction_boilerplate/.middleman/
    $ middleman init introduction_mobile_boilerplate -T=mobile
    $ cd ..
    $ mv introduction_mobile_boilerplate/ .middleman/
    $ tree .middleman/
    .middleman/
    └── introduction_mobile_boilerplate
    ├── Gemfile
    ├── Gemfile.lock
    ├── config.rb
    └── source
    ├── 404.html
    ├── README.markdown
    ├── crossdomain.xml
    ├── css
    │   └── style.css
    ├── humans.txt
    ├── img
    │   ├── h
    │   │   ├── apple-touch-icon.png
    │   │   └── splash.png
    │   ├── l
    │   │   ├── apple-touch-icon-precomposed.png
    │   │   ├── apple-touch-icon.png
    │   │   └── splash.png
    │   └── m
    │   └── apple-touch-icon.png
    ├── index.html
    ├── js
    │   ├── libs
    │   │   ├── modernizr-custom.js
    │   │   └── respond.min.js
    │   ├── mylibs
    │   │   └── helper.js
    │   ├── plugins.js
    │   └── script.js
    ├── robots.txt
    ├── sitemap.xml
    ├── test
    │   ├── index.html
    │   ├── qunit
    │   │   ├── qunit.css
    │   │   └── qunit.js
    │   └── tests.js
    └── tools
    ├── googleanalyticsformobile
    │   ├── Readme.PDF
    │   ├── aspx
    │   │   ├── aspx1.snippet
    │   │   ├── aspx2.snippet
    │   │   ├── ga.aspx
    │   │   └── sample.aspx
    │   ├── jsp
    │   │   ├── ga.jsp
    │   │   ├── jsp1.snippet
    │   │   ├── jsp2.snippet
    │   │   └── sample.jsp
    │   ├── php
    │   │   ├── ga.php
    │   │   ├── php1.snippet
    │   │   ├── php2.snippet
    │   │   └── sample.php
    │   └── pl
    │   ├── ga.pl
    │   ├── perl1.snippet
    │   ├── perl2.snippet
    │   └── sample.pl
    ├── mobile-bookmark-bubble
    │   ├── COPYING
    │   ├── bookmark_bubble.js
    │   ├── example
    │   │   ├── example.html
    │   │   └── example.js
    │   └── images
    │   ├── arrow.png
    │   ├── close.png
    │   ├── generate_base64_images
    │   └── icon_calendar.png
    └── wspl
    ├── README
    ├── databasefactory.js
    ├── dbworker.js
    ├── dbworker_test.html
    ├── dbworkerstarter.js
    ├── dbwrapper_gears.js
    ├── dbwrapper_gears_test.html
    ├── dbwrapper_html5.js
    ├── dbwrapper_html5_test.html
    ├── dbwrapperapi.js
    ├── dbwrapperapi_test.html
    ├── gears_resultset.js
    ├── gears_resultset_test.html
    ├── gears_transaction.js
    ├── gears_transaction_test.html
    ├── gearsutils.js
    ├── gearsutils_test.html
    ├── global_functions.js
    └── simplenotes
    ├── index.html
    ├── simplenotes.js
    ├── styles.css
    └── template.js



テンプレート


レイアウト

introduction/source/layouts/layout.erb

<html>

<head>
<title>私のサイト</title>
</head>
<body>
<%= yield %>
</body>
</html>

introduction/source/index.html.erb

<h1>Hello World</h1>


カスタムレイアウト

introduction/source/layouts/admin.erb

<html>

<head>
<title>管理エリア</title>
</head>
<body>
<%= yield %>
</body>
</html>

introduction/config.rb

page "/admin/*", :layout => "admin"

introduction/source/login.html.erb

<h1>Login</h1>

<form>
<input type="text" placeholder="Email">
<input type="password">
<input type="submit">
</form>

introduction/config.rb

page "/login.html", :layout => "admin"

ブラウザで確認

http://localhost:4567/login.html


パーシャル

introduction/source/_footer.erb

<footer>

Copyright 2011
</footer>

introduction/source/layouts/layout.erb

<html>

<head>
<title>私のサイト</title>
</head>
<body>
<%= yield %>
<%= partial "footer" %>
</body>
</html>

introduction/source/layouts/admin.erb

<html>

<head>
<title>管理エリア</title>
</head>
<body>
<%= yield %>
<%= partial "footer" %>
</body>
</html>


テンプレートヘルパ


リンクヘルパ

index.html.erb

<%= link_to 'About','/about.html' ,relative: true %>

config.rb

set :relative_links, true


出力ヘルパ

layout.erb

<% if content_for?(:assets) %>

<div><%= yield_content :assets %></div>
<% end %>

index.html.erb

<% content_for :assets do %>

<%= stylesheet_link_tag 'index','custom' %>
<% end %>


タグヘルパ


  • tag

  • content_tag


  • input_tag

    index.html.erb

    <%= tag :img, src: "http://lorempixel.com/400/200/" %>
    
    <br>
    <% content_tag :p, class: "stuff" do %>
    こんにちは
    <% end %>
    <br>
    <%= input_tag :text, class: "demo" %>
    <br>
    <%= input_tag :password, value: "secret",class: "demo" %>



アセットヘルパ

asset.html.erb

<html>

<head>
<%= stylesheet_link_tag 'layout' %>
<%= javascript_include_tag 'application' %>
<%= favicon_tag 'images/favicon.png' %>
</head>
<body>
<p><%= link_to 'Blog', '/blog', class: 'example' %></p>
<p>Mail me at <%= mail_to 'fake@faker.com',"Fake Email Link",cc: "test@demo.com" %></p>
<p><%= image_tag 'padrino.png', width: '35',class:'logo' %></p>
</body>
</html>


フォームヘルパ


フォーマットヘルパ


  • escape_html

  • distance_of_time_in_words

  • time_ago_in_words


  • js_escape_html

    format.html.erb

    <%= simple_format("hellow\nworld") %>
    
    <%= pluralize(2,'人') %>
    <br>
    <%= word_wrap('Once upon a time', line_width: 8 ) %>
    <br>
    <%= truncate("Once upon a time in world far far away", length: 16) %>
    <br>
    <%= truncate_words("Once upon a time in world far far away", length: 4) %>
    <br>
    <%= highlight('Lorem dolor sit', 'dolor') %>



ダミーテキスト



  • dummy.html.erb

    <%= lorem.sentence %>
    
    <br>
    <%= lorem.words 5 %>
    <br>
    <%= lorem.word %>
    <br>
    <%= lorem.paragraphs 10 %>
    <br>
    <%= lorem.paragraph %>
    <br>
    <%= lorem.date %>
    <br>
    <%= lorem.name %>
    <br>
    <%= lorem.first_name %>
    <br>
    <%= lorem.last_name %>
    <br>
    <%= lorem.email %>
    <br>
    <%= tag :img, src: lorem.image('300x400') %>
    <%= tag :img, src: lorem.image('300x400',background_color: '333',color: 'fff') %>
    <%= tag :img, src: lorem.image('300x400',random_color: true) %>
    <%= tag :img, src: lorem.image('300x400',text:'blah') %>



ページクラス



  • layout/layout.erb

    <body class="<%= page_classes %>">
    



カスタム定義ヘルパ



  • config.rb

    helpers do
    
    def some_method
    #...何らかの処理を追加...
    end
    end



  • 外部モジュール

    $ mkdir lib
    
    $ touch lib/custom_helpers.rb



  • lib/custom_helpers.rb

    module CustomHelpers
    
    def some_method
    # ..do something here...
    end
    end



  • config.rb

    require "lib/custom_helpers"
    
    helpers CustomHelpers



  • より簡単な方法

    $ mkdir helpers
    
    $ cp lib/custom_helpers.rb helpers/



Frontmatter



  • YAML

    ---
    
    layout: "layout"
    my_list:
    - one
    - two
    - three
    ---

    <h1>YAMLリスト</h1>
    <o1>
    <% current_page.data.my_list.each do |f| %>
    <li><%= f %></li>
    <% end %>
    </ol>




  • JSON

    ;;;
    
    "layout": "layout",
    "my_list": [
    "one",
    "two",
    "three"
    ]
    ;;;

    <h1>JSONリスト</h1>
    <o1>
    <% current_page.data.my_list.each do |f| %>
    <li><%= f %></li>
    <% end %>
    </ol>




動的ページ


Proxyの定義

$ mkdir source/about

$ touch source/about/template.html.erb



  • about/template.html.erb

    ---
    
    layout: layout
    ---

    <h1>テンプレート</h1>




  • config.rb

    ["tom","dick","harry"].each do |name|
    
    proxy "/about/#{name}.html","/about/template.html", locals: {person_name: name}, ignore: true
    end

    ignore "/about/template.html"




アセットパイプライン


アセットgem

Gemfile

gem "bootstrap-sass", require: false

stylesheets/index.css

/*

*= require bootstrap
*/

body {
font-weight: bold;
}

stylesheets/custom.css

/*

*= require bootstrap
*/

body {
font-weight: bold;
}

layouts/layout.erb

<% if content_for?(:assets) %>

<div><%= yield_content :assets %></div>
<% end %>

index.html.erb

<% content_for :assets do %>

<%= stylesheet_link_tag 'index' %>
<% end %>

dummy.html.erb

<% content_for :assets do %>

<%= stylesheet_link_tag 'custom' %>
<% end %>


きれいなURL



  • ディレクトリインデックス拡張

    activate :directory_indexes
    



LiveReload

config.rb

activate :livereload


ブログ機能

$ middleman init introduction_blog --template=blog

$ cd introduction_blog


記事

2013-11-14-middleman.html.markdown

---

title: Middleman ブログ投稿
---

Hello World


カスタムパス

$ mkdir blog

$ mv 2013-11-14-middleman.html.markdown blog/

config.rb

blog.prefix = "blog"


パーマリンクのカスタマイズ

013-11-14-middleman.html.markdown

---

title: Middleman ブログ投稿
date: 2013/11/14
category: HTML5
---

Hello World

config.rb

blog.permalink = ":category/:title.html"


下書き

blog/2013-11-15-draft.html.markdown

---

title: 作業中
date: 2013/11/15
category: HTML5
published: false
---

完了していない下書き


タイムゾーン

config.rb

Time.zone = "Tokyo"


要約

Gemfile

gem "nokogiri"

config.rb

blog.summary_separator = /(READMORE)/

index.html.erb

<%= article.summary %>

<%= link_to 'Read more...', article %>


カスタム記事のコレクション

config.rb

blog.custom_collections = {

category: {
link: '/categories/:category.html',
template: '/category.html'
}
}


カスタムコレクションヘルパ


参照

Middleman

Middleman日本語ページ

シリーズMiddleman で静的 Web サイトを超速プロトタイピング