スタイルガイドジェネレーターの「Fractal」がかなり良さそう

Advertisement

ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました!「Fractal 」というツールで、かなり良さそうなのでご紹介します。

初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。

※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。

では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう!

Fractalとは

まずは、ざっくりとFractalをご紹介します。

  • Clearleft というイギリスのウェブ制作会社が開発しているツールです
  • インストールにはNode.js 4.4.7以上が必要です
  • インストールして指定のフォルダにファイルを保存するとUIパターンライブラリ(スタイルガイド)を自動生成してくれます
  • ローカル環境にインストールして使います
  • 下の例のようなサイトを静的に書き出して公開もできます
  • デフォルトのテンプレートエンジンはHandlebars ですが他のも使えます
  • ドキュメントやデータの記述にはMarkdownやYAML、CommonJSなどを使います

ちなみに、フラクタル(Fractal)とは「フランスの数学者ブノワ・マンデルブロが導入した幾何学の概念である。ラテン語 fractus から。 図形の部分と全体が自己相似になっているものなどをいう(Wikipediaより引用 )」そうです。

Fractalで作られたコンポーネントライブラリの例

net Magazine で導入方法のチュートリアル があったり、レスポンシブWebデザインの生みの親、Ethan Marcotte氏がA List Apartのプレゼンでオススメしている (下から6つ目のブレット)ので、これから人気が出るツールだと思っています。

Fractalの画面構成

FractalのウェブUIの画面構成は以下のようになっています。

全体

全体はナビゲーションとコンテンツの2つのエリアに分かれています。ナビゲーションはデフォルトで「Components」と「Documentation」の2つに分かれて構成されています。

ちなみに、設定ファイルで名称と順番を変えられます。

コンポーネント画面

各コンポーネントの画面は上下2つに分かれていて、さらに下のパネルが5〜6のタブに分かれています。

下のパネルではデフォルトで以下の5つが表示されます。

HTML コンポーネントのHTML。テンプレートエンジンを使って動的にデータを表示させている場合は、データが入った状態のソースが表示されます。
View テンプレートのソース。Handlebarsの{{ title }}などの記述がそのままここに表示されます。
Context Contextデータ。動的に情報を表示させる際に使用するデータです。JSON YAML で記述したり、APIで引っ張ってくることもできるみたいです。
Info Fractal内でのコンポーネントの詳細情報
Notes コンポーネントのドキュメントを設置するとここに表示されます。Markdownで記述します。
Assets コンポーネントと一緒に画像やJSファイルなどのアセットが指定のディレクトリに保存されている場合、このパネルにAssetsタブが追加されてそれらのアセットファイルが表示されます。

Advertisement

なぜFractalなのか

Fractalを気に入った理由は以下のとおりです:

  • 書き出されるサイト(ウェブUI)のデザインがシンプルでわかりやすい
  • コンポーネントとドキュメントを自由に構成できる
  • 作り方が比較的シンプルでわかりやすい(ドキュメントを一通り読めばわかった)
  • ウェブUIをローカルツールでサクッと確認できる
  • ウェブUIを静的に書き出して公開できる
  • Gulpなどのビルドツールと連携ができる
  • APIを使って表示するデータを引っ張ってこられる

最後の2つは試していないので、実感というよりも「できたら便利そう」というレベルの感想ですが、Fractalを使ってコンポーネントのライブラリをとりあえず作っちゃって、後から徐々に制作プロセスに組み込んでいくといったことも簡単にできそうです。なので、かなり柔軟に使えるツールだという印象です。

他のツールだと記述方法やウェブUIの構成がガチガチに決められていて思った通りのものが作れなさそうなんですけど(間違ってたらすみません)、Fractalだと柔軟に対応できそうなところが気に入っています。

あと、Fractalを開発しているClearleft は昔から知っている制作会社で信頼できるからというのも理由の1つです。開発プラン もしっかりしてそうですし、責任を持って開発を続けてくれそうです。

ちなみに、公式サイトの「Why Fractal? 」でも特徴がわかりやすくまとめられているので、英語ですけど読んでみると良いと思います。

Fractalのインストール

では、さっそくFractalをインストールしてみましょう。公式サイトの「Getting started 」の内容をベースに進めていきます。ここからはターミナルで作業をします。

FractalのインストールにはNode.jsの4.4.7以上が必要なので、「Node.jsとnpmをアップデートする方法」あたりを参照してNode.jsとnpmをアップデートしておきましょう。

Fractalを入れるフォルダを作る

mkdir patterns

npm initでプロジェクトを開始

npm init

上のコマンドを実行すると、いくつか質問されるので、それらに答えていきます。必要なければreturnを押していくと、フォルダ内にpackage.jsonというファイルが作成されます。これがプロジェクトの設定ファイルになります。

Fractalをインストール

npm install --save @frctl/fractal

上のコマンドを実行してFractalをインストールします。--saveのオプションでpackage.jsonにバージョン付きでdependenciesが書き込まれます。

FractalのCLIツールをインストール

npm i -g @frctl/fractal

ターミナルのどこからでもFractalが開始できるように、グローバル領域にFractalをインストールします。iはインストールで-gはグローバル領域にインストールするためのオプションです。

これでインストールは完了です。

初期設定

初期設定は、とりあえず以下を行います。

ディレクトリの作成

先ほど作ったpatternsディレクトリ内に以下のようにディレクトリを作成します。

patterns
└── src
    ├── components
    └── docs

