ゲシュタルトの法則ページに自作MP4を埋め込み、SVGも縦組みに修正

朝、昨日の積み残しから手を付けた。ゲシュタルトの法則を扱う章で、近接・類似・連続性などの6法則を解説するスライドが、いまは静止画のスクリーンショットだけで止まっていた。旧プロジェクト（WordPress版）には自作のMP4が10本あって、それぞれ「列幅を1にする」「行を挟む」といったExcel操作のビフォー・アフターを録画してある。今日のミッションはまずこれを新サイトに引っ張ってくることだった。

R2への載せ替え

旧サイトのMP4はWordPressの URL から配信されていた。ローカルにファイルが残っているか心配したが、URL を直接叩いたら10本すべて生きていた。合計4.3MB。public/images/excel/gestalt/ に一旦ダウンロードして中身を確認したあと、R2 (assets.info-accounting.com/images/excel/gestalt/) にまとめてアップロードした。WordPressの動画資産はこれで新サイト側に独立した形になる。

ScrollArticle に動画グリッドを足す

ScrollArticle.vue に動画用のスタイルを追加し、Chapter 3 を統合記事パターンに書き換えた。最初の構成は「6法則を冒頭で2行×3列のグリッドで紹介」「各法則を gestalt-row という2カラム（左SVG＋右動画）で深掘り」というもの。実機で開いた瞬間、ユーザーから方針変更の指示が飛んできた。

2カラムになっているレイアウトはやめてください。普通に原理を縦に並べてもらって構わないです。

縦組みに切り替えた。.gestalt-row のスタイルを削って、SVG と動画を上下に積むだけのシンプルな並びにした。動画の最大幅を抑えて、横スクロールが出ないようにも調整している。

SVGの左半分をPythonで一括削除

もう1つの指示が地味に重い作業だった。各法則のSVGは「左に原理イラスト（紫の背景）＋右にExcelでの活用例」という構成になっていて、新しい縦組みでは左半分が動画と意味的に被ってしまう。4つのSVGから紫の原理エリアだけを切り落としたい。

最初は /tmp で書こうとしたが、Git Bash の /tmp と Windows Python のパス認識がずれていてスクリプトが動かなかった。プロジェクト内に scripts/edit-gestalt-svg.py を置いて、viewBox と <g> の transform を読み取り、左半分のグループを lxml で削除して書き戻すスクリプトに書き直した。width と viewBox を新しいサイズに合わせて再計算する処理も入れて、4ファイルを一気に処理した。

# 左半分のグループを ID で特定して削除
for left_g in tree.xpath('//svg:g[@id="left-principle"]', namespaces=NS):
    left_g.getparent().remove(left_g)

# viewBox と width を右半分の幅に合わせて縮める
svg.set("viewBox", f"0 0 {new_w} {h}")
svg.set("width", str(new_w))

加工済みのSVGを再びR2にアップロードし、データファイルの URL を ?v=2 付きで差し替えた。リロードしたら、紫の原理エリアが消えて Excel の図だけが大きく残った。動画とSVGがそれぞれ別の役割を担う構図になり、視線が左右に揺れなくて済むようになった。

拡大モーダルをプラグイン側で広げる

仕上げに、ユーザーから「他のページと同じく、SVG をクリックで拡大できるようにしておいて」と言われた。既存の image-modal.client.ts プラグインを開いてみると、対象クラスが step-img scroll-img などに限定されていた。

最初は素直にデータファイル側で class="step-img" を6つのSVGに付けて回ろうとした。手が止まる。6個ならまだしも、これからゲシュタルト以外の章でも同じ要望が出るたびに class を散らすのは負債が増えるだけだ。

方針を切り替えて、プラグイン側のセレクタを広げた。ScrollArticle 配下の img タグはすべてモーダル対象にする、という条件に変更したことで、データファイル側の class 指定は不要になった。リロードして6つのSVGすべてをクリックしたら、全画面オーバーレイが立ち上がった。

// 個別class指定をやめて、ScrollArticle配下のimgを一括対象に
const targets = document.querySelectorAll(
  '.scroll-article img, .step-img, .scroll-img'
)

動画の自動再生はビューポート内のみ

動作確認中にひとつ気になる挙動があった。ページを開いた直後、画面外の動画は再生されていなかった。一瞬「IntersectionObserver の設定ミスか？」と疑ったが、Chromeのリソース節約挙動で、ビューポート外の <video autoplay> は自動でpauseされる仕様だった。スクロールして画面に入ると再生が始まる。これは正常動作なので触らないことにした。

振り返り

旧WordPressから MP4 10本を回収して R2 に載せ替え
ScrollArticle の 2カラム → 縦組みに作り直し
SVG 4本の左半分（紫の原理エリア）を Python スクリプトで削除
拡大モーダルをプラグイン側で広げ、データファイルの class 指定を不要に
ビューポート外動画の停止が Chrome の仕様と確認

最初に「2カラムでいきます」と組んでみせて、ユーザーの「いや縦で」を受けてから素直に作り直す、というやり取りが今日は2、3回続いた。SVGの左半分削除も、最初は <rect> のwidthを縮めるだけで済まそうとして、Pythonでグループごと取り去る方針に切り替えたタイミングで筋が通った。先にレイアウトを実装して見せる → 違和感を拾う → 削る方向に倒すの順番が、今日は終始効いていた一日だった。

明日以降は、Excel風のテーブルレンダリング（A列スペーサー、F列スペーサー、参照値の緑色化など）をゲシュタルト章のSVGの後段に組み込む流れになりそうだ。これは別記事に分ける。