BLOG ブログ

ホームページ制作
BLOG
【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（実践編）

【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（実践編）

更新日：2021/01/15

この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。

ちなみに、この記事は「【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（環境構築編）」の続編になります。
まだ読んでいない方はそちらを読んでからの方がスムーズかと思われます。
前の記事はこちら

それでは、早速本題にいきましょう！

1 コンポーネントを作成してみよう！
2 スタイリングしよう！
3 cssを読み込もう！
4 Assetsタブを追加しよう
5 Compoundする
6 その他
7 Fractalに関する疑問
8 まとめ

コンポーネントを作成してみよう！

例としてボタンを作成してみます。

現在のフォルダ構造は以下のようになっているかと思います。


  fractalDemo/
    ├ node_modules
    ├ styleGuide
      ├ components
          ├ example
            ├ example.hbs
            ├ example.config.yml
      ├ docs
          ├ 01-index.md
      ├ public
    ├ package.json
    ├ package-lock.json

fractalDemo/

├ node_modules

├ styleGuide

├ components

├ example

├ example.hbs

├ example.config.yml

├ docs

├ 01-index.md

├ public

├ package.json

├ package-lock.json

まず、 exampleという名前をすべてbutton01に変更しましょう。
また、.ymlファイルは削除でOKです。

※フォルダ名とファイル名は一致させてください！
→NG例）
フォルダ名：btn
ファイル名：button01.hbs

ここまでで、フォルダ構造は以下のようになっているはずです。


  fractalDemo/
    ├ node_modules
    ├ styleGuide
      ├ components
          ├ button01
            ├ button01.hbs
      ├ docs
          ├ 01-index.md
      ├ public
    ├ package.json
    ├ package-lock.json

fractalDemo/

├ node_modules

├ styleGuide

├ components

├ button01

├ button01.hbs

├ docs

├ 01-index.md

├ public

├ package.json

├ package-lock.json

次に、button01.hbsの中身を作成します。

具体的な中身はひとまず以下のようにしてください。

▼button01.hbs


  <a href="" class="button01">ボタン01</a>

ブラウザで確認してみると、、、

できてますね！いい感じです！

スタイリングしよう！

まだCSSを充てていないので反映させてみましょう。

cssファイルはpublicフォルダに作成します。
以下のようにcssフォルダとcssファイルを作成しましょう。


  fractalDemo/
    ├ public
        ├ css
          ├ style.css

fractalDemo/

├ public

├ css

├ style.css

style.css には以下のように記述してみます。
（とりあえずコピペしましょう）


  .button01 {
    height: 50px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px 0 rgba(58, 80, 107, 0.4);
    cursor: pointer;
    transition: 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    color: #333333;
    background-color: #fcd311;
  }

  .button01:hover {
    color: #ffffff;
    opacity: 0.9;
  }

  .button01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220%;
    background-color: #111;
    transform-origin: left bottom;
    transform: skewY(-10deg) scale(1, 0);
    transition: transform 0.6s;
    z-index: -1;
  }

  .button01:hover::after {
    transform-origin: left top;
    transform: skewY(-10deg) scale(1, 1);
  }

.button01 {

height: 50px;

width: 180px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 0 15px 0 rgba(58, 80, 107, 0.4);

cursor: pointer;

transition: 0.4s ease-in-out;

position: relative;

overflow: hidden;

color: #333333;

background-color: #fcd311;

}

.button01:hover {

color: #ffffff;

opacity: 0.9;

}

.button01::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 220%;

background-color: #111;

transform-origin: left bottom;

transform: skewY(-10deg) scale(1, 0);

transition: transform 0.6s;

z-index: -1;

}

.button01:hover::after {

transform-origin: left top;

transform: skewY(-10deg) scale(1, 1);

}

これでcssは完成ですが、まだ、この段階ではブラウザに反映されてません。
なぜならcssをコンポーネント側で読み込むための設定をしていないからです。

cssを読み込もう！

publicフォルダに作成したものをコンポーネントで読み込むためには、componentsディレクトリの中に、_preview.hbs を作成します。

▼componentsディレクトリの中に_preview.hbsを作成


  fractalDemo/
    ├ styleGuide
      ├ components
      |  ├ button01
      |     ├ button01.hbs
      ├ _preview.hbs

fractalDemo/

├ styleGuide

├ components

| ├ button01

| ├ button01.hbs

├ _preview.hbs

_preview.hbsには以下のように記述します。


  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <link media="all" rel="stylesheet" href="{{ path '/css/style.css' }}">
      <title>Preview Layout</title>
    </head>
    <body>
      {{{ yield }}}
    </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>Preview Layout</title>

</head>

<body>

{{{ yield }}}

</body>

</html>

これで完成です！ブラウザで確認してみると、、、

CSSがあたってますね！
ホバーするとアニメーションも効いているはずです！いい感じです！

Assetsタブを追加しよう

現在、タブにはHTML・View・Context・Info・Notesしかありませんが、
ここに「Assetsタブ」を追加できます。

