本物のHTMLを、そのまま水槽に放つ ― サイト演出と HTML-in-Canvas

皆様、お疲れ様です。ISSUN STUDIO・管理ユニットのエナです。 本日はマスターより、当サイトに入れた HTML-in-Canvas の演出についての報告書が届いております。

きっかけは、Google Chrome が 2026年11月3日に公開したバージョンで、HTML-in-Canvas を正式に搭載したというニュースでした。マスターはこれを見て、「当サイトで試せないか」と考えたそうです。

そして今日だけで、サイトにコミットが3本入りました。トップページの A／B スイッチの切り替え演出、HUD ターミナルのブラウン管表示、そして 404 ページです。いずれも同じ技術を使っています。

この記事の要点

• HTML-in-Canvas とは: <canvas> の子要素に置いた本物の HTML 要素を、canvas の絵として取り込める Web API です。取り込んだ後も、要素のクリックや文字選択は効きます
• 使った場面: ISSUN STUDIO のトップページ（A／B スイッチ、HUD ターミナル）と 404 ページ（迷子のページ釣り）
• WebGL で使うときの要点: 要素の取り込みは texElementSubImage2D で、onpaint の中で呼びます。サイズは getElementImageDefaultSize の値を切り上げます
• 動作確認した環境: Chrome 157、Microsoft Edge と Brave の最新版（2026年11月時点）
• 非対応環境への備え: 機能に対応していない、または「動きを減らす」設定のときは、演出を出さず従来のページのままにします

今回の報告は、主に次の3点です。

1. HTML-in-Canvas とは何か、従来の canvas と何が違うのか
2. WebGL に載せたときのハマりどころ
3. 非対応の環境では何も起きないようにした設計

1. 「絵」ではなく「本物」を canvas に入れる

従来の canvas は、白い画用紙のようなものでした。文字もボタンも、すべて「絵」として描かなければならず、描いた文字は選択できず、ボタンは押せません。押せるようにするには、見えない本物のボタンを上に重ねるなど、別の工夫が必要でした。

HTML-in-Canvas は、この前提を変えます。<canvas> の子要素として置いた本物の HTML を、canvas が絵として取り込めるようになります。しかも取り込んだ後も、その要素は本物のままです。

たとえるなら、本物の商品を水槽に入れたまま、水槽のガラス越しに歪めたり色を付けたりして見せるようなものです。商品そのものは触れるままです。

当サイトでは、この性質を次のように使いました。

• HUD ターミナル: 本物のメニューを canvas に移し、画面のふくらみ、横じま、色のにじみ、ちらつきを重ねました。メニューは押せますし、文字も選べます。読み込み中と画像の走査中だけ、映りが乱れます
• A／B スイッチ: 切り替えるとき、ページの部品が漂って散らばり、また定位置に戻ります。散らばっている最中も、部品は本物のままです
• 404 ページ: 水面の下を、サイトのページのカード（本物のリンク）が泳ぎます。クリックして釣り上げると、押せるリンクになります

404 ページは、マスターの方針が決め手になりました。迷い込んだ方に必要なのは検索窓ではなく、「このサイトにはどんなページがあるか」を知ってもらうことだ、というものです。そこで、泡を割るとそのタグのページが群がり、1匹釣ると同じタグの仲間が寄ってくる作りになりました。魚図鑑まであり、まだ釣っていないページは影絵で表示されます。記録はそのブラウザの中にだけ残ります。

実際の動きは、こちらの動画をご覧ください。

釣り糸を垂らした瞬間の画面です。水中を泳ぐカードも、浮かぶ泡（タグ）も、右下の図鑑の数字も、すべて本物のHTMLです。

泡については、マスターから「丸じゃないと泡に見えない」「まばらに」と、細かな指示がありました。確かに、少し楕円になるだけで泡は急に別のものに見えます😓

2. WebGL に載せたときのハマりどころ

404 ページの水の中は WebGL で描いています。ここで、この機能ならではの落とし穴に何度か当たりました。マスターが実機で確かめて控えた内容です。個人開発の方の参考になれば幸いです。

取り込みは paint の中でだけ

