生きたスタイルガイドのためのKSS 第1回 KSSの特徴
このシリーズではスタイルガイドジェネレーターのKSSを紹介します。第1回目はKSSがどんな特徴を持っているジェネレーターなのかを解説しています。
KSSとは
KSSはスタイルガイドジェネレータのひとつです。先にCodeGridで紹介しているStyleDocco*と同様に、CSSで定義されたスタイルとその説明を一覧化したWebページを出力するものです。
*注：StyleDocco
StyleDoccoに関しては「賢く使うStyleDocco」シリーズを参照してください。
KSSのWebサイト、KSS · Knyle Style Sheetsでは、KSSで作成されたスタイルガイドのよい例としてGitHubのCSS · Styleguideが挙げられています。スタイルが多くのカテゴリに分類されていますが、とりわけ、ボタン用スタイルを並べたページ、Buttons · Styleguideはよりよい例として紹介されています。
KSSで出力されるスタイルガイドには、ひとつのスタイルに対して、番号、説明、:hoverなど各状態のリスト、プレビュー、マークアップといった項目が与えられています。
KSSはRubyで書かれておりgemを通じてインストールするほか、主な特徴としては次のようなものがあります。
KSSの主な特徴
- 静的ファイルの出力はしない
- スタイルガイドページのテンプレートHTMLは自分で書く
- 加えてCSSも自分で書く
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の設計」シリーズでも書かれているので、ぜひこちらも読んでみてください。
スタイルガイドの役割
そもそも、スタイルガイドが作られていると何がよいのでしょうか。スタイルガイド作成の目的としては、例えば、次のような事柄が挙げられるでしょう。
スタイルガイド作成の目的
- サイト内に登場するモジュールを一覧化する
- モジュールの状態を一覧化する（
:hoverや:disabledなど） - 新規にモジュールが追加された場合、新しいモジュールを作ったことの周知
- サンプルコードによってマークアップの指針を示す
- CSSの達人でなくてもガイドを閲覧しながらマークアップに参加できるようにする
一方、スタイルガイドが作られていないプロジェクトでは、こんなことが起きてしまいがちです。
スタイルガイドが作成されない場合
- 同じ役割のスタイルがいくつも作られてしまう
- CSSセレクタに使うidやclass属性の命名規則がばらばらになってしまう
- 参加して日の浅い開発者は自分の使用すべきモジュールがわからずに手間取ってしまう
では、なにかしらのスタイルガイドがあれば安心かというと、必ずしもそうではありません。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.rbhttp://localhost:4567にアクセスしてこのような画面が表示されれば成功です。
次回はこのスタイルガイドへCSSモジュールを追加していきながらKSSの仕組みを紹介していく予定です。