======================
目的
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
開発サイクル
-
サーバー起動
$ cd introduction $ middleman server -
ブラウザで確認
http://localhost:4567/ -
静的サイトのエクスポート
$ cd introduction $ middleman build
プロジェクトテンプレート
-
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 -
モバイルテンプレートの作成
$ 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'
}
}