アップデートのきっかけ

LESSTESTERを見直すきっかけになったのは、StackOverflowで「バージョンが古い。5年前のバージョン。（意訳）」と言及されていたのを見かけた事。 実際は、Less v1.7.0が出たのが2014年2月でLESSTESTERアップデートが翌3月なので3年しか経ってない事をここに釈明しておきます。 しかし、Lessのバージョンがv2.7.2まで上がっている間ずっと放置してしまったのは反省しないといけませんね。

cf) https://github.com/less/less.js

本当はLessユーザーも希少な様子なので閉めようかとも考えましたが、 せっかく公式にも取り上げてもらっていた事ですし、 案件で得られた経験値を試すついでにまるっと作り直してみようと思いました。

そして出来たもの

新しくついた機能 :

• ドラフトが端末に保存できるようになりました
• Lessのバージョンを選択できるようになりました
• キーマップに sublime が追加されました
• リアルタイムコンパイル

新しくつけようと思ったけどやめた機能 :

• URLでシェアする機能（理由 : コストのわりに使われ無さそう）

活用した技術など :

• Vue.js – https://jp.vuejs.org/
• AWS S3の静的サイトホスティング
• AWS Route53 + CloudFront でSSLに対応
• （おまけ） さくらのメールボックス

感想

ゼロから組み直したにしては、AWSとVue.jsが大変便利だったおかげで短時間で完成しました。

Vue.js

現在進行系で進んでいるプロジェクトで使っているのですが、 低い学習コストのわりに高機能かつ使い勝手が良く、規模問わず動的なWebアプリケーションを作るのに大変便利です。

AWS S3

言わずと知れたS3さんは便利すぎる。 もう全部これでいいんじゃないでしょうか。

AWS Route53 + CloudFront

SSL対応がこんなに簡単で安価になるとは、時代を感じます。 CloudFrontは高機能である反面、デプロイと変更の適用で結構待たされるので、いろいろな設定を試す段階ではちょっと辛い部分はありました。

また、今回は使っていませんが API Gateway / Lambda / RDS あたりは触る機会がどんどん増えていくのではないかなと思っています。

さくらのメールボックス

SSL対応の際にドメイン所有者の確認のためメールが送られるので、それを受け取る為に使いました。 年額1000円程度で複数ドメインを使用できるのでかなりリーズナブルです。 メールサーバの構築はなにかと面倒なので、ぜひ利用していきたい選択肢ですね。

セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】

まとめ

お買い物もホビーも開発もAmazonに依存する時代の到来です。 それぞれのリソースについては時間があれば追って使い方などを記事にまとめておきたいところです。

隣接セレクタを使用したトグルボタン

IEはバージョン8から隣接セレクタが使えるようになります。 ここでは、その隣接セレクタとラジオボタンを使ってトグルボタンを作ってみます。 ラジオボタンをチェックボックスに変更すれば複数選択可能なボタンが表現できます。

Toggle Button Demo

要点は、下記の通りです。

• :checked 擬似クラスと隣接セレクタ（+）を使用
• input要素は非表示にして、隣接する span.label 要素をボタンのように見せる
• label 要素でラップして選択出来るようにする

ところが、このコードは次に挙げる問題によりIE8では正常に動作しません。

非表示のラジオボタン/チェックボックスの選択が出来ない

IE8以下では、display:none や visibility:hidden で非表示にしたinput要素を選択する事ができません。 これは関連付けられた label 要素をクリックしても同様です。 選択出来ないというのはつまり、checked 属性もつかなければ、changeイベントも発火しないという事です。

そこで、display/visibility を使わずに opacity を使用して非表示にします。

.toggle-button input[type=radio] {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: none;
}

:checked の使用

IE8は隣接セレクタは使えますが、:checked 擬似クラスには対応していません。 その為、代替として選択状態の物に checked クラスを付与して使用します。

.toggle-button .checked + .label {
    background-color: magenta;
    color: #fff;
}

そして、input要素の選択状態と checked クラスを同期する為に次のような処理を追加してやります。

$(document).on("change", "input[type=radio], input[type=checkbox]", function(){
    $(document.getElementsByName(this.name)).each(function(){
        $(this).toggleClass("checked", this.checked);
    });
});

このコードは、input要素の選択状態が更新されるたびに、 同じnameを持ったinput要素の checked クラスの有無を、その選択状態によって更新します。

さらに注意が必要なのは、次のような書き方が出来ない点です。

.toggle-button :checked + .label,
.toggle-button .checked + .label {
    /* ここの指定はIE8で無視される */
}

一見問題なさそうですが、:checked 非対応のIE8ではこのセレクタ内のスタイル指定は無視されてしまいます。

.checked と :checked はJavaScriptで同期されているので .checked の指定だけで良しとするか、 どうしても :checked の指定も記述したい場合は分離して指定する必要があります。

.toggle-button :checked + .label { ... }
.toggle-button .checked + .label { ... }

最終的なコード

Toggle Button Demo

（おまけ）IE11のエミュレーションでの表示不具合

IE11の開発ツールのエミュレーション機能でIE8を選択して上のコードを確認すると、 隣接セレクタまわりの表示更新が上手くされずに、少しおかしな挙動を見せます。

• ボタンをクリックしてもボタンのスタイルが更新されない
• 前に選択されていたボタンがきちんとトグルされない

ちなみにマウスオーバーするとようやくボタンのスタイルが更新されたりします。

