読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

CSS用ドキュメント生成ツール『StyleDocco』の使い方を勉強しました

CSS用のドキュメントを簡単に作成できるツール「StyleDocco」というのがあることを知ったので使い方を勉強してみました。

f:id:tyoshikawa1106:20150308202019p:plain

StyleDocco

StyleDoccoのインストール

インストールにはNode.jsを利用するみたいです。以下のコマンドを実行します。

$ npm install -g styledocco

f:id:tyoshikawa1106:20150308202403p:plain


いきなりエラー...
f:id:tyoshikawa1106:20150308202541p:plain


さっそく挫けそうになりかけましたが、こういうエラーが発生する場合はだいたい権限関係だったりしたので、ひとまず実行用のフォルダを用意して『sudo』宣言を追加。もう一度試してみました。

sudo $ npm install -g styledocco

今度はバッチリ実行できました。
f:id:tyoshikawa1106:20150308203129p:plain

StyleDoccoを実行してドキュメント生成

次のコマンドでドキュメント生成処理を実行できるみたいです。

styledocco -n "sample" -o docs -s


まず作業ディレクトリに『docs』フォルダと『style.css』を用意します。『docs』フォルダには生成されたドキュメントが格納されます。『style.css』は次のようになっています。

f:id:tyoshikawa1106:20150308203957p:plain


このように準備してからコマンドを実行すると...

f:id:tyoshikawa1106:20150308204106p:plain


特に何か実行された雰囲気はでませんがきちんとドキュメントが生成されています。

f:id:tyoshikawa1106:20150308204220p:plain


生成されたのは次の2つです。

  • index.html
  • style.html


まず、index.htmlは次のようになっていました。

f:id:tyoshikawa1106:20150308204407p:plain


もう一つのstyle.htmlは次のようになっています。

f:id:tyoshikawa1106:20150308204443p:plain


このように対象CSSの表示内容とそのコード、そしてサンプルコードを表示することができました。画面に表示されるサンプルコードはCSSのコメントで指定できるようになっています。

f:id:tyoshikawa1106:20150308204746p:plain


コメント部分ではMarkdown記法が使用できるみたいです。

f:id:tyoshikawa1106:20150308205113p:plain


・・・が、いまいち使い方がわからなくてうまくいきませんでした。

f:id:tyoshikawa1106:20150308210209p:plain

StyleDoccoコマンドの使い方

StyleDoccoコマンドの使い方は次のようにまとめられています。

f:id:tyoshikawa1106:20150308210735p:plain

例えば次のコマンドの場合は以下の意味となっているみたいです。

styledocco -n "sample" -o docs -s
  • 『-n』:プロジェクト名
  • 『-o』:ドキュメント出力先のディレクトリ指定
  • 『-s』:対象CSSのディレクトリ指定


『-n』は必須ですが残り2つは未指定でも問題ないみたいです。
(今回『-s』は未指定の状態で実行してしまっていました。結果として実行はできたので未指定の場合は同階層のものが対象となるみたいです。)

ドキュメントの更新

CSSを変更して生成済みのドキュメントに反映したい場合は再度styledoccoコマンドを実行します。

f:id:tyoshikawa1106:20150308210419p:plain


これで生成済みのドキュメントを簡単に更新できました。

その他

試してはいませんが通常のCSS以外にSassなどでも使えるみたいです。


とりあえず今回確認できたのはこんな感じです。他にいろいろ便利な機能があると思うので気が向いたら試してみたいと思います。