気になったWebサイトのアニメーションを詳しく調べる方法とその限界
リッチコンテンツと呼ばれる、アニメーションによってインタラクティブな表現がされたWebサイトに出会った時、「一体どうなっているんだろう…」と思ったことはないでしょうか。
基本的なHTML、CSS、JavaScriptしか知らないと、デバッグツールで要素をちょっと見るだけでは検証できません。
コツを知れば、ある程度検討がつけられることもあります。
反対に、検証の限界もあります。
その辺りの自分なりのコツみたいなものをまとめようと思います。
使われている技術を調べるツール
主に、使われているフレームワークを調べる目的で入れています。
細かい部分を調べる前に、どんな技術を使っているのかざっくり知るのに役立ちます。
Wappalyzer
これは日本でも使っている人が多い印象があります。
アドオンがあるので、ブラウザにインストールしておくと、気になったサイトに出会った時にすぐ使えます。
フレームワークやデータベース、アナリティクスなど、可能な限りコードから読み取って、使われている技術を表示します。
built With
こちらも、使われているフレームワークなどがずらっと出てきます。
全体的にWappalyzerより細かい情報が表示されました（特にWebサーバー）。
「Detailed Technology Profile」タブをクリックすると詳細情報が見れるのですが、
件数に限りがあります。1日10件までは無料アカウントで、それ以上は有料となるようです。
開発者ツール（Google Chrome DevTools）で調べる
Wappalyzerなどで簡単にフレームワークなどを調べたら、開発者ツールで細かく調べていきます。
開発者ツールは、Macのクロームでは「Cmd + Alt + I」で表示されます。
コーダーなら「要素」タブや「スタイル」を確認することは多いと思いますが、それ以外にも使えるところはたくさんあるので、ぜひ活用しましょう。
F8でアニメーションをストップ
ローディングに一瞬出て、数秒で消えてしまうようなアイコンやロゴのアニメーションを確認したい時に使えます。
開発者ツールの「ソース」タブを開き、ページをロードしてアニメーションを止めたいところで「F8」を押すと、
アニメーションがストップし、その状態で要素やスタイルを確認することができます。
イベントリスナーを調べる
たとえば、ロードした時にフワッと変形したテキストが現れるとか、
マウスの起動にエフェクトがついているとか、
マウスオーバーした時のエフェクトなど…
JavaScriptのイベントに紐づいているものは、開発者ツールでJSファイルを確認することができます。
もしライブラリを使っている場合はJSのファイル名が表示されるので、ライブラリを特定しやすくなります。
「要素」タブで対象の要素を選択した状態で、「イベントリスナー」をクリックすると、イベントが並んでいるので、
clickやloadなど、アニメーションに関わるイベントをクリックすると、ファイル名が表示されます。
アニメーションタブでCSSアニメーションをまとめて見る
アニメーションタブを表示させるには、
開発者ツール右箸の、縦に三つ丸が並んだアイコン ＞ 「その他のツール」 ＞ 「アニメーション」
です。
アニメーションしている要素がリスト化されます。
ロード時のアニメーションで検知されないものがありましたが、別ページから移動してきた時は検知されました。
CSSのanimationプロパティやtransformプロパティで動かしているものが表示されました。
再生速度を25%や10%にして再生してみることができます。
クリックすると要素がフォーカスされるので、スタイルタブでtransitionなどのプロパティを確認することができます。
基本はCSSで動かしているものがリスト化されて、CSSを確認するという感じになるので、
JSでcanvas作成しているようなものは検証できないです。
改行のないJSを読みやすくする
圧縮されているJSは、「{ }」アイコンを押すと、読みやすく改行されたものになります。
後述しますが、改行が入るだけで、圧縮前の状態に戻るわけではありません。
自分で書いたJSだったら多少参考になるかな…程度ではないかと個人的には思います。
検証できる範囲、限界はどこか
フロントエンドは基本的には全てコードを見ることができますが、
アニメーションを検証しようとして、どのJSのどの部分がその部分なのかがわからなかったという方もいると思います。
昔のWebサイトは、他のサイトからコードをコピペするだけで同じような動きを作ったりもできましたが、
今はなぜそれができないかというと、理由は2つだと思っています。
- Canvasアニメーション、SVGアニメーションの普及
- JSを最適化する流れ
アニメーションの実装は、大きくはCSSと、SVGまたはCanvasに分けられます。
CSSのみで実装されている場合は、transformプロパティで動かすことになるので、スタイルタブで容易に検証することができます。
しかし、JSが関わっている場合、圧縮されていたり特にcanvasやSVGになっている場合は、検証に限界があります。
ビルドツールを使って最適化されている場合、変数名が一文字のアルファベットになっている、改行がなくなっているといったファイルになっているため、アニメーション箇所のコードを特定するのはほぼ不可と言ってよいと思います。
改行については開発者ツールで入れることができますが、変数がわからないとJSのコードを読み解くのは困難です。
svgやcanvasの実態はコードなのであるいは検証可能ですが、canvasやsvgアニメーションを多く使ったサイトは全体がSPAだったりSSRで作られていたりして、JSが圧縮されていることが多いです。
また、ビジュアルでアニメーションを作成できるソフトを使ってアニメーションを制作し出力するといった手法で作られているものは、後で見てわかりやすいコードにはなっていないので、バンドルされてなかったとしても検証は難しいです。
アニメーションのパターン
初心者のうちは、何が原因で動いているのかわかりにくいかもしれないですが、
JSライブラリが何か関わっていたとしても、JSでCSSのtransformを要素に指定して動かすというものも多いです。
開発者ツールの要素タブで、要素にtransformのスタイルが当たって高速で動いている…みたいなのを見たことがあるかもしれません。
transformは、CSSはtransformプロパティ、SVGはtransform属性、JSはCSSのtransformを指示するパターンなどがあります。
transformは基本的にはシェイプの簡単な動きの組み合わせです。移動(translate)、拡縮(scale)、回転(rotate)、傾斜(skew)を組み合わせて動きます。
SVGなどベクターデータの場合、シェイプのパスも数値やアルファベットなので、アニメーションさせることができます。
…が、複雑なパスのアニメーションは意外と難しく、ライブラリが必要だったり、素材を作るのにも経験値が必要です。
canvasはスプライトアニメーション（パラパラ漫画）もしくはtransformでのアニメーションです。
canvasアニメーションは、WebGLを使用して高速に画像を処理することができ、モダンなサイトに多く使われています。
Webサイトであまり重い画像を詰め込むと、レンダリングに時間がかかってパフォーマンスが落ちてしまうということは、サイト制作者なら基本的に頭に置いていることですが、
実はPCにはもともと、重たい画像を処理する能力があります。
CGやPCゲームを想像するとわかると思いますが、GPUのパワーを使えば大量の画像データを同時にアニメーションさせることができます。
WebGLは、GPUへのアクセスを可能にするJavaScriptのAPIです。
CGの制作の経験がないと制作が難しく、深く知ろうとするとWebGLのAPIの他にもGLSLと呼ばれるシェーダー言語が出てきたりと、学習コスト高めです。
そのため検証も難しく（というかブラウザからはほぼ不可）なります。
まとめ
アニメーションに関してはまだまだ追求すべき部分がたくさんありますが、
Webサイトを検証したい方の何かの手がかりになれば幸いです。
