KSSとは

KSSはスタイルガイドジェネレータのひとつです。先にCodeGridで紹介しているStyleDocco*と同様に、CSSで定義されたスタイルとその説明を一覧化したWebページを出力するものです。

KSSのWebサイト、KSS · Knyle Style Sheetsでは、KSSで作成されたスタイルガイドのよい例としてGitHubのCSS · Styleguideが挙げられています。スタイルが多くのカテゴリに分類されていますが、とりわけ、ボタン用スタイルを並べたページ、Buttons · Styleguideはよりよい例として紹介されています。

KSSで出力されるスタイルガイドには、ひとつのスタイルに対して、番号、説明、:hoverなど各状態のリスト、プレビュー、マークアップといった項目が与えられています。

KSSはRubyで書かれておりgemを通じてインストールするほか、主な特徴としては次のようなものがあります。

RailsやSinatraに組み込んで、KSSが解析したCSSをテンプレートにはめてレスポンスとして返す形式のため、サーバーにアプリケーションのコードをデプロイしていくタイプのプロジェクトと相性がよく、zipなどで静的ファイルを納品するタイプのプロジェクトにはあまり向きません。

また、KSS側で特にスタイルガイドページ用のテンプレートやCSSを用意してくれることはありません。ですので、前述したGitHubのCSS Styleguideページも、KSSがHTMLとCSSを出力してくれたのではなく、スタイルガイドの制作者が用意したものと思われます。

KSSが担ってくれるのは、あくまでもCSSを解析した結果として、スタイルガイド用のテンプレートに渡すパラメータを提供するところまでです。最初の手間はかかりますが、自由度は高く、Select Menu · StyleguideのようにJavaScriptで動きを付けたモジュールも簡単に配置できます。

今回のシリーズではKSSの使い方を紹介していきますが、まずはスタイルガイドがどのようなものだったかについても、少し振り返っていきたいと思います。

まずはCSSの設計をしっかりと

最初に述べておくと、スタイルガイドジェネレータはCSSの設計が上手くなることを助けるものではありません。

例えば、ユーザーに対して一貫性を持った操作系を提供できるよいデザインを作り、その中で繰り返されるパターンを抽出した再利用可能なモジュールをCSSのスタイルとして定義していく、こういったプロセスは前提として不可欠です。この部分は自分達で頑張らないといけません。

こうした中で作られるであろう、モジュールを一覧化したHTML、つまり、ここでスタイルガイドと呼んでいる文書を作る部分をなるべく楽にしようというのが、昨今のスタイルガイドジェネレータの役割です。

CSSの設計についての話はCodeGridの過去の記事、CSSの設計 - 枠とモジュールで考えるを始めとする「CSSの設計」シリーズでも書かれているので、ぜひこちらも読んでみてください。

スタイルガイドの役割

そもそも、スタイルガイドが作られていると何がよいのでしょうか。スタイルガイド作成の目的としては、例えば、次のような事柄が挙げられるでしょう。

一方、スタイルガイドが作られていないプロジェクトでは、こんなことが起きてしまいがちです。

では、なにかしらのスタイルガイドがあれば安心かというと、必ずしもそうではありません。WebサイトやWebアプリケーションは常に成長を続けます。そういった中でスタイルガイドの更新が追いつかなくなると、次第に実情とそぐわない内容になってしまい、機能を果たせないものへと変わっていってしまいます。こうなってしまっては、結局スタイルガイドが作られていないのと同様の状態に陥ってしまいます。

Living Styleguideという考え方

そこで、自分達の作るWebサイトやWebアプリケーションと共に成長していく、生きているスタイルガイドを作ろうという考え方が、**"Living Styleguide"**というフレーズを伴って紹介される例が出てきました。

そういった潮流もあってかKSSのWebサイト内でも、Living Styleguideの作成を支援するツールであることを説明する文章がたびたび登場しています。

動かしてみる

前置きはこのくらいで、実際にKSSを動かしてみましょう。詳しい内容は次回以降で触れていくことにして、まずはKSSを自分の環境で動かしてみたいと思います。ここではSinatraを使っていきます。なお、記事中の動作確認はRuby 1.9.3で行っています。これ以前のバージョンですと、動作しない可能性があります。

KSSのリポジトリに含まれているサンプルをベースにした、簡単な導入が済んでいるリポジトリを用意してあるのでご利用下さい。もちろん自分で始めから試行錯誤をしてもかまいません。

今回はgemのBundlerも使用します。入っていない場合は、ここで導入しておきましょう。ターミナルから以下のコマンドでBundlerが入っているか確かめられます。

$ which bundle
# Bundlerが入っている場合はコマンドのパスが返ってきます。
# 入っていない場合は何も返ってこないか、 `bundle not found` が返ってきます。

もしBundlerが入っていなければ以下のコマンドでインストールします。

$ gem install bundle

では進んでいきましょう。次のコマンドを実行するか、Releases · pxgrid/codegrid-kssからv1.0.0のアーカイブをダウンロードしてサンプルファイル一式を手に入れて下さい。ディレクトリも移動しておきます。

$ git clone https://github.com/pxgrid/codegrid-kss.git
$ cd codegrid-kss

移動したら、バージョンを今回のサンプル用のコミット地点に合わせます。アーカイブをダウンロードした場合はその時点でバージョンを選んで行っているのでその必要はありません。

$ git checkout v1.0.0

次に、bundle コマンドを実行して必要なgemを現在のディレクトリにダウンロードします。

$ bundle install --path vendor/bundle

これらのgemがダウンロードされます。

$ cat Gemfile
source "https://rubygems.org"
gem 'sinatra'
gem 'sinatra-contrib'
gem 'kss'

ダウンロードが終わったら、次のコマンドを実行してアプリケーションを起動しましょう。

$ bundle exec ruby app.rb

http://localhost:4567にアクセスしてこのような画面が表示されれば成功です。

次回はこのスタイルガイドへCSSモジュールを追加していきながらKSSの仕組みを紹介していく予定です。