するするさせたよ：サイボウズ採用情報のアニメーション

JavaScript ブラウザ

こんにちは、大阪開発部のブノアです。

この間、サイボウズの採用情報ページのアニメーションについてグーグルデベロッパーエキスパートの矢倉さんにツッコミを頂きました！今回はそのアニメーションをするするさせたよという話をしたいと思います。

経緯

４月頃、レンダリングパフォーマンス勉強会を社内で開催しました。東京開発部の鉄平がその話をツイッターで呟いたら矢倉さんにツッコミを頂きました。

矢倉さんが仰っている動くアイコンはこれです。 f:id:cybozuinsideout:20160519150803g:plain

ちょうどレンダリングパフォーマンスの勉強していたので、勉強した事を活かして遊びで調査し、解決まで試していました。
しかし、本番環境を修正するところまでは行きませんでした。

そして、一ヶ月後ぐらいに同じ矢倉さんが調査も解決も含めて記事まで書いてくださいました。調査方法や調査結果の情報分析、解決方法も細かくわかりやすく書いてあるので興味のある方は是非ご覧ください。

するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
するするさせたい：サイボウズ採用情報のアニメーション（その3） - fragmentary

私は記事をみてめっちゃありがたいと思いました。そこまでやって頂いたらやる気が伝染します！
その時に社内の仲間と話し合って採用情報ページの本番環境を直す決断をしました。

今は既にするするしてるんじゃないの？

f:id:cybozuinsideout:20160519145020p:plain
という声が社内から聞こえました。人によってするするしている、するするしていないってなんでやろと考えてみました。

私のパソコンで確認した時は、完璧でスムーズなアニメーションではなかったのですが、気になる程でもありませんでした。
それは何故だろうと考えると、私のマシンは2015年のMacBook Proでスペックがとても高い事に気づきました。矢倉さんの記事によると、2011年のMacBook Airを使ってサイボウズの採用情報ページをご覧になったそうです。
矢倉さんと同じくスマホでご覧になる方もパソコンよりはスペックが低いので採用情報ページのアニメーションがするするしていないように思う人はいっぱいいるでしょう。

気にしている、気にしていない、慣れている、慣れていないにかからわず、 あらゆるユーザに「するするアニメーション」を提供し、アクセシビリティに配慮するのは私達デベロッパーの仕事であると思いました。

修正前後の比較

本番環境が修正されたのでもう確認できないのですが、修正する前に修正前版と修正後版が見比べられるビデオを撮りました。わかりやすくするためスローモーションにしています。

www.youtube.com

上の方は修正前で下の方は修正後になっています。上の方はやっぱりよくみるとガタツキがわかりますね。

修正の説明

矢倉さんは細かく説明してくださったのでまとめだけを書きます。
またレンダリングパフォーマンスについて詳しく知りたい方はグーグルのレンダリングパフォーマンスページをご覧ください。

修正前のコード

(function loopIcon(){
  $('.kintone .icon')
    .css({backgroundPosition:'0'});
    .animate({backgroundPosition:'-1680px'}, 1680*36, 'linear', loopIcon);
})()

考えられる問題：

  • JavaScriptの負荷：jQuery.animate だと定期的にJavaScriptを実行され、ターゲット要素の backgroundPosition を少しずつ変えていきます。JavaScriptはいつ実行されるか保証できないためタイミングによってvsyncを挟む事もあって、その時はフレームが表示されずフレームレートが落ちる事もあります。
  • backgroundPosition はペイント処理が実行されるプロパティ（参考：csstriggers.com/background-position）なのでフレームのコストが上がります。フレームができるまでの時間が長くなりvsyncに間に合わない可能性が高まります。

修正後のコード

上記のJavaScriptを下ので上書きして、

// IE9でないときだけ実行したいのでJavaScriptで実行していますが、
// CSSのみでも実装可能です。
$('.kintone').css({overflow: 'hidden'});
$('.kintone .icon')
  .css({
    width: '5040px',
    animation: 'loop-icon-transform 60480ms linear infinite'
  });

スタイルシートにキーフレームを定義する

@keyframes loop-icon-transform {
  from { transform: translateX(0px)     }
  to   { transform: translateX(-1680px) }
}

※ IE9はCSSアニメーションをサポートしていないため、IE9の場合は修正前のコードが実行されるようにしています。

改善された点：

  • JavaScriptは定期的に実行される事がなくなったので、JavaScriptの処理コストとUIスレッドをブロックする事がなくなりました。
  • アニメーションに利用しているプロパティの transform はコンポジットプロパティ（参考：csstriggers.com/transform）なので、ペイント処理は実行されません。ペイント処理は高コストであるため、それでフレームのコストが大分減りました。

フレームのコストを減らした事でロースペックのマシンでもアニメーションがするする動くようになりました！

最後に

  • あらゆるユーザ環境に「するするアニメーション」を提供するのも私達デベロッパーの仕事である。
  • ガタツキのあるアニメーション、スクロール等は不具合だと判断し、KAIZENして行きたい！
  • 記事まで書いてくださった矢倉さんに感謝！
  • レンダリングパフォーマンスはやっぱり面白い！

以上、ブノアでした！