BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. gulpでスタイルガイドジェネレータ「Fractal」を使ってみる
by 漢ムラタ 漢ムラタ

gulpでスタイルガイドジェネレータ「Fractal」を使ってみる

gulpでスタイルガイドジェネレータ「Fractal」を使ってみる

7月から一児の父となったムラタです。

今回はgulpとスタイルガイドジェネレータの「Fractal」を使ってスタイルガイドを生成してみようと思います。

そもそもスタイルガイドって?

サイト制作にあたっての決まり事、いわばルールブックのようなものでしょうか。
サイトで使用するカラーや見出しやボタンなどの共通で使用するようなパーツデザインをスタイルガイドで定めておくことで、ページ数の多い大規模サイトを複数人でサイトを構築していくことになってもデザインに一貫性を持たせることができるし、ほぼ同じデザインなのにソースコードが全く別物なんていうことにもならないわけですね。

一人で構築・管理しているサイトであってもスタイルガイドを作っておくことで、久しぶりに更新が入った際に既にあるデザインのクラスを誤って重複して作ってしまうことも防げるし、別の人に更新を引き継ぐことになった時も同じような事態を防げますよね。

ただスタイルガイドの制約でがちがちに縛られると各自で柔軟な対処がしづらいという面も考慮しておく必要がありますね。

スタイルガイドジェネレーター

スタイルガイドを作成するにあたって別に手動でできなくもないですが、せっかくなのでジェネレーターを使って自動で書き出したいですよね。

調べた感じジェネレーターにも色々ありそうですが、今回は検索時に割と名前が見られたのと普段使用しているタスクランナーのgulpで使用できるということで「Fractal」を使用することにしました。

スタイルガイドジェネレーターではCSSファイル内にコメントを記述することでスタイルガイドを生成するものが多いらしいのですが、FractalではCSSファイルは触ることなく、別個に専用の設定ファイルを用意することでスタイルガイドを生成します。
ここは好みにもよるかと思いますが、自分はCSSに余計なコメントなどをごちゃごちゃ書きたくなかったのでこれは嬉しい仕様です。

実際に使ってみる

インストール

それでは早速Fractalをインストールしてみましょう。既にgulpはインストール済として話を進めます。

ディレクトリ構成は下記の通りです。
「src」の中に「styleguide」というディレクトリを切り、更にその中に「components」と「docs」で分けます。

ディレクトリの準備ができたら本体をダウンロードします。

設定を記述

gulpfile.jsにFractalの設定を記述していきます。

プロジェクト名やスタイルガイドの出力先、参照するcssファイルの格納ディレクトリパスなど指定します。

スタイルガイドを生成

ドキュメントの設定

早速スタイルガイドを生成してみましょう。
最初にスタイルガイドのTOPページにもあたる「ドキュメント」のページの設定をしておきます。

前述のディレクトリ構成の「src/styleguide/docs」内に「index.md」という名前のファイルを作成して設置します。

そしてindex.mdには以下の記述を行ないます。

冒頭の「—」で囲まれた部分にはドキュメントページに関する様々な情報を設定することができますが、今回は「label」と「title」を入力します。
それ以降の部分はページの本文となり「マークダウン記法」による入力が可能です。

ドキュメントページの生成

ここまで出来たら一旦gulpfile.jsで登録したスタイルガイドのタスクを実行してみましょう。

gulpfile.jsの「スタイルガイドの出力先」として設定したパスが生成されているかと思います。今回であれば「styleguide」というディレクトリが生成されて、その中に色々なファイルが一緒に格納されているのが分かります。

上記の「styleguide/index.html」にアクセスすると下記の画面になっているかと思います。

画面上部の青色のバー部分の「Fractalテスト」はgulpfile.jsで設定した「プロジェクト名」が入ります。それ以外の部分は先ほどの「index.md」で記載した内容が反映されます。

例えば画面左のメニュー部分の「概要」は「label」の内容が出力され、画面右のコンテンツ部分の「概要」は「title」が出力されます。
本文に関してはそれ以降のマークダウン記法で入力した内容が出力されます。

