2013/08/22

[compass] cssスプライト画像のファイル名をシンプルにする

compassでcssスプライト画像を作ると、ファイル名が「sprite-918734128374.png」って感じになる。
しかもsass内のこのスプライト箇所が更新されると、ファイル名も変わる。
これは名前を変えないと各ブラウザにキャッシュされている古い状態の画像が出てしまうことへの対策だと思うんだけど、運営していく上ではちょっと面倒…。

・cssファイルだけでなく画像ファイルもアップしないといけない
・サーバ上の古い画像を削除しないといけない

…書いてみると、それくらい面倒臭がらずにやれやって感じもするが…面倒くさがりなのは、ある種の美徳らしいのでいいことなはず。

他には
・compass以外で画像もcssも変更しづらくなる
ってのもあるけど、これはできればcompass以外で作業しないといけない状況になること自体を避けた方が良さそう。

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end
参考:How to turn off COMPASS SASS cache busting?

2013/08/09

PC版safariでcssアニメーションするとちらつく

Macのsafariでcssアニメーションさせると、そのアニメーションする要素とは別の部分がちらつくという症状がでた。
iPhoneではなくPC。
具体的な原因ははっきりわからなかったんだけど、transfrom:rotateをアニメーションさせているのをやめたらちらつきは解消された。

チラツキが起きるのはアニメーションの始まる瞬間と終わる瞬間。
アニメーションの途中は問題なし。
検索しても同じような症状の人は見つからず…

--追記
原因はまだ良くわかってないんですが、対処法は見つかった。簡単。
-webkit-backface-visibility: hidden; ↑これを追加するだけ。場合によっては、子要素にも適応させないとだめかも。
参考:CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid(英語)
-- ココマデ

以下、勝手な推測…
rotateをアニメーションさせようとするとアクセラレータが効いてGPUを使うようになる。
アニメーション終わるとGPUの使用も終了。
CPUとGPUの切り替えの瞬間にちらつく。

同じ動きをしているのにページによってチラツキが起きないページもあったので、ちらついていたのは画面全体ではなく、何かしら条件が揃った要素のみっぽい。

結果的にrotateやめたら、そっちの方が好きな動きだったんで結果オーライ

--add
他にもskewをcssアニメーションしたらちらついたとか…いろいろ。
ずっとChromeでしか確認しないまま作業進めて、そろそろ大詰めってころからsafariでの確認を開始したのが仇になった。
チラツキの原因を探るのに手間がかかってしまう。
cssアニメーションさせるならsafariメインで確認したほうが良さそう。

2013/08/08

[TweenMax.js] TweenMaxでのアニメーションの連結

tween.jsを使ってみようと思っていて、気づいたらTweenMaxを触ってしまっていた。

正直、同じもんだろ?と勘違いしてました。

結局どっちをメインに使って見るかは軽く触ってから判断しようかと

で、tweenMaxのアニメーション連結方法
//複数のアニメーションを連結する場合はtimelineを使う
tl = new TimelineLite()
elem = document.getElementById 'id'
tl.to(elem, 0.4, {bottom: '11px'})
.to(elem, 1, {bottom: 0})
タイムラインは独立したオブジェクトって考えなのかな。

2013/08/06

[jQuery] 画像の読み込み完了時にloadイベントが発動しない

htmlに記述してある画像を読み込んだら、ある処理を開始するというJavaScriptを書いたところ、処理が行われる時と行われない時でまちまちだった。

キャッシュかなとも思ったが違った。
実際はloadイベントを登録する前に画像の読み込みが終了していた場合、イベントが発動していないのが原因だった。

completeプロパティを調べて、すでに読み込み済みだったら明示的にloadイベントを発動させるという処理を追加して対応した
$('img').load ->
 //画像読み込み時の処理
 //ここにたどり着くまでに画像が読み込み終わっていたら発動しない
 if this.complete //読み込み完了しているかどうか判定するプロパティ
  $(this).load() //自分でloadイベントを起こす
completeというプロパティは知らなかった…
今回の問題はかなり初歩的な部分な気がするが…今まで一度も出会ったことがなかったのか…気づかずに過ごしてきたのか…

参考:
http://www.scollabo.com/banban/jsindex/sample/sample_042.html
http://stackoverflow.com/questions/3588102/jquery-load-not-working-on-my-image