1.スプライト画像作成

画像の量がまあまあ多いので、使用時の通信量を抑制したい
glyphiconsっぽく使えるようにしたい
スプライト画像作ってみたい(重要)

という理由から、各アイコン画像を一つの大きな画像(スプライト画像)にまとめる。
画像作成にはcompassを使用した。

ディレクトリ構成は↓の通り。

assets/
|-images
| ├ cocha #cocha-iconsの画像を配置.
| └ cocha-xxxxx.png #compassで自動生成されたスプライト画像.
|-sass
| └ cocha.scss #ベースになるscss
└ stylesheets
  └ cocha.css #sass/cocha.scssを基に、coompassでビルドしたcss.

以下の手順で、cocha-iconsの画像を基にスプライト画像を生成できる。
1. compassをインストール + compass createでプロジェクトフォルダ生成
2. assets/images/cochaに画像を配置
3. config.rbを編集して、compassによるコンパイルの動作を設定
4. compass build実行

config.rbの内容はこんな感じ.

http_path = '/'
css_dir = 'assets/stylesheets' #scssのコンパイル出力先を指定
sass_dir = 'assets/sass' #ベースとなるscssの配置先を指定
images_dir = 'assets/images' #ベースとなる画像のフォルダを指定
javascripts_dir = 'assets/javascripts' #未使用

#改行等が削除された、圧縮形式でcssを出力.
output_style = :compressed

#scssコンパイル時、画像への参照パスを相対参照にするよう指定.
#デフォルトでは、画像への絶対パスを指定するcssが出力されてしまう.
relative_assets = true

#コンパイル形式を指定.
#デフォルトでscssだけど、明示する意味で記載.
preferred_syntax = :scss

compass buildを一発叩くだけで、assets/images/*以下の画像を一枚のスプライト画像にまとめてくれるだけでなく、スプライト画像から各アイコンを切り出すためのbackgroudが設定されたcssも生成してくれる。
難所だと思っていたスプライト画像生成 + cssが、一発で終わってしまった・・・

2.デモページ作成

「実際にどんな感じで使えば良いか」が分かるよう、デモページも作成。
スプライト画像+css作成がcompassのおかげで一瞬で終わってしまったので、こちらで少し頑張ってみた。

デザインには、最近よく耳にするmaterial-uiを使ってみた。cssフレームワークとしてmaterializeを使用。
デモページの項目ごとにhtmlをいくつも作りたくないので、riot.jsを使ってSPAとして構築。

ここで使ったriot.jsが存外に便利だった。次項で感想。

3.vue.js と riot.jsの比較

別の個人プロジェクトでは、クライアントサイドでvue.jsを使っていたが、

vue.jsでいう単一コンポーネントファイル的な仕組みが、riot.jsではより簡単にできる。vue.jsだと、作成した.vueファイルをwebpackなりで事前にビルドする必要があったが、riot.jsの場合はscriptタグ読み込みのみで実現できる。
軽くて早い。本体部分のロード時間が75ms。materializeを使うためにロードしているjQueryの5分の1。
機能がシンプルな分、直感的。vue.jsやpug(jade)を使っていてテンプレートエンジン的な書き方に慣れていれば、大体書き方の見当がつく。

一方で気になった点として、

ミニマルな思想なので当然だが、標準機能が貧弱。ルーティング機能も外付け(vue.jsもこの点は同じ)なので、今回は自前で簡易的に実装した。
vue.jsの公式ページでも言及されているが、公式ツールが少ないため、ちょっと凝ったことをしようと思ったら基本的に自分で作る or 自分でツールを漁る必要がある。
DOMに対するclassの指定がやりにくい。静的な指定と動的な指定を共存させようとすると、関数を作って一つの文字列として生成してやる必要がある(やり方の問題かもしれない)。

使ってみた感じとしては、今回のデモサイトのように

小規模なページ
とにかく動くものが欲しい
browserifyだのwebpackの設定だの、環境の準備に時間を割きたくない

というようなケースだと、riot.jsのスピード感は非常に強力。
一方で、

中〜大規模なページで、jsの非同期ローディング等の工夫が必要になってきそう
pug(jade)やscss(sass)をコンポーネントファイル内で使いたい(riot.jsは、コマンドで事前コンパイルする必要がある)
babelやuglifyを使って、jsコードもトランスパイルしたい

というようなケース、つまりは「scriptタグで直接読み込んでガシガシ動かす」で間に合わないケースだと、vue.jsの方が良さそうな印象。
ルーター等のツールを諸々追加して、事前コンパイルしてバンドルして、と色々手間をかけなくちゃいけなくなったなら、vueの方が基本的に機能もツールも豊富なんだから、riotじゃなくてvueでいいじゃん、という感覚。
riotは、「小さくて軽い」「モダンなUI、リッチなUX」「開発スピード」を全て満たしたい and 満たせるケースで輝くと感じた。

4.雑感

compass便利。とりあえずスプライト画像化を試してみたいと思った時に手軽に導入できる。
riotのスピード感は異常。軽量/モダン/高速開発を求めるならベストな選択っぽい。一方、色々工夫したい/しないといけないなら、vueの方がツールが豊富な分作りやすそう。
「スプライト画像化して終わり」にはならなさそう。現状、画像の反転等はデモページでは逐一行っているので、cocha-right的な「右向きのアイコンはそのまま、左向きのアイコンは右向きにする」的なヘルパーもあった方が便利だと(デモ作成中に)感じた。

ライセンスは本家と同じクリエイティブ・コモンズ表示 - 継承 4.0 国際ライセンスなので、利用はご自由に。
冒頭でも記載の通り、npmパッケージとしても配布しています。

「誰でも使えるオープンソースなネットワークアイコン」をCSS化してみた

1.スプライト画像作成

2.デモページ作成

3.vue.js と riot.jsの比較

4.雑感