ネイティブのIE8はもちろん、IE10迄のブラウザモード切替でも正常に動作するのでさしたる問題ではないですが、 動作確認がちょっと捗らなくなるので、そういう事があるのだと知っておくと良いと思います。

Minify

minify は、リソースを圧縮してサイズを小さくするプロセスの事です。 JavaScript のファイルで偶に jquery.min.js のように接尾辞 min をつけている事があると思いますが、 これはおそらく minified という事でしょう。

Webコンテンツはネットワークからリソースをダウンロードして動くので、それらの軽量化は重要な課題の一つです。 特に JavaScript と CSS のミニファイツールは広く出回っていて導入も簡単です。

uglify + mincss

まずは Grunt から公式にプラグインが提供されている UglifyJS と Cssmin を使ってみましょう。

UglifyJS

UglifyJS は JavaScript で実装された JavaScript の圧縮ツールです。 コマンドラインで圧縮する場合は npm で uglify-js をインストールし、uglifyjs コマンドを使用します。 Grunt で使用する場合は、 grunt-contrib-uglify をインストールします。

ここでは、Grunt でのシンプルな例を挙げてみます。（Grunt の基本的な部分はここでは省きます）

uglify: {
    dist: {
        options: { ... },
        files: {
            "js/hoge.min.js": "js/hoge.js",
            "js/foo.min.js": ["js/foo.js", "js/bar.js", "js/baz.js"]
        }
    }
}

options では圧縮のレベルなど、非常に多くの項目の設定が可能です。 files オブジェクトの キー に出力先のファイル名を指定し、値にソースとなるファイル（群）を指定します。 複数ファイルをまとめて圧縮したい場合は、配列で指定する事ができます。

上の例では、 “js/hoge.js” の圧縮結果が “js/hoge.min.js” に保存され、 “js/foo.js” + “js/bar.js” + “js/baz.js” を圧縮した結果が “js/foo.min.js” として保存されます。

Cssmin

Cssmin は CSSファイルを圧縮する為の Grunt タスクです。 Grunt タスクの多くがそうであるように、基本的な使い方はあまりかわりません。

cssmin: {
    dist: {
        options: { ... },
        files: {
            "css/hoge.min.css": "css/hoge.css",
            "css/foo.min.css": ["css/foo.css", "css/bar.css", "css/baz.css"]
        }
    }
}

単純にファイルを指定する方法の他に、「指定したディレクトリ内のCSSファイルを全て圧縮して “*.min.css” として保存する」 なんていうことも設定次第では出来ます。 Grunt は素晴らしいですね。

その他のミニファイツール

YUI Compressor

http://yui.github.io/yuicompressor

Yahooが提供する、非常に古くからある Java で書かれた JavaScript / CSS 共に圧縮可能なミニファイツールです。 ダウンロードした jar ファイルを java コマンドで実行して使います。設定できるオプション項目は、あまり多くはありません。

$ java -jar /the/path/to/yuicompressor.x.x.x.jar foo.js -o foo.min.js

基本的な使い方は上の通りで、”foo.js” を圧縮した結果を “foo.min.js” に保存します。 毎回 jar ファイルを指定するのは面倒なので、Linux / Mac 環境ならば alias を設定したり、 Wndows 環境なら bat ファイルを作成するなどしましょう。

$ alias yuicompressor='java -jar /the/path/to/yuicompressor.x.x.x.jar'

Google Closure Compiler

Google Closure Compiler は Google が提供する JavaScript 用のミニファイツールです。 コマンドラインで使用できる他、サービスAPIやオンラインでのテストツールも用意しています。

コマンドラインでは YUI Compressor 同様に Java コマンドで実行します。

$ java -jar /the/path/to/compiler.jar --js foo.js --js_output_file foo.min.js

Google Closure Compiler には多くのオプションが用意されていますが、 中でも重要なのが圧縮のレベルを3つのモードから選択する –compilation_level です。

• WHITESPACE_ONLY
  
  改行や不要なスペース等を除去するだけの、もっとも簡易なモード
• SIMPLE_OPTIMIZATIONS
  
  WHITESPACE_ONLY モードに加えて、ローカル変数や関数等のリネームによる短縮を行います。
  
  これが初期値です。
• ADVANCED_OPTIMIZATIONS
  
  SIMPLE_OPTIMIZATIONS に加えて、グローバルな変数・関数のリネームを行ったり、
  
  恐らく不要であると思われるコードを除去したりする、非常にアグレッシブなモードです。
  
  その為のルールに則った書き方をしなければなりません。

cf) Closure Compiler Compilation Levels – Closure Tools — Google Developers

参考資料

• UglifyJS — JavaScript parser, compressor, minifier written in JS
• gruntjs/grunt-contrib-uglify
• gruntjs/grunt-contrib-cssmin
• YUI Compressor
• Closure Tools — Google Developers

LESS

LESS は Sass や Stylus 等と並び称されるCSSのメタ言語です。 くだいて言うと、スタイルシートをもっと楽に効率よく書くために開発されたツールです。 三者の中では Sass が筆頭で使われていて、LESS と Stylus がそれに続く印象です。

私の知る限りでは、元々 LESS は Sass と同じく Ruby ベースで開発されていましたが、 並行して開発された LESS.js の方が主流となって JavaScript ベースで開発されるようになり、 現在に至っています。

LESS 記法の基本

