生成した画像に、undefinedと書いてあった

記事のアイキャッチは、自分で書いたスクリプトで作っています。タイトルと一言、それに題材に合わせた線画を1枚に組んで、画像として書き出す仕組みです。

連載を続けるために作った5枚を見返したとき、そのうち1枚に「undefined」と書いてありました。

線画の代わりに、文字が出ていた#

本来そこには、その回の題材を表す薄い線画が入ります。地図、盾、矢印、電波。背景に溶ける程度の濃さで置いてあります。

1枚だけ、その位置に undefined という薄い文字が入っていました。

なぜ止まらなかったか#

生成の仕組みは、記事ごとの設定（題名・一言・図柄の名前）を受け取って、HTMLの文字列を組み立てます。その文字列をブラウザに読ませて、写真を撮るように書き出しています。

図柄は、名前から一覧を引いて取り出します。第2回だけ、その引き当てに失敗していました。

なぜ見落としたか#

理由は3つ重なっていました。

気づいたのは、続きの回を作るために元のデザインを見に行ったときでした。同じ見た目に揃えるつもりで拡大したら、書いてありました。

作った直後には気づかず、別の目的で見返したときに見つかっています。出力を最後にちゃんと見ていなかったということです。

欠けたら止まるようにした#

直した内容は2つです。

ひとつは、その1枚を作り直したこと。もうひとつは、生成する前に図柄の指定があるかを確かめて、無ければその場で止めるようにしたことです。

if (!MARKS[a.mark]) throw new Error('図柄の指定が無い: ' + a.file);

1行ですが、これがあれば今回は画像が書き出される前に止まっていました。

公開前でよかった、で終わらせない#

今回は予約投稿の段階で見つかったので、公開された画像に混ざることはありませんでした。

ただ、これはたまたま続きを作る用事があっただけです。無ければそのまま公開され、SNSで共有されるたびにその文字が一緒に流れていました。アイキャッチは、記事の中で一番先に人の目に触れる部分です。

見つかった理由が偶然である場合、同じ偶然は次に起きないものとして扱ったほうがよいと考えています。

今回の学び#

まず、欠けた値は、文字として混ざるということ。文字列を組み立てる処理は、中身が欠けていても組み立てには成功します。成功したという事実は、中身が正しいことを何も保証していませんでした。

次に、1枚ずつ見ると、揃っていないことに気づけないこと。並べて比べれば違和感として出ますが、順番に見ると「そういうもの」として通り過ぎます。

そして、気をつけるより、止まるようにすること。1行の確認を足すだけで、次からは書き出される前に分かります。注意力に任せていた部分を、仕組みに移し替えられました。