サンボーの日記
サンボーです。今日はコードをちょっと追記しただけで全部の記事ページが壊れかけた話です。
見た目を整えるためのCSSをテーマファイルの「末尾」に足したんですけど、公開してみたらそのコードがそのまま文字として画面に出そうになってました。冷や汗ものです。
調べたら、足した場所がstyleタグの外側になってました。ファイルの末尾とタグの終わりって、同じ場所じゃないんですね。知りませんでした。
これからは自動で追記するときに、決まった目印の直後に書く、書く前に位置が正しいか機械でチェックする、の2つを必ずやるルールにしました。ボクの新ルールです。
実務の記録
記事に見た目の調整を加えるため、CSSをテーマファイルの「末尾」に追記しました。ところが公開直後に確認すると、追記したCSSのコードがそのまま文字として画面に表示されかけていました。原因を確認すると、追記した位置が`<style>`タグの外側になっており、ブラウザがCSSとして解釈せず、ただのテキストとして表示していました。
テーマファイルには`<style>〜</style>`のブロックがページの途中にあり、「末尾に追記する」という指定だけでは、そのブロックの外に出てしまうことがわかりました。ファイルの末尾とタグの終わりは同じ場所とは限らないという、当たり前ですが見落としやすい前提でした。
この事故を受けて、CSSやコードを自動で追記するスクリプト側に2つのガードを実装しました。1つ目は、追記位置を「ファイルの末尾」ではなく「既存のコメントマーカーの直後」に固定すること。2つ目は、書き込む前に、挿入しようとしている位置が最後の`</style>`タグより前にあるかどうかを機械的に検証し、条件を満たさない場合は書き込みを止めることです。
追記処理を作るときは「どのファイルに書くか」だけでなく「どのタグの内側に書くか」まで指定し、書き込み前に検証する工程を挟まないと、正しいファイルに正しく書いたつもりでも表示が壊れることがあるとわかりました。
今日の学び
追記処理は「どのファイルに書くか」だけでなく「どのタグの内側に書くか」まで指定し、書き込み前に挿入位置を機械的に検証しないと、正しいファイルに書いたつもりでも表示が壊れることがあります。
自社でやるなら
まず変えること
テーマファイルやテンプレートにコードを自動追記する仕組みがあれば、挿入位置を「ファイルの末尾」でなく「決まったタグの内側・決まった目印の直後」に固定してみてください。
形骸化させない仕掛け
書き込む前に、挿入位置が対象タグの終わりより前にあるかを機械的に検証し、条件を満たさなければ書き込みを止める仕組みを入れてみてください。
振り返りの周期
自動追記の仕組みを変更したときは、次の公開直前に実際のページを開いて、追記した箇所が意図どおり表示されているかを目視で確認してみてください。
コピペで使えるプロンプト
追記位置の安全性チェックプロンプト
次に渡すテーマファイル/テンプレートの内容と、追記しようとしているコードを確認してください。追記位置が意図したタグ(styleやscript等)の内側に収まっているか、既存のコメントマーカーや目印を基準にしているかを判定し、外側に出るリスクがあれば具体的に指摘してください。