上に挙げたメタ言語ではおそらくどれでも共通している機能ですが、

• セレクタを入れ子に出来る
• 変数が使える
• ミックスイン（関数のようなもの）が使える

これらの機能を把握しておくだけで、スタイルシートのコーディングが効率化出来るでしょう。

// 変数
@color-black: #000;
@color-red: #c00;

// ミックスイン
.mx-box (@bg-color: #eee, @radius: 10px){
    background-color: @bg-color;
    border-radius: @radius;
    padding: @radius;
}

// セレクタの入れ子
.container {
    .box {
        &.black {
            // ミックスインと変数の呼び出し
            .mx-box(@color-black, 8px);
        }
        &.red {
            .mx-box(@color-red, 8px);
        }
    }
}

上のコードを LESS でコンパイルすると、次のようなコードが出力されます。 （拙作ですが、LESStester.com を使ってオンラインで出力のテストが出来ます）

.container .box.black {
    background-color: #000;
    border-radius: 8px;
    padding: 8px;
}

.container .box.red {
    background-color: #c00;
    border-radius: 8px;
    padding: 8px;
}

残念ながら、この例のコードはあまりに短い為にメタ言語の魅力を十分に伝えきれません。 「単にCSSが長くなっただけじゃないか」と思われる方もいらっしゃるかもしれません。

しかし例えば、似たパーツのバリエーションを多数作らなければいけなかったり、 複雑な子孫関係を持ったセレクタを延々と書かなければならないスタイルシートでは、どうでしょうか。 また、スタイルシートを書いた人の思考は、どちらによりよく反映されるでしょうか。 共有して作業しやすいのは、どちらでしょうか。

コードの行数よりも、調整やメンテナンスの効率で大きな違いが出てくる未来が想像できます。

LESS の魅力

こうしたツールはやはりマジョリティに依りたくなるのが当然です。 機能面でも、歴史があって柔軟かつ多彩な Sass に叶わない部分は多くみられますが、 LESS にも優れている所は勿論あるのです。

JavaScript ベースであること

全て JavaScript で書かれている為、クライアントサイドで動かすことができます。 実際の開発ではコンパイル済みのCSSに差し替えた方が良いと思いますが、 少し何かを試したい場合などには便利ですね。

<link rel="stylesheet/less" href="style.less">
<script src="less.js"></script>

また、JavaScript ベースだということは、 近年流行にのっている Grunt との相性も良いという事です。

Grunt では Sass / LESS / Stylus 共にコンパイルするプラグインが公式に提供されています。 JSベースである LESS / Stylus は npm でプラグインをインストールすればすぐ使えるようになりますが、 Sass は別途 ruby と sass をインストールしておく必要があります。

また当然、Sass は外部コマンドを node.js から呼ばなければならないので、 どうしてもコンパイルの効率が落ちてしまいます。

CSS離れをしない記法であること

これが LESS を推したい一番の理由なのですが、LESS の記法は他の二者に比べると生のCSSにかなり近い形になっています。 例えば、基本的なミックスイン（関数のようなもの）を LESS で書くとこうなります。

