第12回：Cloudflareに画像を置き、HTMLを軽くした日

公開日：2026年05月17日

画像はwebに置こう

表情差分やタイトル画像、先生画像が増えると、HTML内にBase64で画像を埋め込む方式は重くなった。一時はHTMLが約19MBになっていた。単体で開けるのは便利だが、Web公開するなら読み込みが重く、画像差し替えも面倒になる。

そこで、キャラクター画像、タイトル画像、先生画像をCloudflare上に置き、HTMLからURL参照する方式に切り替えた。公開サイトに近い運用を考えると、この方が管理しやすい。

AIには、CloudflareにアップしたアセットURLを確認し、HTMLをBase64埋め込みからURL参照方式に変更するよう依頼した。キャラ画像は、miyu、akari、rin、player、teacherの各ディレクトリに置き、タイトル画像はui/title.pngとして参照する構成だった。

最初、AI側の環境からはDNS解決に失敗することがあった。しかし、ブラウザでは正常に表示されていることを確認し、個別PNGのURLが開けるなら問題ないと判断した。先生画像はteacher_angry.pngを使うことにした。

URL参照方式に切り替えると、HTMLサイズは約0.06MBまで大きく減った。キャラ画像28枚、先生画像、タイトル画像を外部アセットとして読むようにしたため、HTML本体はかなり軽くなった。

キャッシュ対策として、URLにはv=20260520のようなクエリを付けた。画像を差し替えた時は、このバージョン値を変えれば、ブラウザキャッシュを避けやすくなる。これは公開前の運用としてかなり重要だった。

アセット管理は地味だが、制作の気持ちよさに直結する。画像を差し替えるたびにHTMLを作り直すのは手間が大きい。URL参照にすると、画像を更新するだけでゲームの見た目を変えられる。

さらに、スマホ縦画面対応も同時期に進んだ。スマホでは3列×4行に画面を分け、左側にキャラ、上にトレンド、中央にメッセージ、下に手札を置く。セリフ文字が小さくならないよう、スマホ時はログを15px前後に調整した。

外部アセット化では、URLが本当に開けるか、ディレクトリURLではなく実ファイルURLを確認する必要があった。ディレクトリが404でも、個別PNGが開ければゲームには問題ない。

また、Cloudflareのキャッシュは便利だが、開発中は古い画像が残ることがある。バージョンパラメータを付ける運用を早めに入れたのは良かった。

次は、公開に向けてルール説明画面、速度調整、コピー対策、BGM切り替えなどを整えることになった。ゲーム本体だけでなく、Web公開用の周辺機能が必要になってきた。