ちなみに、このフォルダ内にはnpm initで書き出されたプロジェクトの設定ファイルpackage.jsonも存在します。

fractal.jsの作成

プロジェクトのルートディレクトリ(今回はpatterns)の直下にfractal.jsファイルを作って保存します。このファイルにFractalの設定を書き込みます。※Windows環境の方はこちらをご覧ください。

'use strict';

/* Fractalのインスタンスの作成とエクスポート */
const fractal = module.exports = require('@frctl/fractal').create();

/* プロジェクト・タイトルの設定 */
fractal.set('project.title', 'Rriver Component Library');

/* componentsディレクトリの指定 */
fractal.components.set('path', __dirname + '/src/components');

/* documentationディレクトリの指定 */
fractal.docs.set('path', __dirname + '/src/docs');

これで、patternsディレクトリは以下のような構成になります。

patterns
├── src
│   ├── components
│   └── docs
├── fractal.js
└── package.json

Windows環境の場合

Windows環境だとfractal.jsというファイル名に問題があるようです。fracatal.jsのファイル名をfractalfile.jsに変更して、以下をpackage.jsonに追加することでエラーを回避できるとのことです。

"fractal": {
"main": "fractalfile.js"
}

GithubのIssues にもあげられていますが解決されてないみたいですね。2017年5月2日現在、ドキュメントも修正されてないようです。開発者の方が「ドキュメントをアップデートしなきゃ」と書いている ので、アップデートされるとは思うのですが。他の解決策も検証中なのかもしれません。

ちなみに、コメント欄への投稿でこのエラーについて知りました。コメントを投稿してくれた方、ありがとうございました!

コンポーネントを入れてみる

さっそくコンポーネントを追加してみます。

テキストエディタでheadings.hbsというファイルを作って先ほどのcomponentsディレクトリに保存します。ファイルには以下のようなHTMLを入れてみてください。

<h1>これはテストの見出しテキストです</h1>

.hbsファイルはHandlebars のテンプレートファイルで、componentsディレクトリにHandlebarsのフォーマットでファイルを保存することで、Fractalがコンポーネントページとして認識してくれます。Handlebarsについてはこの辺 を参照すると良いかと。

Docsのトップページを設置する

Documentationのトップページの内容を追加します。テキストエディタで以下の内容のファイルを作ってdocsディレクトリにindex.mdとして保存します。MarkdownとYAML front-matter を使って記述します。

---
title: Rriverのコンポーネントライブラリ
---
Rriverのコンポーネントライブラリです。

めちゃくちゃベーシックな設定ですけど、これで準備は完了です。

では、ローカル環境でウェブUIを起動して確認してみましょう!

ローカル環境でウェブUIを確認する

ターミナルを立ち上げて、以下のコマンドを実行します。

fractal start --sync

以下のように表示されるのでhttp://localhost:3000 にアクセスしてみてください。FractalのウェブUIが表示されます。ちなみに、--syncオプションを指定してBrowserSync を起動しています。BrowserSyncが動いていると、ドキュメントを更新した際にブラウザが自動でリロードされます。

┌───────────────────────────────────────────┐
│ Fractal web UI server is running!         │
│───────────────────────────────────────────│
│ Local URL:      http://localhost:3000     │
│ Network URL:    http://192.168.0.109:3000 │
│ BrowserSync UI: http://localhost:3002     │
│───────────────────────────────────────────│
│ Use ^C to stop the server.                │
└───────────────────────────────────────────┘

ちなみに、他の端末からこのページにアクセスする場合はNetwork URLにアクセスすると見られます。同じネットワーク内に接続してないとダメですけど。また、BrowserSync UIにアクセスすると、BrowserSyncの設定が変更できます。

⌃ + CでFractalを終了できます。

以上です!

まとめ

以上、ざっくりとFractalの導入方法をまとめてみました。サクっとスタイルガイドやUIパターンライブラリが作れて良くないですか?細かい設定はさておき、たったこれだけの作業で作れるのは嬉しいですよね。個人的にはスタイルガイドやパターンライブラリを作るための情報をCSSやSassに直接書き込まないというのも気に入っています

運用フェーズに入って実際に使い込んでみないと見えてこないこともたくさんあると思いますけど、Fractalは行けそうな感じがしています。

というのも、ツール自体がすごくフレキシブルな設計になっているようなので、上手に制作ワークフローに組み込めそうな気がするんですよね。そしたら、作業もかなり効率的にできそうです。

ということで、今回はこの辺で。中級編では、より細かい設定についてまとめています。

[追記: 2017/04/23]
デモを作ってみたのでよかったらご覧ください。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“スタイルガイドジェネレーターの「Fractal」がかなり良さそう” への3件のフィードバック

  1. […] スタイルガイドジェネレーターの「Fractal」がかなり良さそう […]

  2. A より:

    流れに沿ってインストールを行った場合、Windowsだと
    `fractal start –sync`
    で構文エラーで起動しませんでした。

    https://github.com/frctl/fractal/issues/118#issuecomment-255254117
    fractal.js -> fractalfile.js
    にリネーム
    package.jsonに
    “fractal”: {
    “main”: “fractalfile.js”
    }
    を追記。
    で初めてbrowserSyncが起動します。

    • ryo より:

      コメントありがとうございました。
      「fractal.jsの作成」のところに注意書きを入れておきました。

      Github Issuesのコメントで見る限り、開発者の方が認識している問題のようなので、そもそもの問題が解決されるか公式ドキュメントがアップデートされると良いですね。