[Middleman 3] Middleman: 付属するプロジェクトテンプレートと独自テンプレートの追加

公開日: 2014/02/17
更新日: 2019/09/14

付属テンプレートが生成するファイルと、独自テンプレートの追加方法を確認します。

[markdown]
> * [Middleman: はじめに](http://middlemanapp.com/jp/basics/getting-started/)

以下の続きです。

> * [Middleman: 新規プロジェクトを始める | deadwood](https://www.d-wood.com/blog/2014/02/14_5479.html)

“`prettyprinted
% middleman version
Middleman 3.2.2
“`

## 付属プロジェクトテンプレート

いくつかのプロジェクトテンプレートが用意されている。

* default
* html5
* mobile
* smacss
* empty

“`prettyprinted
% middleman init –help
Usage:
middleman init NAME [options]
Options:
-T, [–template=TEMPLATE] # Use a project template: default, html5, mobile, smacss, empty
# Default: default
[–css-dir=CSS_DIR] # The path to the css files
[–js-dir=JS_DIR] # The path to the javascript files
[–images-dir=IMAGES_DIR] # The path to the image files
[–rack] # Include a config.ru file
[–skip-gemfile] # Don’t create a Gemfile
-B, [–skip-bundle] # Don’t run bundle install
[–skip-git] # Skip Git ignores and keeps
Create new project NAME
“`

### default

“`prettyprinted
% middleman init test_middleman
“`

“`prettyprinted
test_middleman
├── Gemfile
├── Gemfile.lock
├── config.rb
├── config.ru
└── source
├── images
│   ├── background.png
│   └── middleman.png
├── index.html.erb
├── javascripts
│   └── all.js
├── layouts
│   └── layout.erb
└── stylesheets
├── all.css
└── normalize.css
“`

### html5

[HTML5 Boilerplate](http://html5boilerplate.com/)

“`prettyprinted
% middleman init test_middleman_html5 –template=html5
“`

“`prettyprinted
test_middleman_html5
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
├── 404.html
├── LICENSE.md
├── README.md
├── apple-touch-icon-114×114-precomposed.png
├── apple-touch-icon-144×144-precomposed.png
├── apple-touch-icon-57×57-precomposed.png
├── apple-touch-icon-72×72-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
“`

### mobile

[Mobile Boilerplate](http://html5boilerplate.com/mobile/)

“`prettyprinted
% middleman init test_middleman_mobile –template=mobile
“`

“`prettyprinted
test_middleman_mobile
├── 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
“`

### smacss

[SMACSS](http://smacss.com/)

“`prettyprinted
% middleman init test_middleman_smacss –template=smacss
“`

“`prettyprinted
test_middleman_smacss
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
├── _footer.haml
├── index.html.haml
├── layouts
│   └── layout.haml
└── stylesheets
├── base
│   ├── README.markdown
│   ├── base.scss
│   └── normalize.scss
├── layout
│   └── README.markdown
├── modules
│   └── README.markdown
├── states
│   └── README.markdown
└── style.css.scss
“`

### empty

empty

“`prettyprinted
% middleman init test_middleman_empty –template=empty
“`

“`prettyprinted
test_middleman_empty
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
“`

## 独自のプロジェクトテンプレートを追加する

`~/.middleman` にカスタムテンプレートのスケルトンを入れると、`–template=foo` フラグで指定できるようになるよう。

有志の開発したテンプレートも、ここに設置するよう指示されていました。

> * [コミュニティで開発されたテンプレート](http://directory.middlemanapp.com/#/templates/all)
> * [Middleman の自分用テンプレートを簡単に作る方法 | e2esound.com業務日誌](http://www.e2esound.com/wp/2013/12/07/how_to_create_middlemans_custom_template_as_easy/)
> * [Middleman の自分用テンプレートを作る方法 (上級者編) | e2esound.com業務日誌](http://www.e2esound.com/wp/2013/12/07/how-to-create-middlemans-custom-template-with-template-rb/)
[/markdown]