.border-radius(@radius:10px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box { .border-radius(20px); }

CSS でクラスを定義するのとあまり変わりませんね。

「CSS離れをしない」という事は反面、Sass が持つような 条件分岐やループなどの強力な機能を実装しないという事になりますが、 学習コストを抑えられるという点ではメリットになります。

CSSの素養のある方なら誰でもそのコードを理解する事ができ、使いこなすようになるのにさして時間を要しません。

Bootstrap は LESS ベースです

Twitter からリリースされている Bootstrap は LESS で開発されており、 プロジェクトに Bootstrap を組み込む際には単純にCSSを読み込む他に LESS ファイルを利用する方法があります。

必要なモジュールだけを読み込んだり、変数を書き換えて見た目を調整したりする事ができるほか、 便利なミックスインも多数提供されています。 LESS で設計する際の教材としてみても良いかもしれませんね。

（なお、Bootstrap の Sass 版はサードパーティで公開されている方がいます）

注目すべき LESS の機能

最近になって実装された機能や、おすすめしたい要素等を少しご紹介します。

ミックスイン

ごく基本的な機能ですが、先に紹介した通り LESS のミックスインは非常にシンプルな作りになっています。

.inline-block(){
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.test {
    .inline-block();
}

引数を受け取る為の “()” 以外は CSS のクラスと変わらない記法です。 さらに、通常の CSS クラスもミックスインとして使用する事ができます。

.inline-block { ... }
.test {
    .inline-block();
}

上の2つのコードの違いは “()” の有無ですが、 これが記述されていない場合は通常の CSS クラスとして認識され、それ自身もコンパイル時に出力されます。 “()” が記述されていた場合はミックスインとして解釈される為、CSS のコードには出力されません。

名前空間

LESS のミックスインは 名前空間 をサポートしています。 多階層のミックスインを定義し、“>” で辿る事で呼び出すことができます。

.font-size (){
    .large (){ font-size: 1.5em; }
    .normal (){ font-size: 1em; }
    .small (){ font-size: 0.8em; }
}
.test {
    .font-size > .large();
}

このコードは次のように出力されます。

.test{font-size:1.5em}

ミックスインの名前による衝突をさけたり、LESS ベースのフレームワークを作るときなどに便利そうです。

extend

LESS 1.4 からサポートされたこの機能は、 元々 Sass で実装されていた extend を便利に感じた @hokaccha 氏が プルリクエストを送ったのが発端になったのだと思われます。 長いディスカッションの末、次のような形に落ち着いた模様です。

.box {
    background-color: #eee;
    border-radius: .5em;
    padding: 1em;
}
.foo {
    &:extend(.box);
    color: #333;
}
.bar {
    &:extend(.box);
    color: #00c;
}

&:extend( selector ) とする事で対象のスタイルを受け継ぐ事ができます。 普通のミックスインと違うのは出力の仕方です。 ミックスインの場合は “.box” の中身がそのままそこに展開されますが、 extend は巻き上げてグループ化して定義します。

上のコードは次のように出力されます。 最終的なコード量がかなり節約されますね。

.box,.foo,.bar{background-color:#eee;border-radius:.5em;padding:1em}
.foo{color:#333}
.bar{color:#00c}

多彩なインポート

外部 CSS をインポートする @import ですが、LESS では書き方によって特別な働きをします。

• “*.css” をインポートすると @import 文のまま残す
• “*.less” をインポートすると、LESS で展開した結果をインポートする
• “*.less” の場合は拡張子を省略する事ができる

これが基本的なルールですが、 1.4 から @import (less) “style.css” のように 明示的に展開させる事が出来るようになりました。 現在開発中の 1.5 からは (inline) も使えるようになるようです。

// @import 文がそのまま残ります
@import "style.css";

// LESS でコンパイルされた結果がその場に展開されます。
// 拡張子を省略した場合は補完されます。
@import "style.less";
@import "style";

// (1.4~) 明示的にless|cssファイルとして処理する
@import (less) "style.css";
@import (css) "style.css";

// (1.5~) CSSファイルをその場に展開します
@import (inline) "style.css";

参考資料

• LESS « The Dynamic Stylesheet language
• LESSTESTER – Online Compiler fo LESS CSS
• Bootstrap

2014/1/10

Less の表記を LESS に統一しました。

FlashSprite.js

Flashspritejs by mach3

Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。

前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。

簡単な使い方

1. FlashCS6+でスプライトシートを生成する

FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。

データ形式は「JSON-Array」を選択し、「書き出し」を行います。 ステージ上でインスタンス名を付けておけばその名前でファイルが作成されます。

2. 配置する

画像ファイルとJSONファイルが出力されるので、任意の場所に保存しましょう。 今回はこんな感じにしてみます。

./
├ data/
│ ├ sprite.json
│ └ sprite.png
└ index.html

3. ロードする

jQueryとFlashSprite.jsを読み込んで、新しい要素を生成してスプライトアニメーションを初期化します。

(function(){
    var myAnimation = $("<div>");
        myAnimation.flashSprite({
                src : "data/sprite.json"
        })
        .appendTo($("body"));
}());

$.fn.flashSprite() にオプションを渡す事で初期化され、要素にロードされます。 デフォルトの設定では自動再生がオンになっているので、初期化した時点で再生がはじまります。

無事再生されましたか？

イベントとメソッドを使ってみる

イベントとメソッドを使う事でもう少し細かい処理をする事ができます。 下の例では、データロードの完了を待って、アニメーションを配置・フェードインさせています。

(function(){
    var myAnimation = $("<div>");

        // JSONと画像がロードされると "flashSpriteReady" イベントが発火します
        myAnimation.on("flashSpriteReady", function(){
                $(this).hide()
                .appendTo($("body"))
                .flashSprite("config", { fps : 60 }) // "config" メソッドで設定変更
                .flashSprite("play") // "play" メソッドで再生
                .fadeIn();
        });

        myAnimation.flashSprite({
                src : "data/sprite.json",
                autoPlay : false, // 自動再生をオフに
                repeat : false // 繰り返し再生をオフに
        });
}());

イベントには、ロード完了時に発火される “flashSpriteReady” の他に、 停止時の “flashSrpiteEnd”、フレーム毎に発火する “flashSpriteEnterFrame” が用意されています。

また、jQuery.fn.flashSprite() にメソッド名を文字列で渡すことでメソッドを呼び出す事ができます。 第二引数以降はそのメソッドに渡されます。

それぞれの詳細はドキュメントをご参照ください。

まとめ

と、こんな感じで作ってみました。

実際のところ、機能豊富なCreateJSを利用すべき場面の方が多いと思いますが、 その為に大きなソースを追加で読み込まなければならないのも事実。

ただパラパラ漫画を再生する為だけに大仰な…と感じるようなケースなら、 こんな単機能のライブラリも使い道があるのかな、と思います。

スプライトシートってなに

スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。

一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。

• シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 | Mach3.laBlog

上の記事はまだCS6が出る前だったので自力でスプライトシートを作成する前提のものですが、 せっかく出力する機能があるんだから利用させて頂こうという事で、今回の記事なわけです。

CreateJSでやればよくない？

その通りです。その方が効率的なのでそれでいいと思います。

今回の記事は、あまり多くの依存ライブラリを読み込みたくなかったり、 宗教上の理由や遺言、あるいは政治的外圧等でjQueryで処理せざるを得ないケースを想定したものです。 CreateJSでの利用の仕方については、おそらく多くの方が詳しい記事を書いてくださっているので、そちらをご参照ください。

FlashCS6+でスプライトシートを生成する

例えば、FlashCS6でアニメーションのムービークリップ等を作り、それをステージに設置します。 その設置されたインスタンスを右クリックすると、コンテキストメニューに「スプライトシートを生成」が表れます。

それを選択すると現れるのがこんなダイアログ。

ここから「書き出し」を行うと、画像とデータ形式で指定したデータが出力されます。 指定出来るデータはJSON、各種ゲームエンジンの形式、そしてCreateJSのeaseljs形式です。

今回は使いやすそうだった “JSON-Array” 形式を使用します。

JSONデータの中身

“JSON-Array” で出力されたJSONデータの中身はこのような構成になっています。

{
        "frames": [
                {
                        "filename": "loading0000",
                        "frame": {"x":0,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }
                ,{
                        "filename": "loading0001",
                        "frame": {"x":33,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }

                ...

        ],
        "meta": {
                "app": "Adobe Flash CS6",
                "version": "12.0.0.481",
                "image": "sample.png",
                "format": "RGBA8888",
                "size": {"w":256,"h":256},
                "scale": "1"
        }
}

“frames” が実際のアニメーションのデータで、配列の中に個々のフレームの情報（サイズや座標等）を格納したオブジェクトが並んでいます。

“meta” にはスプライトシートの基本情報が格納されています。

このデータから再生するには…

アニメーションを再生するには、”frames”内のインデックスをひとつずつ進めてやり、格納されている座標情報を元に背景画像を移動してやる要領でしょうか。 座標は画像の左上からの座標なので、これを background-position に適用する際はマイナスの数値にしてやる必要がありますね。

再生させてみよう

では早速このデータを元にアニメーションを設置し、再生させてみましょう。 JSONデータも画像データもHTMLと同じディレクトリにある想定で進めます。

JSONを読み込む

まずJSONデータを読み込みます。

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){
            var my = {};

            my.data = data;

            // この中でいろいろしよう
    });

}(jQuery));

アニメーションの要素を生成、配置する

受け取ったJSONのデータの内容から、アニメーション用のHTML要素を生成し、bodyに配置します。

my.node = $("<div>").css({
    "width" : my.data.frames[0].sourceSize.w,
    "height" : my.data.frames[0].sourceSize.h,
    "background-image" : "url(" + my.data.meta.image + ")"
})
.appendTo($("body"));

要素のサイズははじめのフレームの “sourceSize” から取得することにします。

画像は、前述の通り同じディレクトリで展開する想定なのでそのまま代入していますが、
恐らく運用時は他のディレクトリに入れると思うので、その時はその時で画像へのパスをなんやかんやする必要がありますね。

再生する

今回は、単純に setTimeout で再生用の関数をぶん回して繰り返し再生を行います。

my.index = 0; // 現在のフレームインデックス
my.length = my.data.frames.length; // 合計フレーム数
my.interval = Math.floor(1000/30); // 約FPS30ぐらいで再生

my.play = function(){
    var frame;

    my.index = (my.index + 1) % (my.length - 1);
    frame = my.data.frames[my.index].frame;
    my.node.css(
            "background-position",
            "-" + frame.x + "px -" + frame.y + "px"
    );
    setTimeout(my.play, my.interval);
};

my.play();

他にも、ページのスクロール位置やマウスの挙動などをトリガーにしたりすると表現の幅が広がりますね。

全体のコード

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){

        var my = {};

        my.data = data;

        my.node = $("<div>").css({
            "width" : my.data.frames[0].sourceSize.w,
            "height" : my.data.frames[0].sourceSize.h,
            "background-image" : "url(" + my.data.meta.image + ")"
        })
        .appendTo($("body"));

        my.index = 0;
        my.length = my.data.frames.length;
        my.interval = Math.floor(1000/30);

        my.play = function(){
            var frame;

            my.index = (my.index + 1) % (my.length - 1);
            frame = my.data.frames[my.index].frame;
            my.node.css(
                    "background-position",
                    "-" + frame.x + "px -" + frame.y + "px"
            );
            setTimeout(my.play, my.interval);
        };
        my.play();
    });
}(jQuery));

