Google Chrome DevToolsでCSSアニメーションを簡単に実装しよう！ ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの牧です。

皆さん、早速ですが開発やコーディングをする時どのブラウザを使用されていますか？
グラッドキューブではGoogle Chromeをよく使用しているのですが、最近のバージョンアップで更にCSSアニメーションの実装が簡単になったのでご紹介したいと思います。

DevToolsとはGoogle Chromeが提供している開発者ツールです。
WindowsではF12キーを、OSXではCommand+option+iを押すとデベロッパーツールを開くことが出来ます。
DevToolsには大きく分けて下記のような機能があります。

• ・[Elementsタブ] DOMツリー表示
• ・[Networkタブ] ネットワーク状況の表示
• ・[Consoleタブ] JavaScriptの実行環境
• ・[Resourceタブ] Cookieやローカルストレージなどのブラウザストレージ使用状況表示
• ・[Sourceタブ] 読み込んだスクリプト・CSSなどのソースコード表示
• ・[Timelineタブ] UIパフォーマンスの計測
• ・[Profilesタブ] CPUやメモリの使用状況の表示

今回はElementsタブに付属しているアニメーション用の機能についてご紹介していきます。

Animation Recorder機能はその名の通りアニメーションを録画することが出来ます。
設定方法はとても簡単で、Consoleタブの左にあるアイコンをクリックしAnimationsを選択することで使用することが出来ます。

このタブを開いたままCSSアニメーションの位置でリロードすると、CSSアニメーションで使用しているCSSプロパティが表示されます。
この機能によって、各要素に対してどのようにCSSアニメーションが再生されるのかひと目で分かるようになりました。
また、CSSアニメーションにかかる時間を変更するだけならば、このグラフをドラッグして移動させることでアニメーション開始時間を変更することや
グラフの幅を変更することでアニメーションにかかる時間の変更を行うことが出来ます。
さらに再度グラフの上にある再生ボタンを押すことでアニメーションの再生を行うことができますので、
アニメーション時間のちょっとした調整だけの場合はわざわざ「CSS書き直し→リロード→確認」の手順を踏む必要がなくなります。

Animation Recorderに表示されるグラフを右クリックすると「Store as Global Variable」という項目が出てきますので、
選択するとグローバル変数の「temp1」にAnimationインスタンスが入ります。
ConsoleタブからAnimationインスタンスを操作することにより、
CSSプロパティ単位のアニメーション操作をすることが出来るようになりました。

実際に下記のコード例のようにアニメーションの再生や一時停止、逆再生を行うことが出来ます。
一つ一つのアニメーション動作を確認したい時にとても便利です。

temp1 // Animation Instance
temp1.play(); // アニメーションの再生
temp1.pause(); // アニメーションの一時停止
temp1.reverse(); // アニメーションの逆再生

画像の紫ボタンを押すとイージングの設定ポップアップが表示され、難しいイージングの設定をとても簡単に行うことが出来ます。
左右のボタンでイージングの種類を変更することが出来るだけでなく、上部に表示される紫の玉が設定通りに動くためアニメーションの動きをとても想像しやすくなります。
StyleタブのCSSプロパティが直接変更されますので、あとはプロパティをコピー＆ペーストしてCSSファイルを変更するだけです。

Google Chrome Canary（カナリヤ）とは、Google Chromeの開発者向けブラウザです。
Google Chrome Stable版は2ヶ月に1回の頻度で更新されますが、Canary版では毎日更新され、いち早くGoogle Chromeの新機能を使用することが出来ます。
また、Stable版とアプリを両立させることが出来ますので開発はCanary版、
動作検証はStable版で行うとブラウザバージョンアップによる挙動の誤差を早々に無くすことが出来ます。

今回ご紹介した機能以外にもDevTools には、パフォーマンス計測やコードにブレイクポイントを仕込むなど数多くの機能が存在しています。
今後も開発に役立つDevTools の機能をご紹介していきたいと思います。
次回はWebエンジニアにおすすめしたいGoogle Chrome拡張機能をご紹介します！