Grooves開発ブログスマートフォン用の表示で見るGrooves開発ブログ2015-11-12スタイルガイドジェネレータHologramとBrowserStackでクロスブラウザチェックをするこんにちは、デザインチームの@_ringogirlです。弊社では現在スタイルガイドの構築をHologramというgemを使って進めています。Hologramのプラグインに関する記事が少ないため、作り方をまとめてみました。今回はサンプルとしてBrowserStackを使って複数のブラウザからスクリーンショットを撮り、スタイルガイドに貼り付けるプラグインを作ってみます。HologramRuby製のスタイルガイドジェネレーターです。CSSに書いたコメントからスタイルガイドを生成してくれます。SassやLESSにも対応しています。trulia/hologramHologramのプラグインREADMEには載っていませんがHologramはプラグインを作る機能を提供しています。このプルリクエストでプラグインを作る機能が追加されました。コメントにサンプルのプラグインもあるので、気になる方はぜひ参考にしてみてください。BrowserStackを使ってスクリーンショットを撮るプラグインを作るBrowserStackを使って複数ブラウザからCSSコンポーネントのスクリーンショットを撮り、ドキュメントに貼り付けるプラグインを作っていきます。Hologramの初期設定や使い方については以下のブログ記事が参考になります。はじめるスタイルガイド入門これからはじめるGulp(25):Hologramとgulp-hologramでスタイルガイドを作るプラグインファイルの準備Hologramはrubyのファイルを直接指定してプラグインを読み込みます。今回は設定ファイルと同じディレクトリにhologram_screenshot.rbというファイルを作成しました。設定ファイルに以下のように追記します。hologram_screenshot.rbプラグインファイルの実装プラグインにはフックできる場所いくつかあり、それらを使ってプラグインの処理を実装していくことになります。Hologram::pluginクラスを継承します。クラス名はファイル名をアッパーキャメルケースにしないと読み込まれないので注意してください。endend@nameはプラグイン名で、後ほど使用します。has_plugin)CSSのドキュメントコメントがパースされた後に実行されるフックです。パースされた情報をもったcomment_blockや、コメントが書かれていたCSSのパスfile_nameが引数として与えられます。スクリーンショットを撮るときにスタイルが適用されるように、ファイルを読み込みます。今回はscssでスタイルを書いたので、トランスパイルしておきます。file_name)ドキュメントコメントに以下のように書くとその内容がplugin_dataに渡されます。initializeで定義した@nameと同じものを[[[plugin:PLUGIN_NAMEの形式で記述します。Button</a>]]][[[plugin:PLUGIN_NAME]]]コメントはplugin関数の戻り値に置き換えられます。今回はスクリーンショットを埋め込みたいので、<img>タグを文字列として返してみます。build_styleguide_html(screenshots)endbuild_htmlではBrowserStackがスクリーンショットを撮るためのWebサーバーに表示するHTMLを作っています。長くなってしまったため具体的なコードはここでは省きますが、処理としては以下の様なことをしています。APIでhttp://localhost:3000/のスクリーンショットを撮るfinalizeプラグインの最後で実行されます。pagesにはドキュメントとして生成されたHTMLファイル名や、comment_blockと同じ値が渡されています。#{pages.keys.first}."endプラグインファイル省いたところもありますが、プラグインは以下のようになりました。基本的にはこのような構成にするとプラグインが動作します。BrowserStackLocalの起動endプラグインを実行してみるドキュメントの準備ドキュメント用にbutton.scssを用意して以下のようにしました。bootstrapを読み込んで、.btn-primaryの色を変えています。#c2185b;}本題からは逸れますが、上記のようにbootstrapのクラスを上書きするのは好ましくないので、bootstrap-sassなどを使ってSassの変数で上書きすると無駄にクラスを増やさないですみます。実際にプラグインを動作させるには以下のコマンドを実行します。--screenshot@nameで設定した値をオプションとして渡すとプラグインがアクティブになります。以下が実際にプラグインを動作させて生成されたドキュメントです。(HologramのテーマであるCortanaを使っています。)HTMLのコードの下にそれぞれスクリーンショットが貼り付けられているのがわかると思います。firefox37.0でスクリーンショットを撮ってみました。コンポーネント単位ですが複数ブラウザでの見え方がわかるので、レイアウトの崩れなどが事前に発見できるかもしれません。まとめHologramは十分便利なのですが、プラグインで拡張していくことで、さらに便利で使いやすいスタイルガイドを作ることができるのではないでしょうか。12:06スタイルガイドジェネレータHologramとBrowserStackでクロスブラウザチェックをするTweet関連記事2017-01-18GitHubリポジトリが突然消えたときにやるべきこと新年あけましておめでとうございます。Forkwel...2016-05-16CSSスタイルガイドを作って良かった話こんにちは、デザインチームの@_ringogirlです。フレックスでの深夜勤務を認めることができなかったか?ユーザーニーズを把握する「UXリサーチ集中講座」に参加しました月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。