第1回目はhologramというRubyで書かれたスタイルガイドジェネレータの基本的な機能を概観します。シンプルでありながら高い拡張性をも持ち合わせ、柔軟にスタイルガイドを作成することができます。MarkdownRedcarpetで細かなカスタマイズparent機能このシリーズでは、hologram(ホログラム)という、Rubyで書かれたスタイルガイドジェネレータを紹介します。Systemまず第1回の今回は、hologramがどういったものか、サンプルとともに紹介しましょう。今回はざっくりとこんなふうになるという解説にとどめますので、細かい解説は次回以降に行っていきます。紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。hologramサンプルリポジトリhttps://github.com/codegrid/hologramこのシリーズは、次の環境にて動作を確認しています。環境や各ソフトウェアのバージョン違いにより、本シリーズで解説している内容がそのまま動作しない可能性がありますので、その点ご留意ください。1.1.0hologramの特徴この記事では、スタイルガイドとは何か、スタイルガイドジェネレータとは何かという解説は省きます。CodeGridで過去に、StyleDocco、KSSの2つのスタイルガイドジェネレータについて連載しましたので、そちらも併せて参照していただくと、本シリーズの内容をより深く理解できることと思います。CodeGridhologramは、Rubyで書かれたスタイルガイドジェネレータです。.css、.scss、.sass、.less、.styl形式のファイルに書かれたコメントから、自動でスタイルガイドを作ってくれます。スタイルガイドは、静的なHTMLファイルとして出力されます。Sullivan氏が、自身のプレゼンテーションの中でhologramを取り上げていたのを見て知りました。そのプレゼンテーションとは、以下です。Sullivan氏が関わった、とあるサイトのCSS再設計について解説されています。その中で、OOCSSのストラクチャとスキンを、スタイルガイド上で表現するのにhologramを使ったということが述べられていました。ちなみに、その中で紹介されていたスタイルガイドは、次のURLより閲覧可能です。Services筆者はこのプレゼンテーションを見て興味を持ち、hologramを触ってみたわけですが、そのストラクチャとスキンの表現もさることながら、自分でスタイルガイドの見た目などをカスタマイズできるようになっており、これらが非常に手に馴染む感覚を得ました。hologramは、若いオープンソースのプロジェクトで、正直なところ、まだドキュメントもそんなに用意されていませんし、気の利いたテンプレートも用意されているとは言えない段階のもののように思えます。サンプルとして提供されているテンプレートも、筆者としては、かなりわかりづらかったです。そのため、スタイルガイドとして出力されるHTMLのテンプレートは、自分でイチから書き直しました。現段階では、いくつかのコマンドを叩くだけで文句の付けようがない素晴らしいスタイルガイドができる......とは言えないでしょう。hologramは追って解説するRedcarpetというgemや、Rubyの標準モジュールであるERBを使って作られており、とても自由度の高い作りとなっています。Rubyの基礎的な知識を持っている人であれば、かなりいじりやすいソフトウェアです。Rubyの勉強がてら、突っ込んで使ってみるのもよさそうです。わからない箇所はこのシリーズにてカバーしているつもりですので、スタイルガイドに悩んでいる人は、一度、このシリーズを読みながら、hologramを触ってみてはいかがでしょうか。Markdownhologramは、CSSファイルのコメントに書かれたMarkdownをパースし、HTMLにしてくれます。各コメントは、その頭に書かれたYAMLフォーマットのデータを元に、ひとつの文章の塊としてまとめられ、インデックスされたHTMLファイルが作られます。YAMLとはYAML(ヤムル)とは、XMLやJSONのような、構造化されたデータを表現するテキストのフォーマットです。JSONと同じような構造を表現できるものと考えて問題ありません。次のようなYAMLのデータがあるとします。purpleこれはJSONで表すと次のようなデータ構造になります。"purple"}このように、データを手軽に書けるのがYAMLの特徴です。hologramによってどういったスタイルシートができるのか、例を見てみましょう。次のようなCSSがあったとします。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。こんなふうに解説を書きます。class="mainText">彼は背後にひそかな足音を聞いた。class="mainText">彼は背後にひそかな足音を聞いた。0;}hologramはこれを、次のようなHTMLへと変換してくれます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。見出しの解説等をここに書きます。こんなふうに解説を書きます。class="mainText">彼は背後にひそかな足音を聞いた。class="nt">&gt;</span>彼は背後にひそかな足音を聞いた。class="nt">&lt;/div&gt;</span></pre></div></div>これにスタイルを当てると、例えば、次のような表示になります。hologramで書き出したスタイルガイドの例コメントの先頭に書いたYAMLのtitleが見出しになり、それ以降の内容はMarkdownとしてパースされ、HTMLになります。出力されたHTMLと、元となったCSSファイルを見てみましょう。ひとつ、別のコメントブロックもHTMLに変換されているのが確認できます。common.css基本的には、このように、CSSファイル内のコメントにMarkdownを書いていくことで、スタイルガイド*を作っていきます。*注:スタイルガイドのスタイルちなみに、このスタイルガイドのCSSは、筆者が書いています。デフォルトでこの見栄えが用意されているわけではありません。Redcarpetで細かなカスタマイズこのようにMarkdownでスタイルガイドを書くことのできるhologramなのですが、hologramは、Redcarpetという、GitHubでも使われているRubyのgemを使って作られています。Redcarpetは、シンタックスハイライトを自動できれいにやってくれます。具体的には、細々としたクラス付きのspan要素がコードに散りばめられることとなりますが、このHTMLにスタイルを当てると、例えば次のような表示にすることができます。シンタックスハイライトされたコードの表示例そして、とってもすばらしいのが、自分でいろいろとカスタマイズができるという点です。blockに囲まれたHTMLがあるとします。class="mainText">彼は背後にひそかな足音を聞いた。それはあまり良い意味を</h2></div>```これを次のように、そのコードそのまま出力したもの(上側)と、コードハイライトしたもの(下側)両方を出力することができます。blockの出力内容をカスタマイズできるようになっています。hologramを経由し、自分でRedcarpet用の追加ロジックを書くことで、さまざまなカスタマイズが可能です。blockの言語指定がblockであった場合の出力内容を指定しています。このほかRedcarpetで用意されているAPIは、hologramを経由して一通りいじれるようになっているので、こんなふうにしたいという場合、自分でRubyのコードを書くことにはなりますが、いろいろと融通が利きます。実際にこの機能を使った出力結果を見てみましょう。出力されたHTMLと、元となったCSSファイルです。blockが、ちゃんと変換されて出力されているのがわかります。parent機能hologramには、はじめに軽く述べた通り、OOCSSにおけるストラクチャとスキンの関係であったり、BEMにおけるブロックとモディファイアの関係を表現するための、parentという機能があります。参考OOCSSやBEMについては、過去に連載した次の記事を参照してもらえればよいかと思います。CodeGrid例えば、次のようなCSSがあったとします。class="mainText">彼は背後にひそかな足音を聞いた。0;}この部分のCSSは、HTML上では、次のように表示されることを想定しています。スタイルが適用された状態このとき、この部分のCSSコメントに書いたYAML内のnameがheading1であることを覚えておいてください。この見出しのバリエーションとして、次のような見栄えの見出しを作りたいとします。バリエーション(緑)バリエーション(ピンク)このような場合、OOCSSのスキンや、BEMのモディファイアの考え方を用いれば、次のようにし、複数のクラスでこれを実現することとなります。class="mainText">彼は背後にひそかな足音を聞いた。class="mainText">彼は背後にひそかな足音を聞いた。heading1を追加します。バリエーション`typeA`です。class="mainText">彼は背後にひそかな足音を聞いた。バリエーション`typeB`です。class="mainText">彼は背後にひそかな足音を聞いた。#cd9a8d;}すると、これらのコメント群が離れている場合でも、次のようにheading1に、一段階レベルの下がった見出しとともに、後続する形でスタイルガイドが作られます。common.cssこの機能を使えば複数のファイルにまたがるコードであっても、構造を考慮し、hologramがうまい具合にひとつのHTMLに出力をまとめてくれます。上記サンプルでは、コメントの順序としては、次のようになります。heading1heading2heading1--typeAheading1--typeBここでheading2のコメントの内容が、最後に配置されていることに注目してください。OOCSSやBEMなどのモジュールを意識したコーディングを行う際、このような機能は有効に機能するでしょう。今回は、hologramの機能をざっくりと紹介しました。次回はhologramを実際に動かしてみながら、機能の解説をしていきます。壮フロントエンド・エンジニアWeb制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。Webサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。jQuery入門』(技術評論社、2014年11月14日)がある。2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。特定商取引法に基づく。