作ったものが、
互いにつながっていない

「作れば見てもらえる」は、作る側の錯覚だった

作品が増えれば見られる回数も増えるはずだ、と思っていました。実際は増えません。 増えたのは入口の数だけで、入った人が次に行く先が用意されていなかった。

自分の頭の中では、全部つながっています。この物語とあの地図は同じ世界観だし、 このショートの本編はあの長い動画です。作った本人には自明なので、 線を引き忘れていること自体が見えません。

作品は増えたのに回遊が起きないとき、足りないのは作品ではなく作品と作品の間です。

しかもこれは、沈黙する不具合の一種です。 リンクが無くてもエラーは出ない。ページは正常に表示される。 離脱した人は何も言わずに閉じるだけなので、苦情という形でも返ってこない。

公開物を機械で巡回すれば、線の有無は数えられる

導線は感覚の問題に見えますが、「AからBへのリンクが何本あるか」は整数です。 数えられるものは検査にできます。

大事なのは、手元のファイルではなく公開されたURLを叩くことです。 コミットし忘れや、デプロイ前の状態を、手元の検査は素通りさせます。

def get(url):
    req = urllib.request.Request(url, headers={"User-Agent": UA})
    return urllib.request.urlopen(req, timeout=45).read().decode("utf-8", "ignore")

top = get(BASE)
for w in WORKS:                      # トップ → 各作品
    n = top.count('href="' + w) + top.count('href="./' + w)
    print(w, n, "本")

for w in WORKS:                      # 各作品 → トップ
    h = get(BASE + w)
    back = h.count('href="../"') + h.count('href="/"') + h.count('href="index.html"')
    print(w, "戻り", back, "本")

20行ほどです。実行して、出てきたのがこれでした。

行き止まりだったのは、いちばん検索から人が来るページ3つでした。 地図、絵本、旅の記録。どれも単体で完結して見えるので、 作っているときに「ここから他に行きたい人がいる」と考えていなかった。

検索から来た人は、そのページを見て、そのまま閉じます。 他に15本あることを、知る手段がなかった。

導線の点検 — 四つの数え方

① 入口の数ではなく、出口の数を数える

「トップから全作品にリンクがあるか」は誰でも確認します。抜けるのは逆方向です。 各ページに、次に行ける場所があるか。 これを全ページぶん機械で数えます。ゼロのページが行き止まりです。

直し方は難しくありません。全ページ共通の小さな固定リンクを1つ置くだけです。 ただし置いたあと、本当に押せるかを確認する必要があります。 全画面のUIを持つページでは、他の要素の下に隠れることがあるからです。

hit = pg.evaluate("""() => {
  const a = document.querySelector('.homeback');
  const r = a.getBoundingClientRect();
  const top = document.elementFromPoint(r.x + r.width/2, r.y + r.height/2);
  return top === a || a.contains(top) ? '押せる' : '覆われている';
}""")

elementFromPoint でその座標にある最前面の要素を取り、 自分自身かどうかを見ます。「表示されている」と「押せる」は別物で、 is_visible() は前者しか答えません。

② 対になっているのに、繋がっていないものを探す

動画は90本ありました。うち半分以上が短い版で、それぞれに長い本編があります。 その2本の間に線が引かれているかを数えたら、14組中7組が空でした。 さらに1組は、短い版から別の短い版に繋がっていました。

再生リストは90本に対して2本。ほぼ何もしていない状態です。 「短い版 → その長い版 → 次の短い版 → その長い版」の順で並べた再生リストを3つ作り、 公式の紐づけ欄も14組すべて埋めました。

③ 表示が同じでも、中身が同じとは限らない

紐づけの作業中に、まったく同じタイトルの候補が2つ出ました。 過去に同じものを二重に投稿し、片方を限定公開のまま放置していたためです。

問題は、画面上でこの2つが一切区別できなかったことでした。 バッジも出ない。ここで非公開のほうを選んでも、エラーは出ません。 リンクを踏んだ人だけが見られず、こちらは気づかない。

見分けたのは、候補カードのサムネイル画像のURLでした。 i.ytimg.com/vi/(動画ID)/ という形なので、 表示されている文字が同じでも、画像の出どころには識別子が入っています。

const th = card.querySelector('.thumbnail');
const bg = th.getAttribute('style') || '';      // background-image に入っている
const id = bg.split('/vi/')[1].split('/')[0];   // ここが本当の識別子
if (id === WANT) card.click();

同じに見えるものを選ぶときは、表示ではなく識別子で選ぶ。
画面が正しく見えることは、正しいものを選んだ証拠になりません。

④ 設定した、を信じない

管理画面は保存後に正しい値を表示します。ただし表示されるのはタイトルだけで、 同名のものが2つあると、どちらが入ったかは画面から分かりません。

そこで最後に、公開ページのHTMLを取ってきて識別子を数えました。

html = get("https://www.youtube.com/shorts/" + short_id)
print(want, html.count(want))    # 正しいID   → 5
print(dupe, html.count(dupe))    # 間違ったID → 0

5と0。ここで初めて「設定できた」と言えます。 公開物での検証と同じ考え方で、 確認は必ず、利用者が見るのと同じ場所で行う。

実際に直したもの

最後の行は数えた結果ではなく、数えている途中で気づいたことです。 トップページの入口が「何があるか」だけを示していて、 「自分がいま入れるか」を答えていませんでした。 初めて来た人が判断できるのは、分類ではなく所要時間のほうです。

同じ点検を、自分の持ち物にかけるなら

1. 作品の一覧を1つの配列にする — 頭の中の一覧では抜けます。書き出した瞬間に抜けが見えます
2. 公開URLを叩いて、出口の数を数える — 手元のファイルではなく公開物。ゼロのページが行き止まり
3. 対になっているものを列挙して、線の有無を数える — 短い版と長い版、記事と作品、原作と実装
4. 置いたあと、押せることを確認する — 表示されている ≠ 押せる
5. 識別子で確認する — 表示名で確認すると、同名の別物を掴んでも気づけません

詰まりやすい所

新しい作品を1つ作る時間で、既にある90本の導線を直せます。
今回は、後者のほうが明らかに割が良かった。

沈黙して壊れるものの分類は 品質検問 に、 検査を機械に任せる話は 自動テストの実際 に、 他の型は 新しい形の研究 に置いています。