この記事は Frontrend Advent Calendar 2013 16日目のエントリです。
今年は色々なツールをワークフローに導入したり使用したりしました。中でもSassとGruntとStyleGuideツールの導入が印象深いので簡単におさらい的に紹介します。
Sass & Compass
「CSSでも十分書けるし」と思って導入を渋ってたSass。OOCSSとかに関するスライドなどから影響を受けてたこともあって、実務で書いてたCSSをSCSSで全部書きなおすというところから始めました。
- モバイル時代におけるCSSの設計と実装
- CSSプリプロセッサの取扱説明書
- ちゃんとCSSを書くために - CSS/Sass設計の話
- WebデザイナーのためのSass/Compass入門
- SMACSS
- SassとCSS設計
CompassはMixin便利だなーと思って使いまくってたんですが、このエントリで書かれてることに共感したことからAutoprefixerを使うようにして脱Compassしました。
Grunt
JSのタスクランナー。
導入する前は「Sassのコンパイルくらいならwatchオプションでコンパイルすればいいし別に…」とか思ってました。
でもGruntにやらせるタスクってのはなにも監視させるタスクばかりじゃないと気づいてからはめっちゃ便利だと気づきました。
開発中はconnectで建てたローカルサーバを使いwatchでsassのコンパイルとかをさせてlivereloadする、というスタイルがだいぶ楽でSimpleHTTPServerとかを使う率が減りました。
本番環境やステージングにアップロードするまえにはautoprefixerやcssoやuglifyといった最適化系のタスクをまとめて実行させて、成果物はcopyで別のフォルダに持っていってgrowlでタスクの終了を知らせるというスタイルでやってます。CSSの軽量化とかJSの結合って「最後に1回やりゃいっかな〜」とか自分は思いがちだったけど、Gruntのおかげで手間と感じなくなったのでこまめにやるようになりました。
よく使うプラグイン
grunt-contrib-watch
ファイル監視。
grunt-contrib-connect
ローカルサーバ建てる。建てると同時にブラウザで開く。
grunt-contrib-sass
Sassのコンパイル。
grunt-contrib-copy
コピーする。
grunt-contrib-uglify
JSの結合圧縮と難読化。
grunt-autoprefixer
CSSのベンダープレフィックスをよしなに付けて(外して)くれる。ターゲットブラウザをバージョンとかで指定できる。
grunt-csso
CSSの最適化。プロパティの並び順とかそろえてくれる。
grunt-growl
通知出してくれる。Gemのterminal-notifierのインストールが必要。
grunt-jekyll
色々あって使わなくなった。記事を書くときはJekyllのserve --watchで書く。デザインいじるときはconnectとwatchで。
grunt-contrib-imagemin
画像の圧縮とか減色。
今年は色々なツールを使ってみましたが、ワークフローを激的に変えたのはやはりGruntです。便利なツールは数多くありますが、これらのツールを一つ一つ使ってたのではコードを書く以外に時間を多く割くことになってしまいます。細々としたタスクはまとめてGruntにやらせて、もっと大事だと思う部分にフォーカスするのがいいと思います。
Jekyll
静的サイトジェネレータ。このブログを作るのに使いました。以前はBloggerで適当に書いてましたが、GithubPagesでやってみようかなと思いたち使ってみました。
テンプレートやHTMLファイルのインポートなど、ブログを楽に書くための機能がそこそこそろってるのもあって割と気に入ってます。ただカスタマイズしたいと思った部分がいじれない場合があるので、そこは割りきって使うものなのかなと思います。
めんどくさいソーシャルボタンの設置はjQuery.socialthingsというブラグインを使って、URLやタイトルの設定を自動でやってくれる用に設定しました。
OGPの設定も色々自動でできるので一回設定したらいじる必要がなくて大変楽です。
参考リンク
CSS StyleGuide
CSSのスタイルガイド作成ツール。3つ使ったのでそれぞれの感想を。
StyleDocco
Node製のスタイルガイドツール。
簡単に書けてそれなりに良い感じのスタイルガイドができる。でもスタイルガイドのスタイルのカスタマイズがしづらい。
完成度は大変高いと思います。
KSS
Ruby製のスタイルガイドツール。
StyleDoccoと比べると導入の敷居が若干高いかな？とは思うものの、スタイルのカスタマイズなどStyleDoccoで手の届かなかった部分に手が届くといった印象。
小さなプロジェクトはStyleDoccoで、ある程度大きめなプロジェクトはKSSのほうが良いのかなと個人的に思う。
Nodeに移植したものもある。
Kalei StyleGuide
JavaScriptでスタイルガイドを生成するツール(ライブラリ)。
StyleDoccoとKSSはスタイルガイドの生成にコンパイルの作業が必要だが、Kaleiはコンパイルレスでブラウザで実行されたときにスタイルガイドを生成する。
コンパイルレスってのがかなり楽で「生きたスタイルガイドを作る」という目的を達成するためには大変よろしいのではと思います。実プロジェクトでも使ってみましたが手間がほとんどかからない(ワークフローの邪魔をしない)ので気に入ってます。
(ただ自分の使い方が悪いのか、スタイルガイドのページを見まくってるとメモリリークっぽい感じで重くなってブラウザが強制終了する。。。)
Zynga JukeBox & Audiosprite
ちょっとこれまでのツールと趣向が違いますが、ブラウザでの音声再生機能を実装する際に大変役に立ったので紹介。
Zynga JukeBox
ブラウザで音声再生するためのライブラリ。
使い方などはQiitaに書きました。
スマホで音を鳴らすのには色んな制約があって、その制約を乗り越えるためにオーディオスプライトという手法が使われている。CSSスプライトのように音声を1つのファイルにつなげて、再生する部分を変えて色んな音をタイミング良く再生するというもの。
Zynga JukeBoxはオーディオスプライトの再生をJSON形式の設定ファイルで制御してくれて、異なる拡張子のオーディオファイルもブラウザに合わせて再生してくれるという賢いライブラリ。
スマホ向けのノベルゲームのエンジンを作る際に使ってみましたが、機能的にも使いやすさ的にもかなりオススメできるなと思います。
Audiosprite
Node製の音声ファイル結合ツール。
Audiospriteは音声ファイルの結合ツールで、結合のついでにZyga JukeBoxで使えるJSONファイルも作ってくれます。2つを合わせて使うことでより手軽にブラウザでの音声制御が行えます。
さいごに
最近のフロントエンドはNodeやRubyで作られたツールが非常に多く、これらを使う、使わないによって開発効率などに大きな差が出てくると考えています。導入コストはかかるかもしれませんが、どのツールもそのコストに見合ったぶんのリターンがあると思います。
フロントエンドのツールは発展が早く、どんどん新しいものが出てきますが、それらのツール全部を使いこなす必要はなく、自分に合ったものを少しずつ使って取り込んでいくのが大事かなと思います。