Middleman フロントエンドツールで静的サイトを開発
category：web
サイトの目的に合わせて開発ツールを選択するそのベストプラクティスも最近ではそれぞれです。
動的ページ生成のようにサーバに負荷をかけずに、SPA構築のようにエンジニアに負担をかけずに、静的ページのHTMLファイルを生成してくれる静的サイトジェネレーターを導入してみました。
今回はMac OS環境での導入で、必要なRubyもgemもすでに入った状態からスタートです。
Middlemanインストール
ターミナルを使いコマンドラインで指示を出していきます。
$ gem install middleman
完了したら、ちゃんとインストールされているかチェック。
$ middleman version Middleman 3.3.12
sample_siteでMiddleman環境をつくる
Middlemanでスケルトンを作成。
$ middleman init sample_site
sample_siteフォルダができているので、ディレクトリに移動。
$ cd sample_site
Middlemanで起動
$ middleman server
サーバ(//localhost:4567)が起動します。
（コマンドライン参照）
ctrl + C サーバで終了。
公開サーバ等アップするための、各ディレクトリとhtmlやそのほかファイルの生成。
$ middleman build
sample_site内にbuildフォルダが作られ、その中をアップロードすればOK。
ファイル構成
Middlemanをつくるとsample_siteに以下のようなファイル作成され、ディレクトリ構成が確認できます。
index.html.erb
sample_siteのトップページに当たるコンテンツファイルです。
どのレイアウトファイルを参照するのか（Frontmatter）、そのページのユニークなコンテンツを含んだファイルとなります。
※FrontmatterはYAML フォーマットでテンプレート上部に記述することができる ページ固有の変数です。
例：レイアウト(layout.erb)をつかったコンテンツページ
--- layout: layout title: Welcome to Middleman keywords: キーワード,キーワード description: Middlemanトップページです。 ---Middleman is Watching
layouts/layout.erb
大まかなレイアウトの構成情報を含んでいます。
パーシャル機能を使ってヘッダ（_header.erb）やフッタ（footer.erb）などのテンプレートを作成でき、layout.erbはpartial（_header.erb、footer.erb）とコンテンツ（index.html.erb）のレイアウト、含めることができます。
※partial（パーシャル）はアンダースコア_ から始まるファイル名にするのがルールです。
例：パーシャルのヘッダとフッタを共有し、間にコンテンツ要素を配置したレイアウト。
<%= current_page.data.title || "The Middleman" %> <%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %> <%= partial "layouts/header" %> <%= yield %> <%= partial "layouts/footer" %>
Rubyの.erbの拡張子がついたテンプレートファイルとなっていますが、MiddlemanこれらのレイアウトファイルはSlim(smplehtml.slim)、Haml(sample.html.haml)のテンプレートエンジンにも対応しています。
config.rbファイルに参照するフォルダなどの宣言、build時の圧縮、livereloadの有効化などの設定ができます。
livereload使用はインストールが必要です。（ターミナルでコマンド操作）
$ gem install middleman-livereload
インストールしたらconfig.rb内の以下の1行をコメントを外します。
activate :livereload
そしてGemfileにも下の1行を追記し、Middlemanが起動中であれば再起動します。
gem 'middleman-livereload'
SlimやHamlの拡張メタ言語の他にも、cssはSass、JavascriptはCoffeescriptのコンパイラが標準で実装されています。
開発ツールは導入時に、もしかしたら効率が落ちてしまうかもしれませんが、日本語の情報も多くデザインやマークアップの人も取り入れやすいツールかと思います。
静的ページを量産しなければいけない案件など、サイトの要件が合えばmiddlemanを導入して構成の高速化ができれ良いかと思います。
現在、このブログはWordpressで構築されていますが、今後はMiddlemanのブログ機能を使って、完全な静的サイトに再構築したいと思います。
0