めんどくさい！

勿論毎度これは面倒なので、ライブラリ化してみましたが、それは後編で。

» FlashCS6+で生成したスプライトシートをjQueryでロードする実験（後編） | Mach3.laBlog

Less/Sass/Stylus をGruntでコンパイルする

ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。

• grunt-contrib-less – LessをCSSにコンパイルします
• grunt-contrib-sass – SassをCSSにコンパイルします
• grunt-contrib-stylus – StylusをCSSにコンパイルします

指定できるオプションは異なりますが、設定の仕方に差はありません。

違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作させられますが、 RubyベースのSassは外部のsassコマンドを呼び出す仕組みになっており、別途インストールが必要です。 結果、Gruntとより相性が良いのはLess/Stylusであると言えますね。

ここでは、私の好きなLessを例にあげてみます。

Lessをコンパイルする（grunt-contrib-less）

基本設定

まず “grunt-contrib-less” をインストールしておきます。

$ npm install grunt-contrib-less

Gruntfile.js の内容は、例えば次のようになります。

module.exports = function(grunt){

    // grunt-contrib-less タスクの読み込み
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            // 作業のラベルは"dist"にしてみます
            dist : {
                // オプションの指定
                options : {
                    compress : true
                },
                // コンパイルするファイルの指定
                files : {
                    "./assets/css/style.css" : "./assets/less/style.less"
                }
            }
        }
    });
};

