第4話：犯人は「&」だった （実装・トラブル編）
診断ツール本体が完成した、という報告を受けたときは、あっけないほどだった。文法チェックは通っている。判定ロジックも、6タイプと隠し2つ、すべて正しく出ることをテスト済みだという。
設置は簡単なはずだった。画像のURLを確認して、ファイルの中身をコピーし、「余白」の中に作ったページの「カスタムHTML」というブロックに貼り付ける。そのあと自分で一度診断してみて、動作を確認する。それだけだった。
設置先のページ名を伝えると、シェア用のURLも合わせて調整された。ここまでは、拍子抜けするほどスムーズだった。
つまずいたのは、そのすぐあとだった。「保存」して公開してみると、枠だけが表示されて、中身が出てこない。
原因はすぐに絞り込まれた。HTMLとCSS、つまり見た目の部分は生きている。動いていないのはJavaScript、つまり「動き」を担当する部分だけだった。使っていた入力ブロックが、プレビュー画面では問題なく動くのに、実際に公開したページでは中のプログラムを無効化してしまう仕様だったらしい。対策として、コードエディターから直接、標準の書き方で埋め込む方法に切り替えることになった。
言われたとおりにやってみても、まだ直らなかった。「シークレットウインドウで開いても同じ」。ここまで来ると、原因は「保存時にプログラムが消されている」のか、「実行時にどこかでエラーが起きて止まっている」のか、どちらかに絞られていた。
このあたりから、ブラウザを直接見に行ってもらうことにした。ページの中身とエラーログをその場で確認できる仕組みがあったのは、幸運だった。プログラム自体はページの中にちゃんと存在していた。つまり、消されているのではなく、動く途中でどこかに引っかかっている。
何度か切り分けを重ねた末に、ようやく犯人が判明した。「&」という記号だった。使っていたサイトの仕組みが、プログラムの中に含まれる「&」を、勝手に変換して壊していたのだ。ボタンひとつ表示されないという症状の裏に、たった一文字の記号が潜んでいた。
プログラムの中から「&」を完全にゼロにする形で書き直し、もう一度貼り直してもらった。
その一言のあとの手応えは、今も覚えている。キャッシュをクリアし、シークレットモードで動作を確認し、スマートフォンでの表示も見て、相談ページへのリンクが正しく飛ぶことも確かめた。
シークレット、スマホ、相談リンク。この3点が確認できたところで、第1弾は正式に公開完了になった。この夜の「動かない」から「&」の逮捕にいたるまでの顛末は、そのままこの記事のネタになっている。
(第5話につづく)
