スタイルガイドジェネレータの「aigis」を使ってみる

スタイルガイドを生成できる「aigis」を使う機会があったので、使い方などをメモしておきます。

使い方

コマンドプロンプトを開いて、作業ディレクトリに移動します。

cd 作業ディレクトリ

node-aigisをインストールします。

npm install --save-dev node-aigis

以下コマンドを実行して、バージョンが表示されたらOKです。

node_modules\.bin\aigis -v

コンフィグファイルとHTMLテンプレートを作成します。
その際、以下の3つからテンプレートエンジンを選択できるようです。

• EJS（ejs）
• Jade（jade）
• Handlebars（hbs）

特に指定しない場合はEJSになるようです。

node_modules\.bin\aigis init

テンプレートエンジンを選択する場合、後ろに「–engine XXX」の形で指定します。
今回はJadeを使用するので以下のようにしました。

node_modules\.bin\aigis init --engine jade

まずは特に設定しないで、スタイルガイドを生成してみます。
スタイルガイドを生成する場合、以下のコマンドを実行します。

node_modules\.bin\aigis run -c aigis_config.yml

styleguideという名前のディレクトリが生成されていればOKです。
特に設定など変更していませんが、これでスタイルガイドが生成できました。
スタイルガイドのデモページ
　

スタイルガイドの大枠の変更

スタイルガイドの見た目を変更してみます。
スタイルガイドの大枠はtemplate_jadeディレクトリ内のファイルで管理しています。
(選択したテンプレートエンジンによってディレクトリ名は異なります。)

index.jadeが大枠のファイル、sidemenu.jadeがナビゲーションのファイル、components.jadeがコンテンツ部分のファイルになります。
例として、フッターのタイムスタンプを表示しないように修正してみます。

index.jade

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width')
    link(href=root + 'aigis_assets/css/highlight/okadia.css', rel='stylesheet')
    link(href=root + 'aigis_assets/css/theme.css', rel='stylesheet')
    link(href=root + 'css/style.css', rel='stylesheet')
  body
    .aigis-container
      include ./sidemenu
      .aigis-contents
        .aigis-contents__body
          include ./components
//          footer.aigis-footer Last update at #{timestamp}

index.jadeのタイムスタンプ部分をコメントアウトしました。
変更後、以下コマンドでスタイルガイドを生成します。

node_modules\.bin\aigis run -c aigis_config.yml

スタイルガイドからタイムスタンプを削除できました。
スタイルガイドのデモページ2
このように、template_jade内の記述を変更することで、スタイルガイドの見た目を変更できます。
　

スタイルガイドの内容の変更

スタイルガイドの内容は、CSSファイル内のコメントアウトで記述していきます。
実際に記述する前に、スタイルガイドで参照するCSSを変更しておきます。
aigis_config.ymlで設定を変更できるので、以下部分を変更してください。

aigis_config.yml

source: ./aigis_assets
↓
source: ./style.css

これでスタイルガイド生成の際にstyle.cssを参照するようになりました。
style.cssを作成して、以下のようにコメントを追加してみます。

style.css

/*
---
name: base button
category: module/button
---

## This is base button

* Base button style.
* Use `a` or `button` tag.

```html
<a class="btn">Button</a>
```
*/

これで再度スタイルガイドを生成してみます。

node_modules\.bin\aigis run -c aigis_config.yml

左メニューがstyle.cssのコメントに追加したbuttonに変更されました。
スタイルガイドのデモページ3
コメントアウト内の記述に関しては公式ドキュメントをご確認ください。
　

【参考サイト】

• aigis – CSS Styleguide Generator