aigisの基本まずはaigisがどういったものか、その特徴と基本的な機能を解説します。Node.jsのみで構築できる環境、YAMLとMarkdownで簡単に記述できるスタイルガイド記述、スタイルガイドの分類を簡便に行えるカテゴリーなど多くの特徴があります。直博フロントエンド・エンジニア次回このシリーズの記事一覧をみる目次aigisの特徴MarkdownとYAMLからスタイルガイドを生成するまとめこの記事では、スタイルガイドジェネレーターaigis(アイギス)の基本的な機能を、サンプルを交えながら紹介していきます。aigisの作成と公開」*で筆者が作成したaigisというスタイルガイドジェネレータの技術的な背景や紹介しました。本シリーズではaigisの特徴や使い方を解説していきます。*注:v1.0.0のリリース前述の記事のあと、aigisのバージョン1.0.0をリリースしました。利用しているライブラリなどが変更され、機能などにも変更があります。v0.2系を利用している方はこの記事と合わせて、後述するドキュメントにも目を通してみてください。Generator第1回の今回は、aigisがどういったものかを、サンプルを交えながら紹介していきます。第2回で実際にaigisを使うための環境構築や設定などを解説していきますので、今回はまずaigisの概要を掴んでください。紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。aigisサンプルリポジトリ2016-aigis/tree/master/1このシリーズは、次の環境にて動作を確認しています。環境や各ソフトウェアのバージョン違いにより、本シリーズで解説している内容がそのまま動作しない可能性がありますので、その点ご留意ください。3.8.9aigisの特徴aigisは次のような特徴を持っています。MarkdownとYAMLからスタイルガイドを生成する階層構造を持ったカテゴリーごとのスタイルガイドが生成できるシンタックスハイライトを行うaigisはCodeGridで過去に紹介したhologramに似た機能や特徴を持っていますが、hologramよりも柔軟に使えるような作りになっています。aigisの柔軟性を表す特徴として、次の2点が挙げられます。スタイルガイドを生成する元になるファイルのタイプを問わない3種類のテンプレートエンジンから選んで利用できるスタイルガイドを生成する書式に沿っていれば、どのような形式のファイルからでも(たとえばMarkdownファイルなどから)スタイルガイドが生成できます。テンプレートにはEJS、Jade、Handlebarsから1つを選んで使うことができるので、プロジェクトで使っているものに合わせたり、使い慣れているテンプレートエンジンを利用することができます。それではこうした特徴を交えながら、aigisの基本的な使い方について解説します。実際の環境構築は次回行いますので、まずはaigisの概要を眺めてみてください。MarkdownとYAMLからスタイルガイドを生成するaigisはコメントブロックに書かれたYAML*とMarkdownをもとにスタイルガイドを生成します。*注:YAMLとは?YAML(ヤムル)とは、XMLやJSONと同様に階層的にデータを表現できる形式のひとつです。XMLやJSONよりもシンプルな書式が特徴です。次のコードはCSSに書いたシンプルなコメントブロックの例です。---で囲まれたブロックがYAMLで書かれたコンポーネントの設定です。その下の部分はMarkdownを使って自由にドキュメントを記述できます。コードブロック以下のコードブロックはシンタックスハイライトが効いた状態になります。合わせてプレビュー用のHTMLが挿入されます。red;}このコメントブロックから次のようなスタイルガイド用のHTMLが生成されます。<li>番号付きリスト</li></ol><h2>コードブロック</h2><p>以下のコードブロックはシンタックスハイライトが効いた状態になります。<br>合わせてプレビュー用のHTMLが挿入されます。html"><span>&gt;</span></span></span></span></div></pre></code></pre>このHTMLにスタイルを当ててブラウザで表示すると、次のようなスタイルガイドを出力できます。先述した例の設定で次のような指定をしました。component/button---aigisはこのcategoryに同じ名前が指定されているコンポーネントをグルーピングして、ページの出力を行います。この名前に/が含まれている場合、aigisはこれを階層構造として扱います。component/buttonのように指定した場合、componentの下のbuttonページに出力されます。上記のようにcomponentとcomponent/buttonの2つを指定すると、次のようにcomponentとbuttonの両方のページに同じコンポーネントを出力することができます。ここに出力されるこのコレクションの機能をうまく使うことで、コンポーネントの属性や関係性を持たせたスタイルガイドの生成が行えます。テンプレートのヘルパーaigisでは先述した階層構造を持ったカテゴリーのコレクションから、ツリーメニューを生成するためのヘルパーが用意されています。ヘルパーを使うことで、次のような見た目の階層メニューを簡単に作れます。ツリーヘルパーの例ヘルパーの使い方はとてもシンプルで、次のようにテンプレートの中でhelper.renderCollectionTreeを呼び出すだけです。このとき、引数としてツリーを生成したいコレクションの名前を指定します。%>このヘルパーは次のようなHTMLを生成して出力します。</li></ul>ツリーの要素にはdata-path-depthという属性に階層ごとの値が付与されます。出力されたページが対応するツリーの要素にはdata-tree-currentという属性が付与されます。この属性値を利用して、たとえば次のようなCSSでスタイルガイド生成を行うと、先述したようなサイドメニューを表現できます。#fff;}まとめaigisの基本的な機能と使い方を紹介しました。本記事を読んでみて、スタイルガイドが簡単に作れそうだなと思ってもらえたら嬉しいです。Railsを利用するプロジェクトなどであれば採用に躊躇しないと思います。ないプロジェクトの場合には依存する環境が増えてしまうことになります。その点、aigisはNote.jsに依存するだけで、RubyにもPythonにも依存しません。プロジェクトの環境をNode.jsで完結させたい場合には、aigisの利用を候補に入れてみてください。次回は、実際にaigisを使うための環境構築とあわせて、もう少し細かい機能の紹介と、カスタマイズの方法について解説します。直博フロントエンド・エンジニアJavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わる。特定商取引法に基づく。