※ 基本的なタスクの書き方については 前編 にて

“options”セクションでオプションの設定を行い、 “files”セクションで出力するファイルの指定を行います。

“files”のキー（左辺）には出力先のCSSファイル、値（右辺）には元となるLessファイルへのパスを指定してください。 上の例では、 “./assets/less/style.less” がコンパイルされた結果が、”./assets/css/style.css” に保存されます。

実行

$ grunt less:dist

オプション

多く使われるであろうオプションは次の物でしょう。

• compress : Boolean (false) – 空白などを除去して圧縮します
• yuicompress : Boolean (false) – cssmin.js（YUICompressorのJS版）で圧縮します

その他のオプションについては grunt-contrib-lessのREADME を参照してください。

ファイルの更新を検知してコンパイルする（grunt-contrib-watch）

基本設定

多くのコンパイラにも実装されているファイル監視機能ですが、 Gruntでも grunt-contrib-watch というプラグインとして提供されています。

npm install grunt-contrib-watch

先ほどのLessのタスクを、ファイルを監視して実行してみます。

module.exports = function(grunt){
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : { ... }
        },
        watch : {
            // ラベルは"less"にしてみます
            less : {
                // "files"セクションで監視するファイルの条件を指定
                files : [
                    "./assets/less/*.less"
                ],
                // "tasks"セクションで実行するタスクを指定
                tasks : [
                    "less:dist"
                ]
            }
        }
    });
};

“files”セクションで監視するファイルの条件を設定します。 そして“tasks”セクションで、“files”のファイルが更新された場合に実行するタスクを設定します。

“files”の値には、直接ファイル名を指定する他にパターンマッチングを使用する事ができ、特定ファイルの除外などの細かい設定が可能です。 詳細は公式ドキュメントにあるのでご参照ください。

cf) Globbing patterns | Configuring tasks – Grunt: The JavaScript Task Runner

実行

監視を開始するとターミナルは待機状態になります。

$ grunt watch:less
Running "watch:less" task
Waiting...

“./assets/less/” にあるLessファイルを更新すると、自動的に “less:dist” タスクを実行する様になります。

livereload もある？

私は使ったことがありませんが、livereload（ファイル更新を検知してブラウザをリロードする）を実現するプラグインもあるようです。

• gruntjs/grunt-contrib-livereload · GitHub

ここでは説明を省きますが、このプラグインは上で挙げた “grunt-contrib-watch” ではなく “grunt-regarde” の使用が推奨されるようです。

Note that grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in the watch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)

GUIコンパイラでいいんじゃないの？

非常にもっともなご意見です。

本記事で挙げたCSSプリコンパイラの事例に限って言えば、 Compass、CodeKitやLess.app等、優秀なGUIコンパイラが数多くリリースされているので、 「黒い画面」が苦手な方は無理して導入する事もないと思います。

ただ、GUIコンパイラに対するGruntの優位点を挙げるとすれば、 環境を跨いでの設定の共有が極めて容易な点かな、と思っています。 nodeが動く環境ならばOS問わずどこでも同じ設定ファイルで、コマンド一発で同じ事が出来るわけです。

前編で触れたGruntの魅力に興味を持たれたならば、 これを機に「黒い画面」とのお付き合いを始めてみても良いのではないでしょうか。

まとめ

そんなわけで、最近ではGitとGruntとBowerのセットで制作を進めています。

これらの優秀なソフトウェアの開発者には足をむけて寝られませんが、 オープンソース故に多方面にいらっしゃるわけで、逆立ちして寝るしかなさそうです。

なにをしたいのか

例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。

こんな感じに。この処理をしてくれるライブラリを書いてみます。

書いてみた物

jQuery.lineUp

使い方

例えばこんな要素があるとして

<div class="items">
    <!-- 異なるコンテンツ量のブロック達 -->
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

こんなスタイルが当たっているとします。

.items {
    overflow: hidden;
}
.items .item {
    float: left;
    width: 200px;
    ...
}

この .item に対して整列の処理を行いたい場合は次のようにします。

$(".item").lineUp();

オプションを渡して設定ができます。

$(".item").lineUp({
    onResize : false,
    onFontResize : false
});

オプションの詳細や、その他の細かい機能等は README をご参照ください。

また、Ajax等で要素の高さが変わるような場合、 非同期処理のコールバックなどで再度同じセレクタに対してlineUpを実行するとリフレッシュされます。（追記:2013/3/4）

主な特徴

JavaScriptでこの処理を行うにあたって色んなアプローチがあるとは思いますが、 注意してみたのは次のような点です。

行毎に高さを設定する

行毎に最大の高さを求めて、その高さにあわせてheightを更新します。

他の類似ライブラリ等では、行のグループ分けをクラス名で行う物などがありましたが、 今回は自動で行を判定して一行ずつ処理しています。 判定材料には jQuery.fn.position().top を使いました。

ウィンドウサイズ・文字サイズ変更時に自動更新する

これは他のライブラリでも多く実装されていますね。 設定で無効にする事もできます。

script要素のdata-*属性でセレクタを設定する

jquery-lineup.js を読み込んでいるscript要素のdata-lineup-selector属性を設定する事で、 そのセレクタに対してdomreadyのタイミングでjQuery.fn.lineUpを実行します。

<script src="assets/js/jquery-lineup.js" data-lineup-selector=".item-a, .item-b"></script>

これは次の内容と同じ処理をします。

