Rails Assets に skrollr-stylesheets 追加しました

## はじめに

スクロールでアニメーションさせたり、パララックスさせるときに
書き方も簡単で、スマートフォンで動くし、プラグインいれてIE8でも動く[skrollr](http://prinzhorn.github.io/skrollr/)使ってます。

ただアニメーションの設定を下記のようにhtmlに書いていくので、
簡単だけど、次第にhtmlが混沌としてきます。

```html
<div data-0="background-color:rgba(0,0,255,0.5);" data-500="background-color:rgba(255,0,0,0.5);">WOOOT</div>
```

そこで、cssに設定を移行できる[skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets)を使ってsassにアニメーションの設定を記述してくことにしました。

[skrollr-stylesheets](https://github.com/Prinzhorn/skrollr-stylesheets)使うと下記のようにsassに書けます。
(cssの書き方は[本家](https://github.com/Prinzhorn/skrollr-stylesheets)みてみてください)

```sass
$about_section_begin: 0
$about_section_duration: 500
$about_section_end: $about_section_begin + $about_section_duration
@-skrollr-keyframes animation1
  skrollr-#{$about_section_begin}
    background-color: rgba(0, 0, 255, 0.5)
  skrollr-#{$about_section_end}
    background-color: rgba(255, 0, 0, 0.5)
```

これでいままで大変だったデザイン変更の配置換えにも楽に対応できますよね。

## Rails Assets 使ってますか？
話がぶっ飛びますが、フロントエンドの開発は個人的に[Middleman](https://middlemanapp.com/jp/)が好きで使ってます。([slim](http://slim-lang.com/) [sass](http://sass-lang.com/) [coffee](http://coffeescript.org/) [rails-assets](https://rails-assets.org/) [compass](http://compass-style.org/) or [bourbon](http://bourbon.io/) 縛りが好きなので Go やPHPでバックエンド作るときにもフロント側はmiddlemanで作るのが楽で好きです。とってもいいプロトタイピングツールですよね。)

nodeやbowerの設定せずに、gem installするだけでjavascriptのライブラリをrubyのwebアプリケーションプロジェクトでいい感じに設定してくれる[Rails Assets](https://rails-assets.org/)を使うのが好きです。

Railsのプロジェクトでは使う人が多いと思いますが、Rails Assets という名前でも、Rails のフロントエンド側のライブラリをほぼ持ってきたようなMiddlemanでももちろん使えるので、静的ページ作るときにも便利です。

## Rails Assets に skrollr-stylesheets 登録しました
そんなこんなで、Rails Assets で skrollr-stylesheets 使おうとしたら、

**登録されてない**

それで Rails Assets に登録したんで、誰も登録してないし、せっかくだからqiitaに書き込もうと思って今に至るわけです。

[Rails Assets](https://rails-assets.org)で「skrollr」で検索すれば出てくるので、みんな使ってね。

## こんな感じで使えます
需要があるか分かりませんが、いちおう以下Middlemanでの簡単な設定の例を載せときます。
(カジュアルな感じで、ベストプラクティスではないので、あしからず)
Railsでもほとんど同じです(ファイル名やGemfileの設定は適宜読み替えてください)。

### Gemfile の設定

Gemfileの ```source 'http://rubygems.org'``` の次に下記を追加

```rb
source 'https://rails-assets.org'
```

Gemfileの一番下に下記を追加(バージョンの書き方は各々好きにしてください)

```rb
gem 'rails-assets-skrollr', '~> 0.6.29', :require => false
gem 'rails-assets-skrollr-stylesheets', '~> 1.0.0', :require => false
```

### bundle install する

いつもの ```bundle install``` する

### jsの設定

jsファイル ```source/javascripts/all.js``` に下記を追記

```js
//= require skrollr
//= require skrollr-stylesheets/src/skrollr.stylesheets
var s = skrollr.init();
```

### layout の設定

レイアウト ```source/layouts/layout.slim``` のheadタグの中にある下記の ```all.js``` の記述を body タグの直前に移動する
(下記はslimでの記述なのでerbやhamlの人は適宜読み替えてください)

```slim
/ 下記の記述を body タグ内の最後尾に移動する
== javascript_include_tag  "all"
```

以上です。
あとはファイル構成を変えたり、ファイルを分割したりして、
css や sass にアニメーションの設定を書いてグリグリ動かしましょう。

## 追記 build 時にminify する場合の注意

skrollr-stylesheetsを使って、実際にmiddleman build してリリースする際に注意する点があったので、記載します。

使用したsassは```sass-3.4.12```になります。

注意するのは下記のように```config.rb``にcssのminifyの設定を入れている場合です。

```rb
  activate :minify_css
```

### minifyでうまくいかない例

#### rgb出力する場合

skrollrでカラーをコントロールする場合、
rgbを使うので、sassで強制的にrgb表示させるために
下記のように記述することがあると思います。

```sass
background-color: #{"rgba(44, 54, 146, 1)"}
color: #{"rgb(255, 255, 255) "}
```

上記のsassをcssでminifyして出力させると、
下記のように出力されてうまくアニメーションしなくなります。

```css
background-color:#2c3692;
color:#fff;
```

#### easingを使う場合

下記のようにeasingを指定していると

````sass
opacity#{"[swing]"}: 0
```

syntax error になってしまいます

```
(sass):84: Invalid CSS after "    opacity": expected ":", was "[swing]: 0; }" (Sass::SyntaxError)
```

### とりあえずの解決方法

そこで自分の場合は下記のように```stylesheets/skrollr/index.css.sass```にskrollr-stylesheetsの設定を入れている場合には下記のようにminifyの対象外にしています。

```rb
  activate :minify_css, ignore: 'skrollr/index'
```

minifyしなければ下記のようにそのまま出力されました。

#### build前

```sass
    background-color: #{"rgba(44, 54, 146, 1)"}
    color: #{"rgb(255, 255, 255) "}
    opacity#{"[swing]"}: 0
```

#### build後

```css
    background-color: rgba(44, 54, 146, 1);
    color: rgb(255, 255, 255) ;
    opacity[swing]: 0;
```