Assetsタブを作成することで、ブラウザ上でcssやjsをコピーできるようになります。
つまり、以下のようになるということです。

じつは、ここにjsファイルや画像なども出力させることができます。

今回は、先ほど作成したボタンをクリックしたらアラートを出すようなスクリプトをjQueryを使って書いてみようと思います。

まず、publicフォルダにjsファイルを作成します。
▼publicフォルダにjsファイルを作成


  fractalDemo/
    ├ public
        ├ css
          ├ style.css
        ├ js
          ├ index.js

fractalDemo/

├ public

├ css

├ style.css

├ js

├ index.js

次に、作成したindex.jsに、以下のように記載します。


  $(function () {
    $('.button01').on('click', function () {
      alert('clicked！');
    });
  });

$(function () {

$('.button01').on('click', function () {

alert('clicked！');

});

続いて、_preview.hbsのbody閉じタグの直前で先ほど作成したjsファイルと、jQueryを読み込みます。
▼_preview.hbsでjsファイルを読み込むように設定（jQueryが必要であればここで読み込む）


  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <link media="all" rel="stylesheet" href="{{ path '/css/style.css' }}">
      <title>Preview Layout</title>
    </head>
    <body>
    {{{ yield }}}
    <!-- index.jsでjQUeryを使う場合は読み込んでおく -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="{{ path '/js/index.js' }}"></script>
    </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>Preview Layout</title>

</head>

<body>

{{{ yield }}}

</body>

</html>

そうしたら、componentsにindex.jsを作成して、先ほどpublicフォルダ内のindex.jsに記載したスクリプトと同じものを記載します。


  fractalDemo/
    ├ styleGuide
    |  ├ components
    |    ├ button01
    |       ├ button01.hbs
    |       ├ style.css
    |       ├ index.js
    ├ _preview.hbs

fractalDemo/

├ styleGuide

| ├ components

| ├ button01

| ├ button01.hbs

| ├ style.css

| ├ index.js

├ _preview.hbs

ブラウザを確認してみると、、、

いい感じですね！！
ボタンをクリックしたらアラートもでるし、Assetsタブにも反映されています！

Compoundする

Compoundとは、混ぜ合わせる・調合するといった意味です。

たとえば、button01.hbsを作成しましたが、別のボタンコンポーネントとして、button02、button03・・・と作成したい場合、
それらを管理しやすいように、ひとつの「buttons」フォルダに格納したいと思うはずです。
この、ひとつにまとめることをFractalではcompoundと呼びます。

では、これまで作成してきた「button01」フォルダを同階層にコピーして、名前を「button02」としてみましょう。
現状、フォルダ構造は以下のようになっています。

▼button01をコピーしてbutton02を作成


  fractalDemo/
    ├ styleGuide
    |  ├ components
    |    ├ button01
    |        ├ button01.hbs
    |        ├ style.css
    |        ├ index.js
    |    ├ button02
    |        ├ button02.hbs
    |        ├ style.css
    |        ├ index.js
    ├ _preview.hbs

fractalDemo/

├ styleGuide

| ├ components

| ├ button01

| ├ button01.hbs

| ├ style.css

| ├ index.js

| ├ button02

| ├ button02.hbs

| ├ style.css

| ├ index.js

├ _preview.hbs

そして、button01とbutton02をbuttonsというフォルダにまとめましょう。（これがcompound）

▼button01とbutton02をbuttonsフォルダにまとめる


  fractalDemo/
    ├ styleGuide
    |  ├ components
    |     ├ buttons
    |         ├ button01
    |         ├ button02
    ├ _preview.hbs

fractalDemo/

├ styleGuide

| ├ components

| ├ buttons

| ├ button01

| ├ button02

├ _preview.hbs

ブラウザで確認してみると、、、

うまくいきましたね！！お疲れ様です！

その他

レスポンシブ対応

以下のようにウィンドウ幅を変えることができるので、SPサイズの様子も確認できます。

プロジェクト全体のreadmeを設定する

デフォルトでは、以下のように記載されていますが、これがプロジェクト全体のスタイルガイドの説明になります。

この部分の変更は、「docs」フォルダの「01-index.md」ファイルをいじってあげればOKです。


  fractalDemo/
    ├ node_modules
    ├ styleGuide
      ├ docs
          ├ 01-index.md ←これをいじる★

fractalDemo/

├ node_modules

├ styleGuide

├ docs

├ 01-index.md ←これをいじる★

各コンポーネントに対してreadmeを設定する

各コンポーネントには、いくつかタブがありましたよね。
その中の、「Notes」タブには、そのコンポーネントの情報を表示させることができます。

たとえば、button01に補足情報を記載したいとします。
その場合、button01フォルダの中に、readme.mdファイルを作成します。

▼button01フォルダにreadme.mdを作成


  ├ buttons
      ├ button01
        ├ readme.md

├ buttons

├ button01

├ readme.md

readme.mdに適当な情報を記載します。たとえば今回は、以下のように記載してみました。


  コンバージョンボタンとして使用

コンバージョンボタンとして使用

ブラウザで確認すると、、、

反映されましたね！

こういうのをいちいち記載するのは面倒かもしれませんが、サイトの規模が大きかったり、何年も運用していったり、関わる人が変わったり・・・・となっていったときほど有効です。
なぜならサイトの一貫性が保たれるし、作業側も迷いがなくなるからです。

サーバーにあげたいときはどうする？

今までローカル環境で確認していましたが、サーバーにUPしたいときは静的なファイルを書き出す必要があります。
まず、fractal.config.jsに以下を記載します。

▼fractal.config.js


  /* 静的ファイルの書き出し場所 */
  fractal.web.set('builder.dest', __dirname + '/dist');

/* 静的ファイルの書き出し場所 */

fractal.web.set('builder.dest', __dirname + '/dist');

そうしたら、ターミナルにて以下コマンドを実行します。

▼ターミナルにて以下を実行


  fractal build

fractal build

うまくいかないときは、自分がstyleGuideディレクトリにいるか確認してみてくださいね★
いない場合はcdコマンドで移動してください。

ターミナルで打ったコマンドが成功すると、styleGuideの中に、「dist」フォルダが生成されます。

▼fractal buildコマンドが成功したあと（一部省略）


  fractalDemo/
    ├ node_modules
    ├ styleGuide ←※fractal buildを実行する際はここにcdする
      ├ components
      ├ dist ←こいつが生成される★

fractalDemo/

├ node_modules

├ styleGuide ←※fractal buildを実行する際はここにcdする

├ components

├ dist ←こいつが生成される★

あとは、このdistフォルダごとサーバーにUPすればOKです！！

Fractalに関する疑問

ここまで、Fractalを使って実際にコンポーネントを生成する方法などを見てきました。
ここからは、Fractalを使うシーンや運用面に関する疑問についてお答えします。

Fractalを利用するシーンはどこ？

利用するシーンは、たとえばWEBアプリのような大規模案件に適しています。
スタイルガイドがあることで複数人が関わる案件でもコードに一貫性が生まれ、各コンポーネントを容易に拡張・修正することができるでしょう。

Fractalは、簡単に言うとCSS設計管理ツールだと思ってください。

CSSというのは容易に破綻します。書く人によってまちまちです。
そういったルールの無さがCSSを破綻させ、WEBサイト全体を破綻へと導きます。

しかし、CSS設計ができていればそのような破綻は起きにくくなります。

大規模案件であればあるほど、しっかりとしたルールを管理して構築していく必要があり、Fractalのようなスタイルガイドが求められます。

Fractalを実際にどう運用していく？

Fractalにコンポーネントを追加する方法は、そこまで難しくありませんが、静的ファイルを生成するときはコマンドラインを使う必要があり若干エンジニア向きです。

とはいえ、たとえばWindowsであればそれらコマンドを打たなくても済むようにバッチファイルを作成して置くのもひとつの手です。

これをエンジニアが作成しておけば、他の人がやることはコンポーネントの追加とバッチファイルをダブルクリックし、更新された静的ファイルをサーバーにあげるだけで済みますね。

１人で使う時も便利なの？

コーディングをスニペット化する際に便利です。

筆者は普段Boostnoteというアプリで、よく使うコードを管理していますが、そのデメリットはプレビューできないことです。

しかし、Fractalを使えばプレビューができるので一目で何が実装されるかわかりますよね。

１人であればローカルホストで見るだけで十分なのでわざわざ静的ファイルを生成する必要もありません。

まとめ

いかがだったでしょうか。
本記事ではFractalの実践的な使い方についてご紹介しました。

Fractalを使うメリットは、複数人が関わる大規模案件で、各人が迷わずに、サイトで使用されている共通パーツを引き出せるところです。
これにより、作業効率のUPとサイトの一貫性が保たれます。

案件の規模問わず、ぜひ使ってみてはいかがでしょうか。

※まだ、前の記事を読んでいないという方はこちら↓
【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（環境構築編）

コーディング効率化

一覧へ戻る

BLOG ブログ

【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（実践編）

コンポーネントを作成してみよう！

スタイリングしよう！

cssを読み込もう！

Assetsタブを追加しよう

Compoundする

その他

レスポンシブ対応

プロジェクト全体のreadmeを設定する

各コンポーネントに対してreadmeを設定する

サーバーにあげたいときはどうする？

Fractalに関する疑問

Fractalを利用するシーンはどこ？

Fractalを実際にどう運用していく？

１人で使う時も便利なの？

まとめ

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

【初心者でも簡単！】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説（実践編）

コンポーネントを作成してみよう！

スタイリングしよう！

cssを読み込もう！

Assetsタブを追加しよう

Compoundする

その他

レスポンシブ対応

プロジェクト全体のreadmeを設定する

各コンポーネントに対してreadmeを設定する

サーバーにあげたいときはどうする？

Fractalに関する疑問

Fractalを利用するシーンはどこ？

Fractalを実際にどう運用していく？

１人で使う時も便利なの？

まとめ

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