このところ、CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせたWeb制作についてスポットを当てた次のような記事を、いくつか書いています。

[対象の記事]：
CSSアニメーションの新概念！Scroll Timelineの概念を使ってページのプログレスバーを作る方法[animation-timeline]
【驚き】CSSだけでスライダーが!? 新概念「ScrollTimeline」を「ViewTimeline」と組み合わせて、スライダー風UIを作成する方法
【CSSのみ】画像がスクロールに応じて出現！新概念をつかって印象的な視覚効果を作る方法[ScrollTimeline, ViewTimeline]

↑これらの記事の中で、少しずつ
「ScrollTimeline」と
「ViewTimeline」
について「どういうものなのか」ということを説明してはいるのですが、

実は「さらに理解を深められそうなツール」が存在していましたので、
今回はそのツールについて、あらためて記事を書いていきます。

Chromeエクステンション「Scroll-Driven Animations Debugger」

CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を可視化してくれるChromeエクステンション（拡張機能）が、リリースされていました。

[対象の拡張機能]：
Scroll-Driven Animations Debugger

↑このキャプチャの通り、Chrome ウェブストアからダウンロードすることができます。

エクステンションをつかって、新概念を可視化する

こちらの
Scroll-Driven Animations Debugger
というChromeエクステンンションですが、これをインストールして有効化した状態で
「ScrollTimeline」や「ViewTimeline」が使われているWebサイトにアクセスすると、次の様な形で、
それらの挙動を可視化することができます。

↑上記は
こちらのページのサンプル なのですが、

こうしてみると、上記の動画で紹介したデモページが実際にどんな仕組みで動いているのか、よりわかりやすいかと思います。

上記の動画の通り、「ViewTimeline」は「領域」としてはたらいていて、
それがビューポートに入ると「ScrollTimeline」が有効になっている、

という仕組みが、よりわかりやすく見て取れるかと思います。

使い方

こちらの Scroll-Driven Animations Debugger ですが、使い方は至ってシンプル。

上記URLからダウンロードして、Chrome右上の
[設定アイコン（3つのドットが縦に並んだアイコン）] > [拡張機能] > [拡張機能を管理]
もしくは
[ウィンドウ] > [拡張機能]
を選択して進み、有効化するだけです。

有効化した上で、「ScrollTimeline」や「ViewTimeline」が使われているWebサイトを開き、
（たとえば このページ など）
[Command]+[Option]+[i]または
[表示] > [開発/管理] > [デベロッパーツール]から、
ChromeのDevToolを開きます。

そして、Chrome DevToolの[Elements]タブを開くと、
右側に[Scroll-Driven Animations]という項目が増えているはずです。
それを押せば、次の様に
「ScrollTimeline」や「ViewTimeline」の可視化ができます。

ぜひ試してみると、「ScrollTimeline」や「ViewTimeline」の
理解を深めるのに役立つことかと思います。

この記事のまとめ

今回は、Web制作・Webデザインの世界における
新しい概念「スクロールタイムライン（Scroll Timeline)」と、
もうひとつの新概念である「ビュータイムライン（ViewTimeline)」の挙動を可視化できるツール、
Scroll-Driven Animations Debugger
についての記事を書きました。

これを使うと、「スクロールタイムライン（Scroll Timeline)」と「ビュータイムライン（ViewTimeline)」が実際にどんな挙動をするかが見て取れるため、きっと理解が深まることと思います。

当サイトでは、今後も「スクロールタイムライン（Scroll Timeline)」と「ビュータイムライン（ViewTimeline)」のすばらしい魅力が伝わりやすいような記事を書いていきたく思ってますので、またぜひ続編をお待ちください。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。