【超初心者向け】静的サイトジェネレーター「Middleman(ミドルマン)」が便利すぎることと依存し過ぎると危険な話
「静的サイトジェネレーター」が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の場合、ターミナルから二・三種類のコマンドを入力するだけで使用です。
手順1、ターミナルを起動
(アプリケーションフォルダ>ユーティリティフォルダ>ターミナル)
デザイナーの方はこの画面を見るとアレルギーが出てしまう方もいると思いますが、拒否反応を乗り越えればすごく便利です。
手順2、ターミナルに以下のコマンド記入!
—
$ xcode-select –install
—
コマンドを押して「エンターキー」を押すと…エラー。。。( ´Д`)y━・~~
もしエラーメッセージに「…permisson…」と書いてあれば、権限に関するエラーです。
コマンドを以下に変更して再挑戦。
—
$ sudo xcode-select –install
—
するとPCのパスワードを確認してくると思います。
パスワードを入力してエンターを押すと、「Xcodeをインストールする?」ってログが表示されます。
なのでインストールしてください。
続いて、以下のコマンドを入力。
—
$ gem install middleman
—
コマンドを入力するとインストールが始まります。
1~2分でインストールが完了。
これだけでMiddlemanが使用可能になります。
で、どうやって使うの?
制作に必要なコマンドは最低3種類、この3種類のみ覚えてしまえば超便利で超素早い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ディレクトリの中身を希望するサーバへアップロードして完了になります。
他にもこんなことができるよ!でもこんな嫌な部分もあるよ!
ミドルマンのいいところ
- アドオンが豊富…htmlはもちろん、全てのファイルを軽量化するmin化や、簡単にhtmlが記述できるslimなどもアドオンで実現可能です。
- パッケージデータを一式共有することで、他者も作業が可能です。
- 専用のプログラムコードもとっても簡単で、参入しやすい。
ミドルマンの嫌なところ
- OSアップデートなどが原因で、突然作動しなくなることがあり、超焦る。。。
- 原因不明のbuildエラーにより書き出しができなくなる。。。
- 一部のCDNがエラーになり、手が付けられない部分でエラーが発生、超焦る。。。
嫌な部分があるので、Middlemanがベストな静的ジェネレーターとは思えませんが、便利な部分も多くあります。
良かったから使ってみてください!
ディスカッション
コメント一覧
まだ、コメントがありません