要約

  • 2022年10月の W3C 最初の公開草案は、同じ文書の更新前後の見た目をブラウザーが捉え、別の視覚レイヤーでつなぐ View Transitions Level 1 を示した。
  • 2023年と2024年の Level 1 文書は、更新手順、名前を付けた要素、遷移用の疑似要素を詳しくした。2024年の Level 2 草案は、文書をまたぐナビゲーションにも対象を広げた。

ニュースの一覧に、写真付きの小さなカードがある。開いた先の記事では同じ写真が横幅いっぱいの見出しになる。写真が自然に大きくなれば、読者は選んだカードと着いた記事を一目で結び付けられる。ところが舞台裏では、カードを含む古い状態と記事を含む新しい状態が入れ替わる。かつて滑らかな動きを作るには、両方を一時的に文書内で生かし、表示が終わったら片づけることが多かった。動きのための大道具が、実際の文書を占拠していた。

W3C が2022年10月25日に出した最初の公開草案は、この大道具をブラウザーの描画側へ移した。ページは startViewTransition() を呼び、文書を更新する関数を渡す。ブラウザーは古い見た目を捉え、関数に文書を新しくさせ、新しい見た目も捉える。二つの表示を専用の層で動かすあいだ、実際の文書は新しい内容になっている。退場しているのは古い記事カードそのものではなく、その姿を写した一枚だ。

この差は読者にも関わる。古いカードと新しい記事を、効果のためだけに両方とも実体として置けば、どちらが操作対象なのか、どの順に読むのかがややこしくなる。視覚だけを一時保存すれば、文書はまっすぐ新しい状態へ進める。ブラウザーは写真を扱う。サイトは正しい記事とリンクを表示する。舞台写真が見事でも、台本が別の記事なら観客は帰ってしまう。

2023年9月5日の勧告候補は、手順を舞台進行表のように並べた。古い状態を捉え、描画を一時止め、ページの更新関数を走らせ、新しい状態を捉え、遷移の疑似要素を作ってから描画を再開する。標準の見せ方は画面全体のクロスフェードだ。写真や見出しだけを別に動かしたければ、view-transition-name を付けて CSS で演出できる。共通の舞台はブラウザーが建て、主役を決めるのはページだ。

名前には出席簿のような厳密さがいる。同じ状態で二つの要素が同じ名前を名乗れば、視覚遷移は中止され得る。2024年3月28日の勧告候補草案は、疑似要素の木や ViewTransition の進行をさらに細かくした。アニメーションを飛ばしても更新関数は呼ばれる。新しい内容を届ける仕事は、演出の成否と切り離されている。幕がうまく上がらない日でも、次の場面の役者は舞台に立たなければならない。

W3C の公開履歴は、2022年の初稿、2023年の勧告候補、2024年の改訂を記録する。そこを通して残る発想は、古い見た目を短く保持し、本物の文書を速やかに更新するという役割分担だ。サイトが調整するのは、どの要素を名指しするか、動きにどれだけ時間をかけるか、更新後に何を読ませるか。ブラウザーは一時的な画像の受け渡しを引き受ける。

次に境界線となったのは文書そのものの移動だった。2024年11月13日の Level 2 作業草案は、文書をまたぐナビゲーションで視覚遷移を行う仕組みを扱う。Level 1 の同一文書内の更新とは、引っ越す先が違う。二つの文書が関わるときも、読者が選んだものの行き先を見失わないよう、ブラウザーは画面の引き継ぎを整える。

良い演出は、選んだ写真がきちんとその記事へつながったと納得させる。派手なズームで見当違いのページに着けば、間違いが派手になっただけだ。ブラウザーは古い画面の記念写真を撮れる。新しいページを読む価値のある場所にするのは、今も編集者の仕事である。