diff --git a/files/ja/web/api/view_transitions_api/index.md b/files/ja/web/api/view_transitions_api/index.md index 7fe86926feba02..a9b88d57e797d8 100644 --- a/files/ja/web/api/view_transitions_api/index.md +++ b/files/ja/web/api/view_transitions_api/index.md @@ -1,298 +1,88 @@ --- -title: ビュートランジション API +title: ビュー遷移 API slug: Web/API/View_Transitions_API l10n: - sourceCommit: 6d4b6a0f9df94de158c373d6b08c504caafcee5f + sourceCommit: 722311032dbf520bf6aeba3d1f432aca38779ffd --- -{{SeeCompatTable}}{{DefaultAPISidebar("View Transitions API")}} +{{DefaultAPISidebar("View Transitions API")}} -**ビュートランジション API** は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。 +**ビュー遷移 API** は、異なるウェブサイトのビュー間のアニメーション遷移を簡単に作成するための仕組みを提供します。これには、単一ページアプリケーション (SPA) における DOM 状態変化のアニメーション、および複数ページアプリケーション (MPA) における文書内の移動時のアニメーションを含みます。 ## 概念と使い方 -ビュートランジションは、ユーザーがアプリケーションの状態またはビューの間を移動する際に、ユーザーの認知的負荷を縮小し、コンテキストにとどまることを支援し、読み込み待ちの知覚時間を短縮するための有力な設計の選択肢です。 +ビュー遷移は、ユーザーがアプリケーションの状態またはビューの間を移動する際に、ユーザーの認知的負荷を縮小し、コンテキストにとどまることを支援し、読み込み待ちの知覚時間を短縮するための有力な設計の選択肢です。 -しかし、ウェブ上でビュートランジションを作成するのは、過去には困難なことでした。単一のページアプリ (SPA) で状態間の遷移を行うには、かなりの CSS と JavaScript を書かなければならない傾向があります。 +しかし、ウェブ上でビュー遷移を作成するのは、従来は困難なことでした。 -- 古いコンテンツと新しいコンテンツの読み込みと位置決めを処理します。 -- 古い状態と新しい状態をアニメーション化して、トランジションを作成します。 -- 古いコンテンツを誤ってユーザーが操作して問題が発生しないようにします。 -- トランジションが完了したら、古いコンテンツを除去します。 +- 単一ページアプリ (SPA) で状態変化の遷移を行うには、かなりの CSS と JavaScript を書かなければならない傾向があります。 + - 古いコンテンツと新しいコンテンツの読み込みと位置決めを処理します。 + - 古い状態と新しい状態をアニメーション化して、遷移を作成します。 + - 古いコンテンツをユーザーが操作して問題を起こすことを防止します。 + - 遷移が完了したら、古いコンテンツを除去します。 + アクセシビリティに関する問題、例えば、読み込み位置の喪失、フォーカスの混乱、ライブリージョンに関する正しくないアナウンスなどといった問題も、新しいコンテンツと古いコンテンツの両方を同時に DOM に存在させることによって引き起こされる可能性があります。 +- 文書間のビュー遷移（つまり、MPA の異なるページ間の移動）は不可能でした。 -また、新しいコンテンツと古いコンテンツが同時に DOM に存在することで、読み上げ位置の喪失、フォーカスの混乱、奇妙なライブ領域のアナウンス動作といったアクセシビリティの課題も生じます。さらに、文書間の（つまり、 SPA ではない通常のウェブサイトの異なるページ間の）ビュートランジションは不可能です。 +ビュー遷移 API は、要求される DOM の変更と遷移アニメーションをより簡単に処理する方法を提供します。 -ビュートランジション API は、要求される DOM の変更とトランジションアニメーションをより簡単に処理する方法を提供します。 +ブラウザーの既定では、ビュー遷移を作成するアニメーションはすばやく実行されます。また、SPA と MPA のビュー遷移の両方で、遷移アニメーションをカスタマイズしたり、ビュー遷移自体を操作したり（例えば、アニメーションをスキップする状況を指定したり）できる機能があります。 -> [!NOTE] -> ビュートランジション API は、現在のところ文書間のビュートランジションを可能にするものではありませんが、これは将来の仕様レベルで計画されており、活発に作業されています。 - -### 基本的なビュートランジションの作成 - -例えば、ナビゲーションリンクがクリックされたり、サーバーから更新がプッシュされたりといった何らかのイベントに応答して、新しいコンテンツを取得して DOM を更新する機能を SPA に含めることができます。この[基本的なビュートランジションのデモ](https://mdn.github.io/dom-examples/view-transitions/)では、クリックされたサムネイルに基づいて新しいフルサイズの画像を表示する `displayNewImage()` 関数に単純化しました。これを `updateView()` 関数内にカプセル化し、ブラウザーの対応している場合にのみビュートランジション API を呼び出すようにしています。 - -```js -function updateView(event) { - // と のどちらにイベントが発生するかの違いを扱う - const targetIdentifier = event.target.firstChild || event.target; - - const displayNewImage = () => { - const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`; - galleryImg.src = mainSrc; - galleryCaption.textContent = targetIdentifier.alt; - }; - - // ビュートランジションに対応していないブラウザー用のフォールバック - if (!document.startViewTransition) { - displayNewImage(); - return; - } - - // ビュートランジションで - const transition = document.startViewTransition(() => displayNewImage()); -} -``` - -このコードだけで表示画像の切り替えを処理することができます。対応しているブラウザーでは、古い画像から新しい画像とキャプションへの変更をスムーズなクロスフェード（ビュートランジションの既定値）として表示させます。対応していないブラウザーでも動作しますが、アニメーションは表示されません。 - -`startViewTransition()` は {{domxref("ViewTransition")}} インスタンスを返しますが、このインスタンスにはいくつかのプロミスが含まれており、ビュートランジションプロセスの異なる部分に到達するためにコードを実行することができます。 - -### ビュートランジションのプロセス - -これがどのように動作するのかを見ていきましょう。 - -1. {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} が呼び出されると、 API は現在のページのスクリーンショットを撮ります。 -2. 次に `startViewTransition()` に渡したコールバック（この場合は `displayNewImage`）を呼び出し、これが DOM を変更します。 - - コールバックが正常に実行されると、 {{domxref("ViewTransition.updateCallbackDone")}} のプロミスが履行され、 DOM の更新に応答できるようになります。 - -3. API はページの新しい状態をライブ表現として取り込みます。 -4. API は以下のような構造の擬似要素ツリーを構築します。 - - ```plain - ::view-transition - └─ ::view-transition-group(root) - └─ ::view-transition-image-pair(root) - ├─ ::view-transition-old(root) - └─ ::view-transition-new(root) - ``` - - - {{cssxref("::view-transition")}} はビュートランジションオーバーレイのルートで、すべてのビュートランジションを収め、他のすべてのページコンテンツの上に配置されます。 - - {{cssxref("::view-transition-old")}} は古いページ表示のスクリーンショットで、 {{cssxref("::view-transition-new")}} は新しいページ表示のライブ表示です。どちらも {{htmlelement("img")}} や {{htmlelement("video")}} と同じように置換コンテンツとしてレンダリングされ、 {{cssxref("object-fit")}} や {{cssxref("object-position")}} のような便利なプロパティでスタイル設定できることを意味しています。 - - トランジションアニメーションが実行されるとき、 {{domxref("ViewTransition.ready")}} プロミスが履行され、例えば既定のアニメーションではなく独自の JavaScript アニメーションを実行して対応することができます。 - -5. 古いページ表示の {{cssxref("opacity")}} を 1 から 0 へアニメーションさせる一方、新しい表示の `opacity` を 0 から 1 までアニメーションします。これは既定のクロスフェードを作成するものです。 -6. トランジションアニメーションが終了状態に達すると、 {{domxref("ViewTransition.finished")}} プロミスが履行され、応答できるようになります。 - -### 要素ごとに異なるトランジション - -現時点では、 DOM 更新時に変化する異なる要素はすべて同じアニメーションを使用してトランジションします。異なる要素を既定で「ルート」アニメーションとは異なる形でアニメーションさせたい場合は、 {{cssxref("view-transition-name")}} プロパティを使用してそれらを区切ることができます。例えば、以下のようにします。 - -```css -figcaption { - view-transition-name: figure-caption; -} -``` - -{{htmlelement("figcaption")}} 要素に `figure-caption` という `view-transition-name` を指定したのは、ビュートランジションでページの他の部分と区別するためです。 - -この CSS を適用すると、擬似要素ツリーは次のようになります。 - -```plain -::view-transition -├─ ::view-transition-group(root) -│ └─ ::view-transition-image-pair(root) -│ ├─ ::view-transition-old(root) -│ └─ ::view-transition-new(root) -└─ ::view-transition-group(figure-caption) - └─ ::view-transition-image-pair(figure-caption) - ├─ ::view-transition-old(figure-caption) - └─ ::view-transition-new(figure-caption) -``` - -2 つ目の擬似要素が存在することで、 `
` だけに別個のビュートランジションスタイル設定を適用することができます。異なる新旧のページビューのキャプチャは完全に別個のものとして処理されます。 - -`view-transition-name` の値は `none` 以外であれば何らかの値を指定することができます。`none` はその要素がビュートランジションに参加しないことを意味します。 - -> **メモ:** `view-transition-name` は一意でなければなりません。 2 つのレンダリング要素が同時に同じ `view-transition-name` がある場合、 {{domxref("ViewTransition.ready")}} は拒否され、トランジションはスキップされます。 - -### アニメーションのカスタマイズ - -ビュートランジションの擬似要素には既定で [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)が適用されています（詳しくは[参照ページ](#css_の追加)を参照してください）。 - -特に、 `height`、`width`、`position`、`transform` のトランジションはスムーズなクロスフェードアニメーションを使用しません。その代わりに、height と width のトランジションでは拡大縮小するアニメーションが適用されます。一方、position と transform のトランジションは要素に滑らかな移動アニメーションを適用します。 - -既定のアニメーションは、通常の CSS を使用して自由に変更することができます。 - -例えば、そのスピードを変えるには次のようにします。 - -```css -::view-transition-old(root), -::view-transition-new(root) { - animation-duration: 0.5s; -} -``` - -もっと面白いものを見ていきましょう。 `
` のカスタムアニメーションです。 - -```css -@keyframes grow-x { - from { - transform: scaleX(0); - } - to { - transform: scaleX(1); - } -} - -@keyframes shrink-x { - from { - transform: scaleX(1); - } - to { - transform: scaleX(0); - } -} - -::view-transition-old(figure-caption), -::view-transition-new(figure-caption) { - height: auto; - right: 0; - left: auto; - transform-origin: right center; -} - -::view-transition-old(figure-caption) { - animation: 0.25s linear both shrink-x; -} - -::view-transition-new(figure-caption) { - animation: 0.25s 0.25s linear both grow-x; -} -``` - -ここでは、独自の CSS アニメーションを作成し、それを `::view-transition-old(figure-caption)` および `::view-transition-new(figure-caption)` 擬似要素に適用しています。他にも、同じ配置を維持し、既定値のスタイル設定がカスタムアニメーションの邪魔をしないようにするために、両方にスタイルを追加しています。 - -なお、上記よりもシンプルで、より良い結果をもたらす別のトランジションオプションも見つけました。最終的な `
` のビュートランジションはこのようになりました。 - -```css -figcaption { - view-transition-name: figure-caption; -} - -::view-transition-old(figure-caption), -::view-transition-new(figure-caption) { - height: 100%; -} -``` - -これは既定では `::view-transition-group` が古いビューと新しいビューの間で幅と高さを遷移させるのでうまくいきます。これはうまくいくために、両方の状態で固定された `height` を設定する必要がありました。 - -> **メモ:** [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/)には、いくつかの他のカスタマイズ例があります。 - -### JavaScript によるアニメーションの制御 - -{{domxref("Document.startViewTransition()", "document.startViewTransition()")}} メソッドは {{domxref("ViewTransition")}} オブジェクトインスタンスを返します。このオブジェクトインスタンスには、いくつかのプロミスメンバーが含まれており、トランジションの様々な状態に達したことに応答して JavaScript を実行することができます。例えば、 {{domxref("ViewTransition.ready")}} は擬似要素ツリーが作成され、アニメーションが始まろうとすると履行され、 {{domxref("ViewTransition.finished")}} はアニメーションが完了し、新しいページビューがユーザーに表示され操作できるようになると履行されます。 - -例えば、次の例では、{{domxref("Web Animations API", "ウェブアニメーション API", "", "nocode")}} によって指定されたアニメーションで、クリック時のユーザーカーソルの位置から発せられる円形の明らかになるビュー遷移を作成するために、以下の JavaScript を使用することができます。 - -```js -// 最後のクリックイベントを格納 -let lastClick; -addEventListener("click", (event) => (lastClick = event)); - -function spaNavigate(data) { - // この API に対応していないブラウザーのためのフォールバック - if (!document.startViewTransition) { - updateTheDOMSomehow(data); - return; - } - - // クリック位置を取得するか、画面の中央へフォールバックする - const x = lastClick?.clientX ?? innerWidth / 2; - const y = lastClick?.clientY ?? innerHeight / 2; - // 最も遠いコーナーまでの距離を取得 - const endRadius = Math.hypot( - Math.max(x, innerWidth - x), - Math.max(y, innerHeight - y), - ); - - // トランジションを作成 - const transition = document.startViewTransition(() => { - updateTheDOMSomehow(data); - }); - - // 擬似要素が作成されるのを待つ - transition.ready.then(() => { - // ルートの新しいビューをアニメーション - document.documentElement.animate( - { - clipPath: [ - `circle(0 at ${x}px ${y}px)`, - `circle(${endRadius}px at ${x}px ${y}px)`, - ], - }, - { - duration: 500, - easing: "ease-in", - // アニメーションさせる擬似要素を指定 - pseudoElement: "::view-transition-new(root)", - }, - ); - }); -} -``` - -このアニメーションには以下の CSS も必要です。CSS の既定のアニメーションをオフにし、新しい状態と古い状態を混合しないようにします（新しい状態はトランジションするのではなく、古い状態のすぐ上に「ワイプ」されます）。 - -```css -::view-transition-image-pair(root) { - isolation: auto; -} - -::view-transition-old(root), -::view-transition-new(root) { - animation: none; - mix-blend-mode: normal; - display: block; -} -``` +詳しくは[ビュー遷移 API の使用](/ja/docs/Web/API/View_Transitions_API/Using)を参照してください。 ## インターフェイス - {{domxref("ViewTransition")}} - - : ビュートランジションを表します。トランジションが異なる状態（アニメーションを実行する準備ができている、アニメーションが完了したなど）に達したり、トランジションを完全にスキップしたりする機能を提供します。 + - : ビュー遷移を表します。遷移が異なる状態（アニメーションを実行する準備ができている、アニメーションが完了したなど）に達したり、遷移を完全にスキップしたりする機能を提供します。 ## 他のインターフェイスの拡張 - {{domxref("Document.startViewTransition()")}} - - : 新しいビュートランジションを開始し、それを表す {{domxref("ViewTransition")}} オブジェクトを返します。 + - : 新しい同一文書内 (SPA) ビュー遷移を開始し、それを表す {{domxref("ViewTransition")}} オブジェクトを返します。 +- {{domxref("PageRevealEvent")}} + - : {{domxref("Window.pagereveal_event", "pagereveal")}} イベント用のイベントオブジェクト。文書間の移動中に、移動先の文書内のビュー遷移が起動された場合、関連のビュー遷移を操作することができます（関連する {{domxref("ViewTransition")}} オブジェクトにアクセスできます）。 +- {{domxref("PageSwapEvent")}} + - : {{domxref("Window.pageswap_event", "pageswap")}} イベントのイベントオブジェクト。文書間の移動中、移動によってビュー遷移が起動された場合、移動元の文書から関連するビュー遷移を操作することができます（関連する {{domxref("ViewTransition")}} オブジェクトにアクセスできます）。 また、移動の種類や、移動元と移動先の文書の履歴項目に関する情報へのアクセスも提供します。 +- {{domxref("Window")}} の {{domxref("Window.pagereveal_event", "pagereveal")}} イベント + - : 文書が最初にレンダリングされるとき、ネットワークから新しい文書を読み込んだ場合、または文書（[バック/フォワードキャッシュ](/ja/docs/Glossary/bfcache) (bfcache)または[事前レンダリング](/ja/docs/Glossary/Prerender)）をアクティブにした場合に発行されます。 +- {{domxref("Window")}} の {{domxref("Window.pageswap_event", "pageswap")}} イベント + - : ナビゲーションにより文書がアンロードされようとするときに発行されます。 + +## HTML への追加 + +- [``](/ja/docs/Web/HTML/Attributes/rel#expect) + - : ユーザーがページを最初に表示した際に、関連文書内の最も重要なコンテンツを識別します。 重要なコンテンツが解釈されるまで文書のレンダリングがブロックされ、すべての対応ブラウザーで一貫したファーストペイント（最初の描画）が保証され、その結果、ビューの遷移が保証されます。 ## CSS の追加 +### アットルール + +- {{cssxref("@view-transition")}} + - : 文書間の移動の場合、`@view-transition` を使用して、移動元と移動先の文書でビュー遷移を行うようにします。 + ### プロパティ - {{cssxref("view-transition-name")}} - - : 選択された要素に別な識別名を提供し、ルートのビュートランジションとは別のビュートランジションに参加させます。 `none` の値が指定された場合はビュートランジションに参加させません。 + - : 選択された要素に別な識別名を提供し、ルートのビュー遷移とは別のビュー遷移に参加させます。 `none` の値が指定された場合はビュー遷移に参加させません。 ### 擬似要素 - {{cssxref("::view-transition")}} - - : ビュートランジションオーバーレイのルートで、すべてのビュートランジションを格納し、他のすべてのページコンテンツの上に配置されます。 + - : ビュー遷移オーバーレイのルートで、すべてのビュー遷移を格納し、他のすべてのページコンテンツの上に配置されます。 - {{cssxref("::view-transition-group", "::view-transition-group()")}} - - : 単一のビュートランジションのルートです。 + - : 単一のビュー遷移のルートです。 - {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} - - : ビュートランジションの新旧ビュー（トランジション前とトランジション後）のコンテナーです。 + - : ビュー遷移の新旧ビュー（遷移前と遷移後）のコンテナーです。 - {{cssxref("::view-transition-old", "::view-transition-old()")}} - - : ビュートランジション移行前の静止スクリーンショットです。 + - : ビュー遷移移行前の静止スクリーンショットです。 - {{cssxref("::view-transition-new", "::view-transition-new()")}} - - : ビュートランジション後の新しいビューのライブ表現です。 + - : ビュー遷移後の新しいビューのライブ表現です。 ## 例 -- [Basic View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/): 基本的な画像ギャラリーのデモで、古い画像と新しい画像、古いキャプションと新しいキャプションの間に別個のトランジションがあります。 -- [HTTP 203 playlist](https://http203-playlist.netlify.app/): [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/)では、その多くが説明されています。異なる多くのビュートランジション機能を備えた、より洗練された動画プレーヤーのデモアプリです。 +- [Basic View Transitions SPA demo](https://mdn.github.io/dom-examples/view-transitions/): 基本的な画像ギャラリーのデモで、古い画像と新しい画像、古いキャプションと新しいキャプションの間に別個の遷移があります。 +- [Basic View Transitions MPA demo](https://mdn.github.io/dom-examples/view-transitions/mpa/): 2 ページのサイトの例で、2 つのページ間を移動する際に独自の「スワイプアップ」遷移が指定された、文書間 (MPA) のビュー遷移の使用例を示します。 +- [HTTP 203 playlist](https://http203-playlist.netlify.app/): [ビュー遷移 API によるスムーズでシンプルな遷移](https://developer.chrome.com/docs/web-platform/view-transitions/)では、その多くが説明されています。さまざまな多くのビュー遷移機能を備えた、より洗練された動画プレーヤーのデモアプリです。 +- [List of Chrome DevRel team members](https://view-transitions.netlify.app/profiles/mpa/): 基本的なチームプロフィールページのアプリで、{{domxref("Window.pagereveal_event", "pagereveal")}} および {{domxref("Window.pageswap_event", "pageswap")}} イベントを使用して、"from" と "to" の URL に基づいて、文書間ビュー遷移の流出・流入アニメーションをカスタマイズする方法を示しています。 ## 仕様書 @@ -304,5 +94,5 @@ function spaNavigate(data) { ## 関連情報 -- [ビュートランジション API によるスムーズでシンプルなトランジション](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [ビュー遷移 API によるスムーズでシンプルな遷移](https://developer.chrome.com/docs/web-platform/view-transitions/) - [View Transitions API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/)