2012の7日目の記事です。そのものを共通ドキュメントにしてしまうとかという点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。スタイルガイドとはなにかスタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品(コンポーネント)をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。styleguidesスタイルガイドをどうやって作るかあらかじめコンポーネント設計ができているという前提で、ソレを元にこうしたスタイルガイドをつくるにはどうすれば良いか。ガイドラインやドキュメントというと、別途そうしたものをパワーポイントなり他のツールでそれらしいものをつくる、という方向に走ってしまうかもしれない。それ自体は問題はないが、問題はメンテナンスされるかどうかだ。開発上の仕様変更もあれば、運用をはじめてから発生する変更もある。それにともないデザインもコードも書き換わるわけなので、仮にスタイルガイドにあたるドキュメントをつくっていたとしても、そちらが更新されていないと意味がなく、より混乱をさせてしまうものになるかもしれない。スタイルガイドは”生きている”ドキュメントでなければいけないスタイルガイドそのものはCSSにおけるスタイルということではなく、他の言語でもあるものだが、ここではCSSスタイルガイドということで話を進める。CSSに記述されたルールセットが何を意味するのか、何をするものなのか、というのはコメントという形で書くことができる。/*基本的なボタンのスタイル。#CCC;...}/*"保存"や"完了"など主要なボタンのスタイル。.btnをベースとし、拡張する。#33FF00;...}CSSの設計としてのわかりやすさを保つことはもちろん、このように第三者がみてもわかるようなコメントを残しておくのはスタイルガイドうんぬんとは別で残しておく方が好ましい。コードだけではこれがどのような見た目・表現となるのかはわからない。それをカバーするために、サンプルのHTMLファイルを用意して...となると、これはまた先程のドキュメントが分割されることデメリットを招くことになる。このような、スタイルガイドをつくる上で課題となる要素をカバーしてくれるのが、StyleDocco、KSSや、といった、スタイルガイドジェネレータだ。これらを使うことで、先に紹介した実例ようなコンポーネントスタイルをデザインとして見せることも、コードサンプルを明示することもできる。StyleDoccoはNode.jsで実装されており、KSSはRubyで実装されている。Neath氏が開発したものだ。KSSに関連した、彼のプレゼンテーションスライドも是非一度見てほしい。DeckStyleDoccoとりあえず試してみるのなら、おそらくStyleDoccoの方が容易なので、StyleDoccoを使った例で紹介する。今回はStyledoccoのインストールの詳細などは省くので、StyleDoccoのInstallationの節を参照してほしい。styledoccoと、ターミナルなどの黒い画面で叩くだけだが。結論的に、何をすればどうなるのか、というのを先に出すと、次のようなコードを書いたCSSファイルに対して、StyleDoccoのコマンドを実行すればこういう形のものができる。このCSSというのは、ドキュメント用のCSSファイルといったものではなく、実際のページを構成するCSSファイルを指す。アイコンアイコン用モジュール。`ico`をベースとし、サイズ用のclass、アイコン画像のclassで拡張する。url(../images/ico-github.png);}CSSファイルのコメントをHTML化するStyleDoccoはCSSファイルに書かれたコメントをMarkdownという形式で書くことにより、対応したHTMLへと変換する。Markdownの文法はたくさんあるが、ここではよく使われるものをピックアップする。頭に`#`をつけると見出しになるここに説明文を書く。...</div>\`\`\`*/ポイントをいくつか挙げる。##であれば<h2>、となる。‘(シングルコーテーション)とは異なるので注意してほしい。ここに各コードはエスケープする必要はない。StyleDoccoを実行するこのような形式のコメントを書いたCSSファイル(仮にstyle.cssとする)に対し、StyleDoccoを実行する。一応どのように実行するのかというのを少し補足しておく。/Users/myname/projects/mywebsite/そしてこのmywebsiteディレクトリの下に、先ほどの/css/style.cssが展開されているとする。この状態で、下記のようなコマンドを実行する。(コマンドのオプションにある-nは、プロジェクト名を書く。css/style.css実行すると、docsというディレクトリと、その中にスタイルガイドのHTMLが生成されるので、それをブラウザで見れば、先のサンプルのようなページを確認することができる。CSSファイルだけでなく、CSSプリプロセッサのファイルでも可能ここでようやくCSSプリプロセッサの登場。CSSファイルをパースして、それらをHTML化するわけだが、CSSプリプロセッサのファイルを対象にしたときは、コンパイル前の内容でパースしてくれる。アイコンアイコン用モジュール。`ico`をベースとし、サイズ用のclass、アイコン画像のclassで拡張する。アイコン画像は`_icon.scss`に格納し、`@import`で読み込む。Replacementで隠す。Replacementは、`_utility.scss`にある`.ir`で拡張する。36px;}例えばこのように、SCSSな構文を交えることはもちろんのこと、Sassにおける@importを前提とした場合でも、コード上部のデザインサンプルでは、コンパイル後のスタイルが適用されたサンプルにしてくれる。こちらも参考までにスクリーンショットでお見せすると、こういう形。スタイルガイドをつくることができる。CSS/CSSプリプロセッサをもっと楽しく簡易的かつ短い解説であったので、これでもいまいちぱっとしないかもしれないが、StyleDoccoのようなツールを使うことで、CSSとそのコメントを書くのが楽しくなる。難しいとおもわれるかもしれないが、是非一度試してほしい。別の機会に、本ブログのスタイルガイドを公開できればとおもう。アドベントカレンダーは続く次はahomuの人です。SpeakerBY-NC-SA。