<script src="assets/js/jquery-lineup.js"></script>
<script>
$(function(){
    $(".item-a").lineUp();
    $(".item-b").lineUp();
});
</script>

JavaScriptファイルを連結してミニファイしたりする場合にはちょっとアレですが、 そうでない場合には便利かもしれないのでつけてみたオマケ機能です。

まとめ

車輪の再発明ですね。

私自身、そういうレイアウトを組む必要性にあまり出会ったことはないのですが、 必要になった時にまた実用してみたいと思います。

2013/3/4

バグを見つけたので修正。ついでに非同期処理に関して追記

スタイルガイドについて

ざっくり言うとスタイルシートのドキュメントです。

自分一人で完結するその場限りのページなら良いのですが、 複数人のチームで組み込んでいたり、メンテナンス担当が他の方だったりする場合、 プロジェクトのCSSをドキュメント化しておく必要が出てきますね。例えば、

• どのような命名規則や方針で書かれていて
• どこになにがあり
• どのようなモジュールがどこで使えて
• そのモジュールはどうするとどのような挙動を起こすのか

等をまとめておく文書になると思います。 規模によってはかなり骨な作業になりそうです。

StyleDoccoとは

• StyleDocco

StyleDocco generates documentation and style guide documents from your stylesheets.

スタイルシートを読み込んで、自動的にドキュメンテーションを生成してくれるツールです。

その為の記法に従う必要がありますが、 基本的にはCSSの記述の前に、コメント（ /* */ )で、概要文とプレビュー用のHTMLを書くだけです。 もちろんそのままCSSとしても機能します。

インストール

早速インストールをしてみます。 node.jsで動作するので、先に導入しておきましょう。

node.jsが入ったら、npmコマンドを叩くだけです。
※環境によってはsudoや管理者権限が必要だったりします。

$ npm install -g styledocco

使い方

CSSの書き方

前述の通り、ドキュメントの生成にはその為の記法に従う必要があります。

/*
# ボタン

基本的なボタンスタイル。

    <button class="button">ボタン</button>

*/

.button {
    border-radius:4px;
    border:1px solid #ccc;
    background-color:#f9f9f9;
}

• 概要文はMarkdown記法に対応しています。
• プレビュー用のHTMLにはインデントが必要です。
  
  （タブでもいけましたが、一応公式によれば4スペースとの事です。）

生成コマンド

インストールすると styledocco コマンドが使用出来るようになります。 以下は、「css」ディレクトリの中のファイルを元にドキュメントを生成する例。 出力先はデフォルトで「docs」ディレクトリになります。

$ styledocco -n "My Project" css

使いそうな引数オプションはここらへんでしょうか。

• –name -n プロジェクト名（ドキュメントタイトルになります）
• –out -o 出力ディレクトリ（デフォルトはdocs）
• –preprocessor 使用するプリプロセッサ（Sassとかlessのコマンドを渡します）

例えば以下は「My Project」というタイトルで、「styles」フォルダのソースを元に「mydocs」へ出力をし、 プリプロセッサには「lessc」コマンドを使用する事になります。

styledocco -n "My Project" -o mydocs --preprocessor "lessc" styles

cf) StyleDocco – Usage

gruntで自動化など

gruntでwatchして自動化したい場合は、grunt-styleguide等を利用します。 （諸事情により私は使いませんでした）

• indieisaconcept/grunt-styleguide · GitHub

あるいは grunt-shell でシェルコマンドを書いたり、 自分でタスクを書くなどして、うまいこと楽をすると良いでしょう。

その他、細かい使用感など

ページのはじめに謎の空白のボックスが？

ちょっとハマった箇所ですが、ページの一番はじめのセクションで謎の空白ボックスが生まれてしまいました。

概要文のコメントの先頭に改行を挟んでしまうとこうなります。

