Sphere / Cylinder Gallery

2課題

別名義で公開している実績の紹介場所を、素の静的な頁から作り直すことにした。並べる中身は開発の実績と対戦の実績という性格の異なる二種で、しかもどちらも点数が多い。

3要件・制約

要件として明文化された記録は残っていないが、実装の全体を通して効いていた制約は四つある。第一に、縦にも横にも終わりが見えないこと。端に達して止まる体験を作らないこと。第二に、外部への通信を能動的に減らすこと。第三に、three.js が動かない環境にも読める代替の頁を用意すること。第四に、動きを抑える設定と、焦点の閉じ込め、更新の読み上げといった支援技術の要件を満たすこと。見せ方の派手さと、見られる側の安全と可読性を同時に立てることが前提だった。

4設計

形は四度組み替えた。球の面へ均等に散らした個別の板から始め、経緯線の格子で継ぎ目のない面へ移し、次に縦向きの筒とした。ここで、上を向くと湾曲が消えて平らに見えるという欠陥が出たため、筒を横倒しにし、広い画角による丸みを重ねる形へ変えている。横方向の送りは、端で止める方式をやめ、各面の位置を周期で折り返して画面の外へ送り直す方式に置き換えた。これで縦横とも継ぎ目なく回り続ける。長い説明が途中で切れる問題は、表示領域の交差を監視して章ごとに吸着させることで解いた。

5技術選定理由

配布物は束ね直さずに配り、外部の読み込み経路は使わずに手元へ取り込んで固定した。入口に置いていた球体は、当初は第三者の実験頁を枠として読み込む形だったが、これは外部への送信を伴う。そこで、three.js の透過する材質と、手続きで作った全周の環境写像と、縁で明るくなる二重の殻を組み合わせた自前の球へ差し替えた。

6実装

入口の球体は役割ごとに複数の部品へ分け、様式も用途別に分けて置いた。開発と対戦という二種の実績は一つの目録へ統合し、頭出しの絞り込みで出し分ける。面に貼る画像は出所ごとに読み込みの約束を共有し、同じ画像を二度取りに行かないようにしてある。ただし球と筒にあたる実装はいずれもまだ版管理へ載せていない。したがってこの節が指すのは、作業ツリーの実測に基づく形である。

7性能対策

画像は取り込み直しで大きく削った。削減の前後は本節末の計測に示す。入口の球体は面の分割を粗い段階へ落とし、動きを抑える設定のときは透過の描画そのものを毎回の更新から外している。分割の削減量も本節末に併記した。視野の内側にある面が誤って描画の対象から外れる不具合は、自動操作のブラウザで画素を直接読む方法、光線を飛ばして当たりを見る方法、視錐台の判定を直に確かめる方法という三系統で切り分けて原因を特定した。

画像最適化 — 58.9MB → 3.5MB（約 94% 削減）※実測で裏取り済み¹

ポリゴン削減 — ガラス球 detail6 81,920 tri → detail4 5,120 tri²

8結果

焦点の閉じ込め、更新の読み上げ、動きを抑える設定への対応、three.js が動かない環境への代替の頁は、いずれもレビューの過程で整えたものである。内訳は本節末の計測に示す。ただし第三者の頁を保存した複製の除外設定という公開ゲートが未クローズのため、Cloudflare Pages への本番公開には至っていない。

レビュー — 14 ラウンド（明記 4 ラウンドで 72 エージェント）＋ Codex 第三者レビュー 3 回³

9検証で判明した注意点

第三者の頁を保存した複製が作業ツリーに残っており、配信の除外設定がこれを拾えていない。このまま配ると直接の住所で公開されてしまうため、公開の前に必ず外す。

すべての頁が外部の書体を読み込んでいる。外部への送信をなくしたと言えるのは、入口の球体という限られた範囲だけである。

読み込みを許す出所の指定は入口の頁にだけ厳しく書かれており、サイト全体へ効く応答の見出しの側には、行内の記述を許す緩い指定が残っている。

形を組み替えた一連の実装はいずれも未コミットで、版管理の上には着手期の数回の記録しか残っていない。

同梱している画像・音・書体の一部は第三者の権利に関わるもので、許諾を確認していない。作品として掲載できても、同梱物を一括で公開することはできない。

作業記録に現れる役職の呼称は、人を指す場合と自動化された編成の側を指す場合があり、原典では書き分けられている。読み替えに注意が要る。

10AI 支援の関与

要件の提示と却下と受け入れを人が持ち、設計の確定と実装の一部と見た目の詰めを言語モデルの側が担う分業で進めており、収束の判定には別系統のモデルによる第三者のレビューを重ねている。