多機能型アプリ

LESSだけでなく，SassやCoffeeScript，Hamlなど，今風の言語のコンパイルにも対応しているものを以下にまとめます。

今回ご紹介するものは，ファイル（HTML／LESS／CSS／画像など）を更新すると自動的にリアルタイムにブラウザのリロードまでしてくれるライブリロード機能がそれぞれ付いています。コーディングする際は「CSSを更新して，ブラウザをリロード」というアクションを，何百回と繰り返していることでしょう。また，LESS記法は慣れるまではどうしても，想像したものとコンパイルされた結果のCSSが違ってしまうことがあります。そういった問題に，ライブリロード機能は力強い助けになってくれるでしょう。

慣れないうちほどブラウザの確認頻度は高いので，LESS初心者の方にこそ強くおすすめします。

CodeKit

【対応OS】

Mac

【価格】

25ドル

【対応言語】

LESS，Sass／Scss，Stylus，Jade，Haml，Slim，CoffeeScript

【特徴】

ファイル保存時の自動コンパイルに対応

ファイル更新時にライブリロード

複数ファイル（CSS／JavaScript）の結合に対応

画像圧縮が可能

CSS／JavaScriptバリデータ付き

フォルダ／ファイルごとに出力先を設定できる

前述のLESS.appの後継として，大幅に機能拡張をして作られたのがこちらのコンパイラです。

非常に高機能なので説明しきれないのですが，1つ1つの機能が細かく設定可能で，かつキレイなインターフェースにまとめられています。minifyのより細かいオプション，画像パスの相対パスへの変換など，ほかのアプリにはない細かな便利機能がもりだくさんです。

画像圧縮や多人数でのプロジェクト共有なども可能で，「⁠コンパイラ」という枠には留まらないアプリになっています。

有料ではありますが，使いこなせれば十分その価値があるアプリだと思います。

LiveReload

【対応OS】

Mac／Windows／Linux

【価格】

9.99ドル

【対応書式】

LESS，Sass／Scss，Compass，Stylus，CoffeeScript，IcedCoffeeScript，Eco，Slim，Haml，Jade

【特徴】

ファイル保存時の自動コンパイルに対応

フォルダ／ファイルごとに出力先を設定できる

ファイル更新時にライブリロード

サーバーサイドのファイル更新時にもライブリロードが可能

Win／Mac両対応の多機能コンパイラ。元々は，ファイルを更新した際のライブリロード機能を提供するアプリだったようですが，最近の流行に合わせ，コンパイラの機能も徐々に実装されていきました。

そのため，コンパイラとしての機能は必要最低限ではありますが，Win／MacのGUIのアプリとしてだけではなく，Rubyやnode.jsなどのサーバーサイドでもライブリロード機能を実行できるのが特徴です。

今回の趣旨と若干外れてしまいますが，サーバーサイドで動くWebサービスなどでも「CSSが更新されたら，自動的にブラウザをリロードする」などの作業が可能になっています。

Prepros

【対応OS】

Mac／Windows

【価格】

無料

【対応書式】

LESS，Sass／Scss，Compass，Stylus，CoffeeScript，Haml，Jade，Slim

【特徴】

ファイル保存時の自動コンパイルに対応

フォルダ／ファイルごとに出力先を設定できる

ファイル更新時にライブリロード

httpサーバー機能

今年の5月にリリースされたばかりの新しいコンパイラです。ライブリロード対応しているWindows対応アプリは非常に珍しいですね。

コンパイラとしての標準機能をきちんと押さえていることはもちろんですが，Preproxの最大の特徴は，httpサーバー機能を内蔵していることです。特別な処理をせず，1クリックでローカルサーバーを起動できます。これにより，スマートフォンや他デバイスでの確認が非常に容易になります。

もちろん，ライブリロードにも対応しているので，ローカルのファイルを更新したらiPhone／Andoroid／iPad／Chrome／Safari／IEがリアルタイムに自動リロードされることまでできてしまいます。

複数端末での同じ検証が必要であるCSSのコーディングにおいて，大幅に時間を短縮する手助けとなってくれるでしょう。

スタティックサイトジェネレーター

PHPなどのサーバーサイド言語を使わずに，独自の書式を使って動的なコンテンツを作成する「スタティックサイトジェネレータ」というジャンルのアプリが出始めました。代表的なのは以下のものです。

MIXTURE

http://mixture.io/

Hammer

http://hammerformac.com/

これらには，「⁠コンパイル」ではなく「build」もしくは「publish」という機能が付いています。コンパイラのおもな機能は「変換すること」ですが，これらは「サイトを作り上げて，公開する」までの機能が提供されているのです。

このほか，本連載の趣旨とは外れるので詳細は省きますが，プロジェクト管理を含めた総合環境なども視野に入れてみてもいいでしょう。

筆者の利用環境

突然現れた新星「Prepros」に画像圧縮ソフトを併用

筆者は，本連載を書いている途中までCodekitを利用していました。コンパイラを選ぶ基準は，下記のようなものでした。

• テキストエディタは好みのものを使いたい
• コンパイラに依存するコード（機能）を利用しない
• ライブリロードなどが付いている

Codekitは十分にこれらの要件を満たしてくれて，かつ画像圧縮の機能も付いています。

とはいえ，CodeKitだけでは圧縮率が少し心もとないため，画像圧縮ソフトは別のものも同時に利用していました。ですから，機能要件としてはLiveReloadと画像圧縮ソフトを併用する形でも十分だったと言えます。

そこに突然現れたのがPreprosでした。筆者は現在Preprosをメインのコンパイラとして利用していますが，決め手となったのはhttpサーバー機能です。

Codekitはとても便利だったのですが，スマートフォンなどで確認するにはどうしてもサーバーにUPする，もしくはローカルサーバーを立てるしかありませんでした。結果として，MAMP+Adobe Edge Inspect+Codekitという組み合わせで確認作業を行っていました。

それがPreprosの場合，インストールするだけでもう実現ができてしまいます。UIも非常にわかりやすくまとめられています。オープンソースで，バージョンアップも頻繁に行われています。

CodeKitの方がより細かなコンパイルの設定ができるので，すべての面でPreprosが上回っているとは言えません，しかし，総合的にみると，現状Preprosに軍配が上がるのではないでしょうか。

無料なので，「⁠LESSを始めてみよう」と思ったら，ぜひPreprosから始めてみることをオススメします。これだけ機能が充実していて，フリーでWindows／Macに両対応しているアプリはほかにありません。

ほかにも，node.jsやRubyなどサーバーサイドプログラムを利用することによりコンパイルを行うことはできますが，本連載が「気楽に初めてLESSを触る方に」という想定なので，除外させていただきました。

LESSをステップに他言語の利用も視野に

さて，全11回にわたる連載，いかがでしたでしょうか？

本連載はLESSのみにフォーカスをあてましたが，実際のところ「LESSが常に一番最適だ！」とは，筆者も考えておりません。状況に応じて，Sass／Scss／Stylusなど柔軟に使い分ける必要が出てくると思います。

これらの書式は，どれも以下のような着想の下に作られているので，基本概念は変わりません。

• CSSを速く書きたい
• CSSの管理を楽にしたい

環境準備の容易さや，CSSの書式との親和性は，LESSの優れた点であると思います。CSSの拡張書式の第一歩として，とても学びやすいといえるでしょう。

本連載をお読みになった方が，LESSを足がかりに，さらに仕事の幅を広げていただければ幸いです。

それではまたいつかお会いしましょう。