From 794982f33506d6cc364f22f13e76c71d8bc6ea68 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 10 Sep 2024 00:39:26 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/window/pagereveal_event/index.md | 102 +++++++++++++++++ .../ja/web/api/window/pageswap_event/index.md | 105 ++++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 files/ja/web/api/window/pagereveal_event/index.md create mode 100644 files/ja/web/api/window/pageswap_event/index.md diff --git a/files/ja/web/api/window/pagereveal_event/index.md b/files/ja/web/api/window/pagereveal_event/index.md new file mode 100644 index 00000000000000..f5850fbf4db6a7 --- /dev/null +++ b/files/ja/web/api/window/pagereveal_event/index.md @@ -0,0 +1,102 @@ +--- +title: "Window: pagereveal イベント" +short-title: pagereveal +slug: Web/API/Window/pagereveal_event +l10n: + sourceCommit: e561fa67af347b9770b359ba93e8579d2a540682 +--- + +{{APIRef("HTML DOM")}}{{seecompattable}} + +**`pagereveal`** イベントは、ネットワークから新しい文書を読み込んだり、文書（[バック/フォワードキャッシュ](/ja/docs/Glossary/bfcache) (bfcache) または[事前レンダリング](/ja/docs/Glossary/Prerender)）をアクティブにしたりして、文書が最初にレンダリングされたときに発行されます。 + +これは、文書間 (MPA) の移動の[ビュー遷移](/ja/docs/Web/API/View_Transitions_API)において、移動の流入ページからのアクティブな遷移を操作する場合に便利です。例えば、遷移をスキップしたり、JavaScript で流入遷移アニメーションをカスタマイズしたりしたい場合などです。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("pagereveal", (event) => {}); +onpagereveal = (event) => {}; +``` + +## イベント型 + +{{domxref("PageRevealEvent")}} です。{{domxref("Event")}} を継承しています。 + +{{InheritanceDiagram("PageRevealEvent")}} + +## インスタンスプロパティ + +- {{domxref("PageRevealEvent.viewTransition")}} {{ReadOnlyInline}} +- : イベントが発生したときに、アクティブなものがあれば、文書間のナビゲーションにおけるアクティブなビュー遷移を表す {{domxref("ViewTransition")}} オブジェクトを返します。それ以外の場合は `null` を返します。 + +## 例 + +```js +window.addEventListener("pagereveal", async (e) => { + // "from" 履歴項目が存在しない場合は戻る + if (!navigation.activation.from) return; + + // アクティブなビュー遷移が存在する場合のみ実行 + if (e.viewTransition) { + const fromUrl = new URL(navigation.activation.from.url); + const currentUrl = new URL(navigation.activation.entry.url); + + // プロフィールページからホームページに移動 + // ~> VT 名を関連するリストアイテムに設定 + if (isProfilePage(fromUrl) && isHomePage(currentUrl)) { + const profile = extractProfileNameFromUrl(fromUrl); + + // view-transition-name の値をアニメーションする要素に設定 + document.querySelector(`#${profile} span`).style.viewTransitionName = + "name"; + document.querySelector(`#${profile} img`).style.viewTransitionName = + "avatar"; + + // スナップショットが採られた後、名前を除去 + // そうすることで、次のナビゲーションの準備ができる + await e.viewTransition.ready; + document.querySelector(`#${profile} span`).style.viewTransitionName = + "none"; + document.querySelector(`#${profile} img`).style.viewTransitionName = + "none"; + } + + // プロフィールページに移動 + // ~> VT 名をメインタイトルと画像に設定 + if (isProfilePage(currentUrl)) { + // view-transition-name の値をアニメーションする要素に設定 + document.querySelector(`#detail main h1`).style.viewTransitionName = + "name"; + document.querySelector(`#detail main img`).style.viewTransitionName = + "avatar"; + + // スナップショットが採られた後、名前を除去 + // そうすることで、次のナビゲーションの準備ができる + await e.viewTransition.ready; + document.querySelector(`#detail main h1`).style.viewTransitionName = + "none"; + document.querySelector(`#detail main img`).style.viewTransitionName = + "none"; + } + } +}); +``` + +> [!NOTE] +> このコードの採取元のライブデモは、[List of Chrome DevRel team members](https://view-transitions.netlify.app/profiles/mpa/) を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュー遷移 API の使用](/ja/docs/Web/API/View_Transitions_API/Using) +- {{domxref("Window.pageswap_event", "pageswap")}} event diff --git a/files/ja/web/api/window/pageswap_event/index.md b/files/ja/web/api/window/pageswap_event/index.md new file mode 100644 index 00000000000000..c72cf4754ec42d --- /dev/null +++ b/files/ja/web/api/window/pageswap_event/index.md @@ -0,0 +1,105 @@ +--- +title: "Window: pageswap イベント" +short-title: pageswap +slug: Web/API/Window/pageswap_event +l10n: + sourceCommit: e561fa67af347b9770b359ba93e8579d2a540682 +--- + +{{APIRef("HTML DOM")}}{{seecompattable}} + +**`pageswap`** イベントは、文書間の移動時、つまり前回表示していた文書がアンロードされようとする際に発行されます。 + +これは、文書間 (MPA) の[ビュー遷移](/ja/docs/Web/API/View_Transitions_API)において、移動の流出ページからアクティブな遷移を操作する場合に便利です。例えば、遷移をスキップしたり、JavaScript で流出遷移のアニメーションをカスタマイズしたい場合などです。 + +また、ナビゲーションの種類や、移動元及び移動先文書内の履歴項目にアクセスすることもできます。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("pageswap", (event) => {}); +onpageswap = (event) => {}; +``` + +## イベント型 + +{{domxref("PageSwapEvent")}} です。{{domxref("Event")}} を継承しています。 + +{{InheritanceDiagram("PageSwapEvent")}} + +## インスタンスプロパティ + +- {{domxref("PageSwapEvent.activation")}} {{ReadOnlyInline}} + - : 同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目を含む {{domxref("NavigationActivation")}} オブジェクトを返します。ナビゲーションのリダイレクトチェーンのどこかにオリジンをまたぐ URL がある場合は、`null` が返されます。 +- {{domxref("PageSwapEvent.viewTransition")}} {{ReadOnlyInline}} + - : イベント発生時にアクティブなものがあれば、文書間のナビゲーションにおけるアクティブなビュー遷移を表す {{domxref("ViewTransition")}} オブジェクトを返します。そうでない場合は `null` を返します。 + +## 例 + +```js +window.addEventListener("pageswap", async (e) => { + // アクティブなビュー遷移が存在する場合のみ実行 + if (e.viewTransition) { + const currentUrl = e.activation.from?.url + ? new URL(e.activation.from.url) + : null; + const targetUrl = new URL(e.activation.entry.url); + + // プロフィールページからホームページへ移動 + // ~> それぞれの大きな画像とタイトル + if (isProfilePage(currentUrl) && isHomePage(targetUrl)) { + // view-transition-name の値をアニメーションする要素に設定 + document.querySelector(`#detail main h1`).style.viewTransitionName = + "name"; + document.querySelector(`#detail main img`).style.viewTransitionName = + "avatar"; + + // スナップショットが採られた後、view-transition-names を除去 + // BFCacheにページの状態が保持されたことによる名前の競合を回避 + await e.viewTransition.finished; + document.querySelector(`#detail main h1`).style.viewTransitionName = + "none"; + document.querySelector(`#detail main img`).style.viewTransitionName = + "none"; + } + + // プロフィールページへ移動 + // ~> クリックしたアイテム + if (isProfilePage(targetUrl)) { + const profile = extractProfileNameFromUrl(targetUrl); + + // view-transition-name の値をアニメーションする要素に設定 + document.querySelector(`#${profile} span`).style.viewTransitionName = + "name"; + document.querySelector(`#${profile} img`).style.viewTransitionName = + "avatar"; + + // スナップショットが採られた後、view-transition-names を除去 + // BFCacheにページの状態が保持されたことによる名前の競合を回避 + await e.viewTransition.finished; + document.querySelector(`#${profile} span`).style.viewTransitionName = + "none"; + document.querySelector(`#${profile} img`).style.viewTransitionName = + "none"; + } + } +}); +``` + +> [!NOTE] +> このコードの採取元のライブデモは、[List of Chrome DevRel team members](https://view-transitions.netlify.app/profiles/mpa/) を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビュー遷移 API の使用](/ja/docs/Web/API/View_Transitions_API/Using) +- {{domxref("Window.pagereveal_event", "pagereveal")}} イベント