第11回　LESSを書くのに便利なツール

今まで、LESSの書式やファイルについて解説してきましたが、最終回の今回はLESSを書く際に便利なツールを紹介していきます。

筆者がMacユーザーのため、若干Macよりの記事になってしまっている点はご了承ください。

なお、プラグインをインストールすることで、LESSファイルのコンパイル機能を追加できるエディタ（EmacsやCodaなど）もありますが、今回は単体で動作するアプリをご紹介します。

LESS特化型ツール

LESSのために作られており、その分、どれもUIがシンプルで、使い方に悩むこともありません。

基本機能として各コンパイラともに以下の基本機能を備えています。

エラー出力
minifyの選択
出力先の設定

これらの機能については、各コンパイラで特に際立った差はありません。

ここではさらにそれぞれで特徴的な機能を紹介していきます。

LESS.app

【対応OS】

Mac

【特徴】

ファイル保存時の自動コンパイルに対応
フォルダ／ファイルごとに出力先を設定できる

MacにおけるLESSの標準的コンパイラであり、初めて作られたGUIアプリでもあります。LESS自体のバージョンアップにも素早く対応しており、非常に安定感があります。

特徴は、ファイルを保存すると自動的にコンパイルしてくれること。一度設定してしまえば、コンパイラの存在を気にする必要がありません。

ただ、こちらのアプリは2015年で開発がストップし、以降は後述のCodeKitへ移行することが発表されているので、注意してください。

WinLESS

【対応OS】: Windows
【特徴】: ファイル保存時の自動コンパイルに対応

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

Windowsにおける標準的コンパイラ。こちらは前述のLESS.appの影響を受けて、Windows用として作られたアプリです。

そのため、インターフェースや機能はLESS.appと非常によく似ています。LESS.appを使ったことがある方は、違和感なく使うことができるでしょう。

SimpLESS

【対応OS】: Windows／Mac
【特徴】: ファイル保存時の自動コンパイルに対応

webkitなどCSS3のベンタープリフィックスを補完してくれる（Windowsのみ）

Windows／Mac両対応なのが特徴。バージョン／環境を統一させるのに向いています。

また、Windows版のみになってしまうのですが、「⁠-webkit」や「-moz」などのベンダープレフィックスを自動で付与してくれる機能があるのも、ほかのコンパイラにない特徴です。クロスブラウザ対応がとてもかんたんになりますね。コンパイラにない特徴です。クロスブラウザ対応がとてもかんたんになりますね。

ただ、そうなると実質的にコンパイラの機能に依存したコードを書くことになってしまうので、コンパイラの乗り換えが困難になってしまうという問題もあります。

筆者としては、クロスブラウザ対応は本連載の第7回の記事のように、mixinを用いて実現するほうが望ましいと考えています。

Crunch!

【対応OS】: Windows／Mac
【特徴】: LESSエディタが付いている

Adobe Airで作られたWin／Mac両対応コンパイラ。機能は非常にシンプルで、前述のと比べると、機能で劣る部分があります。

その代わり、こちらは珍しくLESSのためのエディタ機能が付いており、作成／編集からコンパイルまでを1つのアプリでできてしまいます。

エディタとしての機能は、やはり単体のエディタと比べるとかなり劣ってしまいますが、思いついたコードを試してみたいときに手軽に試せるため、機能が少ないわりに便利に使えます。筆者は本連載のサンプルコードを書くときにも活用しました。

多機能型アプリ

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を足がかりに、さらに仕事の幅を広げていただければ幸いです。

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