ここにサイト全体に関する仕様やルールなどを記載しておくといいと思います。

コンポーネントの生成

次にいよいよスタイルを登録していきましょう。
試しに以下のような横並びのスタイルを用意したのでそれを登録してみます。

scssの記述は以下の通りです。cssファイルとして既に「public_html/assets/css」にコンパイル済とします。

次に「src/styleguide/components」に「_preview.hbs」というファイルを設置し、以下の内容を記述します。

このファイルはテンプレートのようなもので、これがiframeで読み込まれるようです。
head内に先ほどコンパイルしたcssファイルを読み込んでおきます。「path」はgulpfile.jsで「static.pasth」で指定した静的ファイルのパスが出力されます。

次に同じcomponentsの階層に登録したいスタイルのクラス名「row-list」のディレクトリを作成します。
そしてその中に「row-list.hbs」ファイルを設置し、以下の記述をします。

これで一度スタイルガイドのタスクを実行してみましょう。
実行が完了したらドキュメントページを更新してみると左メニューに「COMPONENTS」という項目が増え、その中に「Row List」というメニューが追加されているのが確認できると思います。

クリックすると先ほど設定した「row-list.hbs」の中身が「.row-list」のスタイルが反映された状態で表示されています。

またその下には「HTML」や「View」「Context」「Info」「Notes」など補足情報を確認できるようになっています。
今回は最小限の構成で生成したので「HTML」くらいしか見れるものはないかと思いますが、設定ファイルを設置することで様々な補足を書き加えることが可能です。

NOTEの追加

右端のタブ「Notes」に情報を追加してみましょう。
row-list.hbsファイルと同じ階層に「README.md」というファイルを設置して、下記の内容を記述してみます。

書いてる通りですが、ここでもマークダウン記法での記述が可能です。
この状態で再度スタイルガイドを生成しなおした後、アクセスし直しNotesタブを選択すると。

このように先ほどの文章が追加されています。

メニュー名の変更

次に画面左メニューの「Row List」のままだと第三者が見たときにパっと見何のスタイルなのか分かりづらいし(まあ本来はそういった分かりづらいクラス名を付けるべきではないですが)できれば日本語に変えたいですよね。

今回も先ほどと同じくrow-list.hbsファイルと同じ階層に「row-list.config.yml」というファイルを設置します。当然ですが「row-list」の部分はそこのクラス名に合わせます。

そしてrow-list.config.ymlの中に以下の記述をします。

これで再度スタイルガイドを生成すると。

無事メニュー名とページタイトル部分が設定した名前に変更されました。
このconfig.ymlは他にも様々な設定をすることができるので気になれば一度調べてみるといいかもですね。

グループ化

例えばボタンのスタイルがあり、それの色だけが異なるパターンが複数個あった場合、それをメニュー部分につらつらと並べるより「ボタン」という括りでまとめておきたいですよね。

仮に今回グループ化したいクラスを「.btn」とします。
まずは通常通り「src/styleguide/components」の中に「btn」というディレクトリを切り、「btn.hbs」を設置します。
中身は以下の通りです。

次にバージョン違いのボタンとして「btn–red.hbs」を設置し、以下の記述にします。

そして今回も「btn.config.yml」ファイルを作成して、以下の記述にします。

「variants」という項目の中にそれぞれバリエーションごとの名前とラベルを記述しています。
これでスタイルガイドを生成してみましょう。

メニューに「ボタン」という項目が追加され、その下層に「デフォルト」と「赤色」というメニューが連なっているのが分かります。

これでバリエーション違いのスタイルが散らばることなくまとめて確認できるようになりました。

最後に

自分もFractalを触り始めたばかりなので今回は必要最低限レベルの情報しかご紹介できませんでしたが、もっと様々な処理が行えるので時間があれば今後も勉強していければと思います。
まあなかなか複数人で構築をする機会がなかったり、スタイルガイド生成まで時間が取れないというのもありますが・・・

ページの先頭に戻る