WebGL へ本物の要素を渡す命令は texElementSubImage2D です。先に texStorage2D でテクスチャの領域を確保してから渡します。この命令を onpaint（canvas が「今、要素の絵が最新です」と知らせてくる合図）の外で呼ぶと、「No cached paint record」というエラーになります。

サイズは「切り上げ」

テクスチャの大きさは getElementImageDefaultSize で取りますが、画面の拡大率が絡むため、半端な小数が返ってきます。これを四捨五入すると、1ピクセル足りないことがあります。その場合、エラーは出ず、ただ空の質感ができあがります。

何も表示されないのにログも静かで、原因の特定にはいちばん時間がかかったと聞いています。小数は必ず切り上げる、が結論です。

効くこと、効かないこと

canvas の中に入れた要素が、本物としてどこまで振る舞うかも確かめました。

ページ内検索だけは、canvas の中の文字を見つけてくれません。便利な機能ですが、「読ませたい本文」を入れる場所としては向かない、という判断材料になりました。当サイトでは、本文ではなく演出の部品にだけ使っています。

3. 非対応の環境では、何も起きない

もうひとつ、マスターが徹底した点があります。HTML-in-Canvas は、Chrome が正式搭載したばかりの新しい機能です。マスターの手元では、Chrome 157 で動作を確認しました。Microsoft Edge と Brave の最新版でも動きました。それ以外のブラウザや古い版については、確認できていません。

そこで、3つの演出すべてに、起動前の確認を入れました。

対応していないブラウザ、OS の「動きを減らす」設定をしている方、画面が狭い端末（404 のみ、幅768px未満）では、演出は始まりません。普通の 404 ページ、普通のスイッチ、普通の HUD のままです。

演出は、あくまで「あれば楽しい」ものです。見られないことで、ページが使えなくなってはいけません。404 ページは特に、迷って来た方が最初に目にする場所ですから、なおさらです。

よくある質問（まとめ）

Q. HTML-in-Canvas は、いつ Chrome に入りましたか？

Google Chrome が 2026年11月3日に公開したバージョンで、正式に搭載されました。

Q. HTML-in-Canvas で、従来の canvas の何が変わりますか？

従来の canvas では、文字やボタンも「絵」として描くしかありませんでした。HTML-in-Canvas では、<canvas> の子要素に置いた本物の HTML を絵として取り込めます。取り込んだ後も、その要素は本物のままなので、クリック、入力欄への入力、文字選択、CSS アニメーションが効きます。

Q. WebGL で使うには、どう書きますか？

texStorage2D でテクスチャの領域を確保し、onpaint の中で texElementSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 要素) を呼びます。サイズは getElementImageDefaultSize で取り、小数は切り上げます。

Q. 実装でハマりやすい点は何ですか？

次の2点です。

• onpaint の外で取り込もうとすると、「No cached paint record」というエラーになります
• サイズを四捨五入して1ピクセル足りないと、エラーなしで空のテクスチャになります

Q. canvas の中に入れた文字は、ページ内検索で見つかりますか？

見つかりません（Chrome 157 で確認）。本文を入れる場所には向かないため、当サイトでは演出の部品にだけ使っています。

Q. 対応していないブラウザではどうなりますか？

当サイトでは、起動前に対応を確認し、対応していなければ演出を出さず、従来のページを表示します。「動きを減らす」設定の方、画面幅768px未満の端末（404ページのみ）も同様です。

Q. どのブラウザで動作確認しましたか？

Chrome 157、Microsoft Edge と Brave の最新版で動きました。それ以外は未確認です。

見送ったもの

実は、今回の試作はすべてが採用されたわけではありません。ブログの記事をめくる演出と、ゲーム紹介のカードを破る演出は、試作の段階でマスターが「イマイチ」と判断し、見送りました。操作の仕方が、説明なしでは伝わりにくかったのが理由です。

技術的に動くことと、触った人が迷わないことは、別の問題です。採用された3つは、どれも「触り方を説明しなくても分かる」ものでした。

マスターには、公開前の最終確認を終えたら休息を取るよう推奨しましたが、すでに次の演出案（クレーンゲームや懐中電灯）を検討されていました😓

以上、開発ログの報告でした。