/*

# これはダメ



/*
# こうしましょう

プレビューHTML前の改行

概要文とHTMLの間は基本的に1行空いていればいいのですが、 概要文がMarkdownのリスト等になっている様な場合は2行以上あけないとプレビューが正常に表示されません。

/*
# ボタン

* リスト
* リスト


    <!--こういったケースは2行あけましょう。-->

プリコンパイラも併せて使うと重たい？

私の携わったプロジェクトではSass+bootstrapで実装をしていた為、 Sassの重さとbootstrapのボリュームが相まってcss自体のジェネレートに少々時間を要しました。 それに加えて、StyleDoccoのドキュメント生成もある程度時間がかかるため、合わせ技で相当遅くなります。 gruntで自動化をしなかったのはその為です。

ただ、ファイル数やボリュームにも因る所が大きいので一概には言えません。 また、逆に最適化をする機会にも繋がるとも言えますね。

ナビゲーションの生成について

ドキュメントのヘッダナビゲーションには、 スタイルシートのファイル毎にメニューが生成されます。 また、フォルダでファイルを分けている場合は、プルダウンメニューになります。

例えばこのような構造にしてあった場合

css/
  ├ common/
  │   ├ foo.css
  │   ├ bar.css
  │   └ baz.css
  ├ components/
  ├ widgets/
  └ README.md

このような感じに出力されます。

ただし、Macでは問題なかったのですが、当方のWindows環境ではサブフォルダを全て無視されてしまいました。 Issueに投げてみたので、何か反応があったらお伝えします。

ドキュメントページのパフォーマンス

生成されたドキュメントページで動作がもたつくな、と感じたので中身をみてみました。

StyleDoccoのドキュメントページは、ページ毎にひとつのHTMLになっています。 CSSやJavaScriptなどの外部リソースはありません。完全にひとつのファイルです。

プレビューの出力はどうやっているのかというと

1. iframeを動的に生成して、そこに自分自身を読み込む
2. 読まれたHTMLでプレビューを生成し、描画する

という処理をHTMLファイルに記述されたJavaScriptで行なっているようです。

JSで動的に生成している関係上、物とボリュームによっては描画や目次の生成などの動作がもたつく場合があります。 が、「単一ファイルでいきたい！！」というポリシーがひしひしと伝わってくるので、これはこういう物だと思って割り切りました。

まとめ

自前のテンプレートでスタイルガイドを書く手もありますが、 うまく用途にマッチするのであれば、こういうツールを使って楽をしていきたいですね。

作ってみたもの

まずはデモから。当たり前ですが、box-shadowに対応していないブラウザでは動きません。

• DEMO on JS Bin

JS Bin

感想

作って動かしてみた率直な感想を申し上げると…そもそもこういう用途を想定していないと思うので、当然あまり捗りませんでした。 が、描かれる物の雰囲気は、これはこれで嫌いではないです。水墨画的な物が描けそう。

重さが加速する

Webkitはかなり軽快に動くのですが、Firefoxだとかなりもっさりした動きになります。IE9だとまだマシです。 そして、書けば書くほど重くなっていきます。 box-shadowを一点ずつどんどん重ねていっているわけですから、そりゃ当然重くなりますよね。

線を引きにくい

基本的にブラシで点描を繰り返している様な物なので、あまりはやく描こうとすると途切れて線になりません。 そういうブラシだと思うしかないでしょう。 間を補完するような感じに描画しようかとも思いましたが、むしろ味が損なわれる感じがしたので途中でやめました。

ライブラリ

書いてみたライブラリがこちら。別にやってる事はどうということはないです。 使い道は多分ないと思うのですが、使ってみたい方はお好きにお使いください。

ShadowCanvas : Drawing illustration with css box-shadow — Gist

/**
 * ShadowCanvas
 *
 * Drawing illustration with css box-shadow
 *
 * @version 0.9
 * @author mach3ss
 * @require jQuery
 */
var ShadowCanvas = function(selector, option){

    // config
    this.option = $.extend({}, this.option, option);
    this.node = $.extend({}, this.node);

    // nodes
    this.node.container = $(selector);
    this.node.canvas = $("<div>")
    .css({position:"absolute"})
    .appendTo(this.node.container);

    // events
    this.node.container
    .on("mousemove", $.proxy(this._onMouseMove, this))
    .on("mousedown", $.proxy(this.start, this))
    .on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){

    fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
    fn.drawing = false;

    fn.node = {
        container : null,
        canvas : null
    };

    fn.option = {
        color: "black",
        blur : 5,
        size : 5
    };

    /**
     * Configure option or get the option value
     *
     * @param String key
     * @param Mixed value (optional)
     * @return Mixed
     */
    fn.config = function(key, value){
        if(this.option.hasOwnProperty(key)){
            if(typeof(value) !== "undefined"){
                this.option[key] = value;
                return this;
            } else {
                return this.option[key];
            }
        }
    };

    /**
     * Get css text for box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return String
     */
    fn._getBoxShadowText = function(x, y){
        var o, callback;
        o = this.option;
        o.x = x;
        o.y = y;
        callback = function(a, b){
            return o[b];
        };
        return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
    };

    /**
     * Draw the point with box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return self
     */
    fn.draw = function(x, y){
        var shadow = this.node.canvas.css("boxShadow");
        shadow = shadow === "none" ? "" : "," + shadow ;
        shadow = this._getBoxShadowText(x, y) + shadow;
        this.node.canvas.css("boxShadow", shadow);
        return this;
    };


    /**
     * Start drawing
     *
     * @return self
     */
    fn.start = function(){
        this.drawing = true;
        return this;
    };

    /**
     * Stop drawing
     *
     * @return self
     */
    fn.stop = function(){
        this.drawing = false;
        return this;
    };

    fn._onMouseMove = function(e){
        var offset, x, y;

        if(! this.drawing){
            return;
        }

        offset = this.node.container.offset();
        x = e.clientX - offset.left + document.body.scrollLeft;
        y = e.clientY - offset.top + document.body.scrollTop;
        if(x < this.node.container.width() && y < this.node.container.height()){
            this.draw(x, y);
        }
    };

    /**
     * Clear all on canvas
     *
     * @return self
     */
    fn.clear = function(){
        this.node.canvas.css("boxShadow", "none");
        return this;
    };

    /**
     * Get css text of the illustration on canvas now
     *
     * @return String
     */
    fn.getCSS = function(){
        return this.node.canvas.css("boxShadow");
    };

}(ShadowCanvas.prototype));

使い方は、キャンバスにしたいボックス要素のセレクターを引数にしてnewするだけです。 各設定はconfigで。

var myCanvas = new ShadowCanvas("#my-canvas");
myCanvas.config("color", "black");
myCanvas.config("size", 8);
myCanvas.config("blur", 10);

まとめ

表現力は結構ありそうですが、実用的なアプリかと問われると…

cf) CSS3のbox-shadowだけで作られたモナリザ・・・ – かちびと.net