CSS Gridで実現する放送の「スクイーズバック」：WebVTTでタイムラインを制御
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
Muxのブログで、テレビ放送で見られる「スクイーズバック」効果（映像が隅に縮み、周囲に別の情報が表示される）を、CSS GridとWebVTTで再現する方法を紹介。3x3のグリッドのトラックサイズをアニメーションさせて映像を縮め、空いたスペースにパネルを表示。タイムラインはWebVTTのキューの識別子とテキストで管理し、cuechangeイベントでレイアウトを切り替える。さらに、canvasで映像の色を抽出して周囲にアンビエントライトを再現するテクニックや、フォーム入力中のレイアウト変更を防ぐフォーカス制御も解説。CSS Gridのfr値の補間や@propertyの落とし穴など、実装上の注意点も具体的に示す。
グリッドのトラック値をアニメーションさせるだけで、映像の縮小とパネルの表示が同時に起こる。パネルは最初からそのセルにフルサイズで配置されていて、縮小はセルがそれを隠すのをやめた瞬間に過ぎない。
HNでの議論
10- jareklupinski
この効果は何度も見たことがあったけど、ちゃんと見ようとはしてなかったんだ。テレビでは普通のことだからね。でも、ある日の午前2時、眠れなくてiPhoneで調べ物をしていたときに、実は名前があることを知ったんだ：スクイーズバック（squeezeback）ってね。メディア関係の人たちと一緒にいるのが好きな理由を思い出させてくれたよ。TouchDesignerのおかげで、テクノロジーとインタラクティブを最高の形で橋渡しできて、彼らが頭の中で考えていることを、彼らのフローと言葉で正確に伝えてくれるんだ。そして、彼らがその場にいる間に、デザインを反復的にすぐフィードバックできるんだ。
- kmoser
これらのトランジションはアニメーションする想定ですか？つまり、ビデオのサイズが数秒かけて変化するということですか？なぜなら、FirefoxでもChromeでも、私の環境では新しいサイズに一瞬で切り替わるだけだからです。
- davekiss
著者です！これは楽しいものでした。このアイデアはしばらく頭の中でぐるぐる回っていました。ライブストリーム向けのワークフローもぜひ見つけたいですね。きっと可能だと思いますが、今のところはネイティブ技術だけでは難しいかもしれません。