【超初心者向け】静的サイトジェネレーター「Middleman（ミドルマン）」が便利すぎることと依存し過ぎると危険な話

2019年5月11日

「静的サイトジェネレーター」がWebサイト制作現場で欠かせない存在になりました。
かつては静的なWebサイトにも関わらず、パーツをinclude（インクルード）するためだけにファイルをPHPにしたり、SSIを採用してパーツをincludeしたりしてきました。ただこれらには以下の問題があり、採用はするけどモヤモヤが解消できないことも多々ありました。
・PHPの採用…ヘッダーに採用するPHP Ver.が丸見えになる。※非表示にするのも面倒
・HTMLファイルをPHPのように振る舞わせる….htaccessにて設定が可能。ただ、レンタルサーバによって記述が異なることがあったり、そもそも使用できないこともあり面倒
・SSIの採用…こちらも一部のレンタルサーバでは.htaccessでの設定が必要、面倒。そもそもSSIがあまり好きじゃない！

そんな「面倒」は仕組みを採用せずに、おいしいところだけを実現する静的サイトジェネレーター「Middleman（ミドルマン）」についてご紹介します。

静的サイトジェネレーターって何があるの？

静的サイトジェネレーターは一口に言っても様々な種類があり、それぞれ特徴があります。
Webサイト制作に特化したジェネレーターをいくつかご紹介！

Gulp（ガルプ）…node.jsでオリジナルジェネレーターを作成できます。npmでアドオンをダウンロードして好きにカスタマイズが可能です！
Hexo（ヘクソ？？）…こちらもnode.jsで稼働する静的サイトジェネレーター。便利機能がオールインワン！
Middleman（ミドルマン）…rubyで稼働する静的サイトジェネレーター。今回はこちらについてご紹介します！

何がいいの？Middleman

Middlemanの良さはたくさんありますが、やっぱり以下のことが大きいでしょう！

導入が簡単！コマンドも簡単！
ローカルサーバが簡単に起動する！
SCSSのコンパイル、webpack、HTMLのガッチャンコも一発！

かつてはそれぞれ手動で実施してきたことが、ほぼほぼ自動で出来ちゃいます！

導入が簡単！コマンドも簡単！

お使いのOSがMacの場合、ターミナルから二・三種類のコマンドを入力するだけで使用です。

手順１、ターミナルを起動
（アプリケーションフォルダ＞ユーティリティフォルダ＞ターミナル）
デザイナーの方はこの画面を見るとアレルギーが出てしまう方もいると思いますが、拒否反応を乗り越えればすごく便利です。

手順２、ターミナルに以下のコマンド記入！
—
$ xcode-select –install
—
コマンドを押して「エンターキー」を押すと…エラー。。。( ´Д`)y━･~~
もしエラーメッセージに「…permisson…」と書いてあれば、権限に関するエラーです。

コマンドを以下に変更して再挑戦。
—
$ sudo xcode-select –install
—
するとPCのパスワードを確認してくると思います。
パスワードを入力してエンターを押すと、「Xcodeをインストールする？」ってログが表示されます。
なのでインストールしてください。

続いて、以下のコマンドを入力。
—
$ gem install middleman
—
コマンドを入力するとインストールが始まります。
1~2分でインストールが完了。

これだけでMiddlemanが使用可能になります。

で、どうやって使うの？

制作に必要なコマンドは最低３種類、この３種類のみ覚えてしまえば超便利で超素早いWebサイト制作が実現出来ます。

$ middleman init
プロジェクト作成コマンド
ターミナルでWebサイトを作成したいディレクトリに移動し、このコマンドを入力してください。すると指定したディレクトリにMiddlemanのパッケージがインストールされます。
$ middleman server または $ bundle exec middleman server
ローカルサーバ起動コマンド
Middlemanパッケージがインストールされたディレクトリにて、$ middleman serverコマンドを入力。
するとローカルにサーバが起動します。
起動したサーバは「http://localhost:4567」にて確認出来ます。
$ middleman build または $ bundle exec middleman build
制作データの書き出しコマンド
制作が一通り完了しWebサーバへアップロードする場合は、middleman buildコマンドを入力してください。
するとSCSSのコンパイル、HTMLファイルのガッチャンコ、Webpackまでまとめて書き出しが可能です。
書き出したデータは「build」ディレクトリにまとめられますので、buildディレクトリの中身を希望するサーバへアップロードして完了になります。