WEB掻っ穿じり

WEBデベロッパー備忘録とチャリ

Middleman フロントエンドツールで静的サイトを開発

  category:development

サイトの目的に合わせて開発ツールを選択するそのベストプラクティスも最近ではそれぞれです。

動的ページ生成のようにサーバに負荷をかけずに、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
        

サーバ(http://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

Read Online Documentation

layouts/layout.erb

大まかなレイアウトの構成情報を含んでいます。

パーシャル機能を使ってヘッダ(_header.erb)やフッタ(footer.erb)などのテンプレートを作成でき、layout.erbpartial(_header.erbfooter.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のブログ機能を使って、完全な静的サイトに再構築したいと思います。

comments powered by Disqus