CSSの作成を効率化! EclipseでLESSを編集するためのプラグイン

LESSとは?

Webページにおいて、コンテンツをHTMLに、デザインをCSSに分離するという手法が一般的になって久しい。CSSはシンプルな記法を持つが、その反面、同じような記述を何度も行わなければならず、記述が冗長になりがちでメンテナンス性にも問題がある。LESSはこの問題を解決するために、CSSをプログラマティックに記述できるようにするものだ。

LESSを使用することで、変数や関数などを用いた共通化を行うことができる。また、LESSで記述したスタイルシートは、Webブラウザ上でJavaScriptを用いて動的にCSSに変換したり、lesscというコンパイラを用いて事前にCSSに変換しておくこともできる。スタイルの作成中など表示を逐次確認したい場合は動的に変換、実際にサイトを公開する際にはlesscで変換したCSSを使用するといった使い分けが可能だ。最近ではWebフレームワークでもLESSをサポートしたものが登場してきており、注目を集めている。

今回はEclipse上でLESSを編集するためのプラグインを紹介する。

Eclipse plugin for LESSのインストール

Eclipse plugin for LESSは、LESSを編集するためのエディタを提供するプラグインだ。

Eclipse plugin for LESSの動作には、Xtextが必要となる。予め以下の更新サイトからインストールしておいて欲しい。

http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/

Eclipse plugin for LESS自体は以下の更新サイトからインストールできる。この更新サイトでは複数のプラグインが提供されているが、「LESS」にチェックを入れてインストールすればよい。

http://www.normalesup.org/~simonet/soft/ow/update/

なお、後述するようにLESSコンパイラをEclipseから実行するには、別途lesscコマンドをインストールしておく必要がある。

Eclipse plugin for LESSの主な機能

LESSエディタは構文の強調表示、コード補完、アウトライン表示、エラーチェックといった基本的な機能はもちろんのこと、インデントの自動調節、CTRL＋/によるコメントの切り替え、CTRL＋Oによるクイックアウトライン、F3やCTRL＋クリックによるハイパーリンク機能など細かい部分の使い勝手も上々だ。

エラーチェックは構文だけでなく、変数の存在の有無といった部分までチェックが可能で、種類は少ないものの、クイックフィックス機能 (エラー箇所でCTRL＋1)まで実装されている。現在は実装されていないが、Webサイトの記述を見ると将来的にはリファクタリング機能が実装される可能性もありそうだ。

また、LESSファイルをCSSに変換するコンパイラを実行することもできる。ただし、予めLESSコンパイラ (lesscコマンド)をインストールしておく必要がある。lesscコマンドはNode.jsのパッケージ管理システムであるnpm経由でインストールする必要があり、準備がやや面倒だ。できればEclipseプラグイン単体でCSSへの変換まで行えるようになると、さらに使い勝手がよくなるのではないだろうか。

まとめ

Eclipse plugin for LESSはまだ公開されて日の浅いプロダクトだが、かなり細かい部分まで作りこまれており、使い勝手のよいエディタに仕上がっている。開発も活発で今後の改善にも期待が持てる。EclipseでLESSを編集するのであれば、是非試してみて欲しいプラグインだ。

また、前述の通り、今回紹介したEclipse plugin for LESSは、Xtextというツールをベースにしている。Xtextは、Eclipseの開発元であるEclipse Foundationのサブプロジェクトの1つで、プログラミング言語の構文定義からパーサやエディタなどを自動生成するためのものだ。主にDSLの作成などに用いられることを想定したツールキットだが、以前、本連載で紹介したXtendのように本格的なプログラミング言語を作成することもできるポテンシャルを持っている。

一般的にプログラミング言語の構文をサポートするエディタの開発は非常に手間のかかるものだが、Eclipse plugin for LESSはXtextを使用することで、高機能なエディタを開発することに成功しており、Xtextを活用したプラグインの好例といえるのではないだろうか。