後藤裕文ブログ - gotto blog

gotto blog

最近の記事

リンク

プロフィール

後藤裕文(ごとうひろぶみ)

提案が多めのソフトウェアエンジニアです。 デザイナーやライターなどエンジニア以外のスタッフと密接に協力してシステムを開発するのを得意にしています。

詳しく読む

2011年05月23日 18時30分

ClassMapperを作りました

BlueprintやBlueTripのような良くできたCSSフレームワークがあります。 これらのフレームワークを使うとHTMLコーディングの作業効率が良くなります。 また、プロトタイプやワイヤーフレームをHTMLで作るときにも便利です。

Blueprint

http://www.blueprintcss.org/

BlueTrip

http://bluetrip.org/

しかし、これらのフレームワークを使うには、HTMLの中にspan-24(ブロックをグリッド24個分の幅にする)のような、レイアウトを直接示すクラス名を書かなくてはいけません。 HTMLで指定するクラス名は文章構造を示す言葉を使いたいので、これはあまりうれしいことではありません。

LESSやSaasを使って文章構造のクラスにCSSフレームワークのクラスの内容を取り込むこともできますが、 CSSフレームワークの書き換えが必要になるケースも少なくありません。

LESS

http://lesscss.org/

Sass

http://sass-lang.com/

両者の比較についてとても参考になる記事がありましたのでリンクさせていただきます。

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 -- Day by Day Infinity – Webな日々(HTML/XHTML/CSS/JavaScript/PHP/CMS)

http://dxd8.com/archives/217/

そこで、CSSフレームワークを使うことにフォーカスしてClassMapperというツールを作りました。このClassMapperをMITライセンスで公開します。

ClassMapperのライセンス

ClassMapperによりHTMLの中のクラスには文章構造を示す名前をつけて、 CSSのクラスにはスタイルのセットに名前をつけるという使い分けができるようなります。 このように分離することで、CSSに文章構造の情報を持ち込まないことと、HTMLにスタイル情報を持ち込まないことの両方が実現できます。 ClassMapperはJavaScriptで記述されているので、ローカルでHTMLコーディングするときにも動作します。

デモ

ClassMapperは下記のページで実際の動作を確認できます。

ClassMapperデモページ

ページのソースを表示するとspan-24のようなレイアウトを示すクラス名がないことがわかります。 しかし、SafariやChromeで要素の詳細を表示してDOMツリーを見ると、動的にspan-24のようなクラスが追加されています。

LESSやSassのようにCSSを書き換えるのではなくHTMLに動的にクラスを追加します。 このため、ほとんどのCSSフレームワークで書き換えは必要ないと思います。

使いかた

以下のリンクからClassMapperのスクリプトとサンプルファイルのアーカイブファイルがダウンロードできます。

classmapper-1.0.zip

アーカイブには次の4つのファイルが含まれます。

style.cmapでHTMLのクラスとCSSのクラスを対応づけます。 構文は次のようにCSSに良く似ています。基本的にできることはこれだけです。

#contents #menu {
   .span-7;
   .colborder;
}

#contentsと#menuはHTMLに記述されたidです。 span-7とcolborderはBlueTripで定義されたクラスです。 span-7はブロックをグリッド7つ分の幅にする、 colborderはブロックの右にグリッド1つ分の幅を取って縦罫線を引くスタイルです。

cmapファイルは次のようにhtmlファイルの中で指定します。 一つのhtmlファイルの中で複数のcmapファイルを指定することもできますので、機能別にファイルを分けて管理することもできます。

<link rel="classmap" type="text/cmap" href="css/style.cmap" />

cmapで定義したクラスのマッピングを行うには、次のようにhtmlファイルでcmap.jsを読み込みます。 ClassMapperは自動的にHTMLに指定されたcmapファイルを探してクラスをマッピングします。

<script type="text/javascript" src="js/cmap.js"></script>

style.cssにはHTMLに記述された文章構造を示すクラスは定義されていません。 スタイルのセットだけが定義されています。 このファイルで定義されたクラス(スタイルセット)はstyle.cmapでHTMLのクラスにマッピングして利用しています。

試しかた

アーカイブファイルのサンプルを試すには上記のアーカイブファイルのほかに、BlueTripとjQueryが必要です。 cmapファイルを書き換えればBlueTrip以外のCSSフレームワークにも対応できます。

BlueTrip

http://bluetrip.org/
右上のDOWNLOADのTARまたはZIPをクリック

jQuery

http://docs.jquery.com/Downloading_jQuery#Current_Release
一番上のCurrent ReleaseのMinifiedをクリック

ダウンロードしたファイルを次のように配置します。

  • index.html
  • css/
    • bluetrip
      • css/…
      • images/…
    • style.css
    • style.cmap
  • js/
    • jquery.js
    • cmap.js

index.htmlをブラウザで開けば動作が確認できます。 処理はすべてブラウザのJavaScripで行われますので、試すためにサーバーにアップロードする必要はありません。

ご意見ご感想はメールフォームからどうぞ。