Middleman

Middleman: 作業を効率化するフロントエンド開発ツール

静的なサイトを生成するジェネレータ式のWeb開発フレームワーク。
サーバサイドでのWebサイトの動的構築をせずに、手元でのコンパイルで代用していこうという思想で作られている。

動的な要素を含まないサイトの開発ではいまのところ決定版といった感じ。
OCSoft含め、自分用のサイト開発は大抵これで行っている。

Middlemanの考え方

これだけの説明だといまいちぴんと来ないかもしれない。分かりやすいのはブログ機能。
Middlemanのブログは、PHP等をサーバ側で動作させるわけではなく、記事に対応するファイルを手元(つまり、あなたのPC上)で編集することで実現する。手元でblogコマンドを実行するとテキストファイルが作られるので、それを直接編集した後、buildコマンドでコンパイルすると、あたかも通常のブログサイトのようなファイル構成のHTMLファイル群ができあがる。あとはそれをFTPなりでアップロードするだけ。
ブログがお手軽な理由は自前で同じようなHTMLを何度も書かなくていい、記事部分だけ入力すればいいという部分にあるわけだけど、それって別にサーバ側で動かさなくても手元でできるじゃん? というような考え方のツールだと思っていただきたい。

最終的にできあがるファイル群はただのHTMLなので、使用するサーバにPHPが入っていようがいまいが問題なく動作する。(これはレンタルサーバでWebサイトを公開したい人には非常にありがたい設定だと思う)
ただし、ブログにつきもののコメント機能等、動的な機能は当然つけられない。必要なら別途外部プラグイン等で足す必要がある。Web拍手的なメッセージサービスや、discusのような外部コメントサービスなど。

機能性と長所、短所

非常に高機能かつ柔軟。sassやcoffeescript、yamlやjson、markdown等との連携が容易で、静的サイトという条件下でやりたいことはほぼ何でもできる。

例えばこのサイト(OCSoft)は本文をMarkdownで書き、各ページで共用するレイアウト部分をerbで書いている。また、ソフトウェアの情報はjsonファイルにまとめてあって、各ソフトウェアページのソフト情報のテーブルはjsonから情報を読み出すことで自動生成されていたりする。

erbが使えるということはrubyのプログラミングができてしまうので、本文中に<%=Time.new()%>とか書けばこうなる。
2017-04-02 14:16:31 +0900
これはこのページを(僕の)手元で生成した日時。これを利用すると、毎年忘れがちな、フッタにあるコピーライト表示の年度更新を自動化したりできるわけです。

こういう感じでWebサイトにありがちな共通パーツをライブラリのような形で切り離していくことで、冗長になりがちなペラサイトの構築をDRYにできる。
手元でコンパイルした後は単なるファイルとしてアップロードできるので、どんなサーバにも上げられるしページ読み込みも非常に高速。

短所としては、前述のように外部要素に頼らないと動的なコンテンツを組み込めないこと。これはフレームワークの特性上仕方がない。
それから、コンソールでのコマンド実行と、若干のrubyの知識が要求されること。この部分が、このフレームワークを本来必要とする人たちに対するハードルを上げてしまっているところがあるように思う。

他に目立った粗は見当たらない。プログラマなら使うべき。Webデザイナー・コーダーの人も静的サイトを作る案件があるなら使うべき。
非プログラマでも、ちょっと頑張って一度使い方を覚えると、HTMLを直打ちするよりははるかに早くサイトを作れるのでおすすめしたい。同人をやっていてレンタルサーバ上に個人サイトを作っている人なんかには特に。

以下、Middlemanの導入法と簡単な使い方、および個人的にやってるハックやデザインパターン等を記載していく予定。

コンテンツ

(未完成)

環境構築

  • インストール(Windows編)
  • インストール(Mac/Linux編)
  • エディタ(github Atom)の導入

チュートリアル

  • 開発用サーバの起動
  • レイアウトの導入
  • scssの利用
  • erbの利用
  • 変数の利用
  • partialの利用
  • アップロード作業

テクニック

  • json/yamlを用いたデータの切り出し
  • ヘルパの利用
  • robots.txt、sitemap.xmlの自動生成
  • bowerとの連携
このページは書きかけです。内容の精度や充実性に問題があるかもしれません。
より有意義な情報源にするため、ご意見ご感想を募集しています。