2014年7月30日水曜日

Domino Designer で Less to CSS!

みなさん!XPages開発していますか!?

はい、お久しぶりです。しばらくサボってました。すみません。

OpenNTFで非常に便利そうなものを見つけたので紹介します。

LESS CSS Builder for Domino Designer

OpenNTFでLESS  CSS  Builder  for  Domino  Designer  のプラグインが公開されています!

Domino Designerでは、これまでlessのエディタがなく、編集できませんでしたし、当然コンパイルもできませんでした。

このプラグインを入れると、Lessの編集ができ保存時に自動的にCSSの生成を行ってくれます。

いままでは、私はオンディスクプロジェクトで出力したファイルをSublimeTextを使ってLessファイルを編集していたのですが、そんな必要も無くなりそうです。

そもそも Less ってなに?

という人もいると思うので、ちょっと解説。

CSSをメンテンナンスしていると、ローカルルールに従ってセレクタの親子関係を綺麗に整えたりしようとするのですが、複数人で編集したりCSSが長大になると把握が非常に難しくなって、結局非常に煩雑なり、とても人様にお見せできないものが出来上がってしまうことがよくあります。

また、たとえば色調を統一したいのですが、あらゆるところに色コードを書かざる得ないので、一括の変更などが難しいです。

そんなCSS格闘家の救いとなるのがLessなのです!

Lessの特徴

  • セレクタを階層構造で記述できる!
  • ミックスインで、複数のスタイル指定を定義できる!
  • 変数が利用できる!
  • コンパイラが構文エラーを教えてくれる!
  • 複数のファイルに分割して編集->1つのCSSにコンパイルできる!

どうです?これ聞いただけでもよだれ出てきません?私は出てきました。じゅるるん♪

でも一から勉強するのも大変・・・ということはありません。LessはCSSの仕様を拡張している、つまりCSSとしても書けるので、CSSを知っていればLessをマスターするのも容易いです。

ちなみに、同様なCSS生成(コンパイラ)ツールにSassというのもあり、どちらかと言えばSassの方が主流かな?と思いますが、Lessでも十分な効果を実感できると思いますよ!

Domino Designer にプラグインを導入しよう

Lessの使い方はあとに回して、まずはプラグインを導入しましょう。

Eclipseのプラグインとして配布しているので、まずDesignerのプリファレンスで「Eclipseプラグインのインストールを有効にする」にチェックを入れておきましょう。

イメージ

こちらから"xspless-r1.zip"ファイルをダウンロードして、適当なところに展開します。

Designerのメニュー[ファイル]-[アプリケーション]-[インストール]をクリックします

イメージ

「インストール/更新」のダイアログでは、"インストールする新しフィーチャーの検索"を選択して[次へ]を押します。

イメージ

「アプリケーションのロケーション」のダイアログでは、[フォルダー・ロケーションの追加]をクリックして、上で展開したフォルダの中の"org.openntf.xsp.less.builder.update"のフォルダを選択します。

イメージ

「ローカルサイトの編集」ダイアログでは、そのまま次へを押します。

イメージ

「更新」のダイアログでは、すべてのチェックボックスにチェックを入れて[次へ]を押します。

イメージ

「インストール」のダイアログでは、ライセスの内容をヨクヨンデ(棒)"使用条件の条項に同意します"を選択して[次へ]を押します。

イメージ

ライセンスは Apache License v2.0のようですね。

「インストール」のダイアログで[終了]を押すと、インストールが実施されます。

イメージ

途中このようなダイアログが出てきたら、自己責任で"このプラグインをインストールする"を選択してください。

インストール処理が完了し、Domino Designerを再起動したら完了です。

Domino DesignerでのLessの使い方

Designerでアプリケーションを開いて、[リソース]->[スタイルシート]にファイルを追加します。ファイル名の最後には必ず".less"をつけます。ここでは"style.less"とします。

"style.less.css"のように勝手に".css"がつきましたが気にしないでください。

アプリケーションのタイトルのところで右クリック->[Add/Remove LESS CSS Nature]をクリックします。すると"style.css"というのができたと思います。

イメージ

これで準備OK!早速 Less の機能を試してみましょう。

Lessを書いてみる

ここではLessの機能について簡単に説明します。詳しくは、本家サイトで確認してくださいね。(^^;

セレクタをネスト化できる

下のコードを"style.less.css"に書いて保存します。そして"style.css"を開くとCSSのコードが書かれているはずです。

less:


div.header{

    font-size: 16pt;

    h3{

        color:red;

    }

}

CSS:


div.header {

    font-size: 16pt

}

div.header h3 {

    color: #f00

}

どうです?簡単でしょ。セレクタが階層構造で記述できるので、整理が非常にしやすくなりました。

実際にはCSSは、ミニマイズされ1行になっていると思います。ミニマイズが嫌な場合は生成されたCSSを[ctrl+shift+F]で整形してくださいね。

変数と計算が使用できる

Less:


@ThemeColor: red;

@HeaderColor: @ThemeColor + #055;

@TableBorderWidth: 3px;

div.header{

    background-color: @HeaderColor;

    font-size: 16pt;

    border-bottom: @TableBorderWidth;

    h3{

        color: @ThemeColor;

    }

}

div.sideBar{

    background-color: @ThemeColor + #099;

}

CSS:


div.header {

    background-color: #f55;

    font-size: 16pt;

    border-bottom: 3px

}

div.header h3 {

    color: #f00

}

div.sideBar {

    background-color: #f99

}

色やサイズを変数で定義できます。また、数値はもちろん、色の計算もできちゃいます。

テーマカラーを変数で定義しておいて、それを元に演算で各エレメントの色を決めておくと、イメージカラーの変更がすごく容易になります。

色変換に関してはビルドインの関数が多数あるので、本家サイトで確認してください。

ミックスインで同じ定義を使いまわす

Less:


.button-temp(@bgaddcolor){

    background-color: @ThemeColor + @bgaddcolor;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold;

}

button,a.button{

    .button-temp(#ccc);

}

button:hover,a.button:hover{

    .button-temp(#999);

}

CSS:


button,a.button {

    background-color: #fcc;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold

}

button:hover,a.button:hover {

    background-color: #f99;

    border: 1px solid #999;

    font-size: 10pt;

    font-weight: bold

}

あたかも関数のような振る舞いが実現できます。

Lessがものすごく強力なのがお分かりいただけましたか?

最後に

ここで紹介したLessの機能はごく一部です。本家サイトで確認して、いろいろな機能を試してみてください。

0 件のコメント:

コメントを投稿