CSS用のドキュメントを簡単に作成できるツール「StyleDocco」というのがあることを知ったので使い方を勉強してみました。
StyleDoccoのインストール
インストールにはNode.jsを利用するみたいです。以下のコマンドを実行します。
$ npm install -g styledocco
いきなりエラー...
さっそく挫けそうになりかけましたが、こういうエラーが発生する場合はだいたい権限関係だったりしたので、ひとまず実行用のフォルダを用意して『sudo』宣言を追加。もう一度試してみました。
sudo $ npm install -g styledocco
今度はバッチリ実行できました。
StyleDoccoを実行してドキュメント生成
次のコマンドでドキュメント生成処理を実行できるみたいです。
styledocco -n "sample" -o docs -s
まず作業ディレクトリに『docs』フォルダと『style.css』を用意します。『docs』フォルダには生成されたドキュメントが格納されます。『style.css』は次のようになっています。
このように準備してからコマンドを実行すると...
特に何か実行された雰囲気はでませんがきちんとドキュメントが生成されています。
生成されたのは次の２つです。
- index.html
- style.html
まず、index.htmlは次のようになっていました。
もう一つのstyle.htmlは次のようになっています。
このように対象CSSの表示内容とそのコード、そしてサンプルコードを表示することができました。画面に表示されるサンプルコードはCSSのコメントで指定できるようになっています。
コメント部分ではMarkdown記法が使用できるみたいです。
・・・が、いまいち使い方がわからなくてうまくいきませんでした。
StyleDoccoコマンドの使い方
StyleDoccoコマンドの使い方は次のようにまとめられています。
例えば次のコマンドの場合は以下の意味となっているみたいです。
styledocco -n "sample" -o docs -s
- 『-n』：プロジェクト名
- 『-o』：ドキュメント出力先のディレクトリ指定
- 『-s』：対象CSSのディレクトリ指定
『-n』は必須ですが残り２つは未指定でも問題ないみたいです。
(今回『-s』は未指定の状態で実行してしまっていました。結果として実行はできたので未指定の場合は同階層のものが対象となるみたいです。)
ドキュメントの更新
CSSを変更して生成済みのドキュメントに反映したい場合は再度styledoccoコマンドを実行します。
これで生成済みのドキュメントを簡単に更新できました。
その他
試してはいませんが通常のCSS以外にSassなどでも使えるみたいです。
とりあえず今回確認できたのはこんな感じです。他にいろいろ便利な機能があると思うので気が向いたら試してみたいと思います。
