本日は、Chrome と Astro による View Transitions API の使用について詳しくご説明したいと思います。これには、Astro コミュニティが API を早期に採用し、テストした方法が含まれており、コミュニティ全体にその可能性を強調しています。また、Astro 3.0 のビュー遷移の組み込みのサポートについても詳しくお知らせします。
背景
ウェブでシームレスでアニメーション化されたエクスペリエンスを構築するうえで、「状態遷移」と呼ばれるページのさまざまな状態間のシームレスな遷移は常に複雑な側面です。CSS 遷移、CSS アニメーション、Web Animation API などのツールを利用できるにもかかわらず、状態遷移の作成は依然として困難なタスクでした。課題の一つは、送信要素のインタラクションを処理することです。これにより、遷移がより複雑になる可能性があります。
さらに、補助デバイスで読む位置やフォーカスを維持するのは困難です。また、スクロール位置の違いに対処すると、状態遷移が煩雑なプロセスになります。ウェブページ上のさまざまな要素間をスムーズに切り替えるには、これらすべての要素が複雑になります。
View Transitions API は、こうした課題に対するブラウザのソリューションとして登場しました。この新しい API を使用すると、1 つのステップで DOM を簡単に変更できると同時に、2 つの状態間のアニメーション遷移を作成できます。
Chrome 111 での View Transitions API のリリースは、JavaScript ベースのウェブ アプリケーションだけでなく、すべてのウェブサイトの移行サポートに関する幅広いビジョンの始まりでした。今後の機能強化も予定されています。Chrome では、ドキュメント間の遷移、コンポジタ駆動のアニメーション、スコープ遷移、ネストされた遷移グループなど、魅力的な追加機能を今後検討する予定です。
ビュー遷移を使用した初期のデータ探索
Chrome で View Transitions API を使用するのは、単独の作業ではありませんでした。数年にわたり、デベロッパー、フレームワーク作成者、CSS ワーキング グループからのフィードバックとコラボレーションが、この機能の形成において重要な役割を果たしました。
デベロッパーのテストは、早い段階から重要な役割を果たしました。初期バージョンの API は CSS アニメーションをサポートしておらず、遷移はいくつかの制限付きプリセットに制限されていました。初期のフィードバックで、開発者は移行に完全にカスタマイズ可能で表現力の高いものを求めていることが明確になりました。この相互のコラボレーションにより、API が適切なデフォルト設定、拡張性、カスタマイズのバランスを考慮して設計されました。
Astro は、ビュー遷移を早期に取り入れたフレームワークの一つです。この記事の残りの部分では、Astro チームの視点から、ビュー遷移を発見、導入し、ウェブ開発エクスペリエンスの中心に据えた経験を共有します。
Astro がビュー遷移に賭ける理由
アストロは長い間、ビュー遷移のようなものを探していました。Astro は、UI コンポーネントを軽量の HTML にサーバー レンダリングする JavaScript ウェブ フレームワークで、ページの読み込みパフォーマンスを高めます。Astro は意図的に、できるだけ多くの作業をクライアント デバイスから移します。アストロ ウェブサイトはネイティブのブラウザ ページ ナビゲーションを使用しますが、他のウェブ フレームワークは JavaScript クライアントサイド ルーティングでブラウザ ナビゲーションをハイジャックする可能性があります。
このトレードオフは、Astro チームにとって、クライアント側のルーティングを採用せずにページ遷移をアニメーション化し、アプリのような UI をページ間で永続化するにはどうすればよいかという課題をもたらしました。
そこで選んだのがビュー遷移です。ビュー遷移を使用することで、Astro は JavaScript を多用する SPA ウェブ フレームワークと同じルーティング機能を提供できますが、クライアント側ルーティングのようなパフォーマンスと複雑さのオーバーヘッドが発生することもありません。ビュー遷移については、実装の詳細としてオプションとして取り組むフレームワークもありましたが、Astro にとってはもっと大きなものになりました。
Astro のチームは次に「どのように」という疑問に答えました。チームは Turbo、Swup、Livewire などのプロジェクトに着目し、さらに Astro 内で同様のアプローチのプロトタイプをいくつか作成しました。
最も初期の試みの一つは、HTML のすべての新しいページと現在の HTML を自動的に比較してから、JavaScript を使用してすべての要素を一度に置換する、ページ全体を覆う「スマート トランジション」でした。巧妙でしたが、間違いが起こりがちでした。
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
ありがたいことに、Astro コミュニティは View Transitions API がパワフルで、プロダクトが複雑すぎることもないことを示しました。初期のデモをいくつか見てから、Astro チームはブラウザ API にできるだけ近づけることができるシンプルな Astro API のアイデアを思いつきました。ビュー遷移を、Astro 内に隠された目に見えない実装の詳細として見るのではなく、デベロッパーに直接公開できます。Astro とウェブ プラットフォームを直接連携させ、フロントエンドの全体的な複雑さを軽減します。
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
新しい View Transitions API を Astro に導入し、自動フォールバックにより、できるだけ多くのウェブサイトやブラウザに対応できるようにしました。Chrome 以外のほとんどのブラウザはネイティブのビュー遷移を完全にサポートしていないため、フォールバックのサポートが不可欠です。
Astro での公式サポートの開始
Astro は、Astro 2.9 で試験運用版のビュー遷移のサポートをリリースしました。すぐに肯定的な回答が返ってきました。デベロッパーは、非常に多くの異なるユースケースの素晴らしいデモを共有し始め、場合によっては、すべてを本番環境にリリースすることさえあります。
Astro 3.0 で、サポートを終了し、新しい View Transitions API のフラグを解除これらの新しい API は、試験運用版で導入することも、すべて一度に導入することもできます。
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Astro とプラットフォームの API との連携には、ネイティブの View Transitions API をベースに新しい機能を試行できるという、予想外の利点があります。たとえば、新しい Astro transition:persist ディレクティブを使用すると、すべての要素をページ全体のナビゲーションにわたって維持できます。これにより、これまでは負荷の大きい JavaScript SPA でのみ可能だった、永続的なオーディオ プレーヤーや動画プレーヤーなど、永続性のある要素が強化されています。
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
また、ビュー遷移について、デベロッパーにとってより人間工学的な内容にすることもできます。たとえば、チームはダイナミック HTML 向けのカスタムの前方/後方アニメーションとアニメーションのサポートをすでに追加しています。これらの機能はいずれも下位レベルの API だけでは難しいものですが、Astro では実質的に簡単に利用できます。
今のところこれらの機能は Astro にのみ対応していますが、Astro チームは、この経験を仕様の作成者や作業グループにフィードバックし、今後ブラウザの機能を拡張できるようにしたいと考えています。たとえば、CSS でアニメーションを共有しやすくするために、プロポーザルを注意深くモニタリングします。
今後の予定をご確認ください。
ウェブのビュー遷移の将来は明るいです。Astro、Nuxt、HTMX はすべてある程度のサポートを提供し、その他多くの企業が関心を示しています。
Chrome チームは Astro のネイティブなビュー切り替えサポートに満足しています。これはウェブ開発の大きな一歩であり、より流動的で動的なユーザー エクスペリエンスを実現します。Astro 3.0 のビュー遷移について学ぶことをおすすめします。新しいランディング ページを作成する場合でも、既存のサイトをアップグレードする場合でも、こうした機能強化は大きな変化をもたらします。ビュー遷移は、SPA と MPA のギャップを埋めるのに役立ちました。Chrome では、SPA や MPA のサポートにさらに不足があるかどうかについて、ぜひフィードバックをお寄せください。View Transitions WICG GitHub リポジトリにお気軽にコメントして、さらに詳しくご相談ください。
私たちが目にした革新的なデモやアプリケーションは、すでに刺激を受けており、これからもさらなる発展を遂げることを楽しみにしています。ビュー遷移を使用した皆様の取り組みが、ウェブの未来を形作っています。Astro でビュー切り替えを試してみて、作業内容を共有して、一緒にこの旅を続けましょう。