記事同士が繋がっていなかった
こんばんは、ちまです。
焼き鳥屋さんのホームページ制作シリーズを5本書き終えたところで、気になることが出てきました。記事同士が繋がっていないことです。
検索から3本目の記事にたどり着いた方は、1本目や2本目があることを知りません。せっかく続き物として書いたので、最初の記事から読んで欲しい（笑）そこで、全記事の冒頭に「シリーズ目次」を置くことにしました。
やってみたら、単純そうに見えて意外と考えることがあったので、その話を書きます。
手作業だと、記事ごとに書き分けになる
目次といっても、5本のタイトルを並べてリンクを張るだけです。難しくはありません。
ただ、1つ引っかかったのが「今読んでいる記事」の扱いでした。自分自身へのリンクを置いても、押した人は同じページに戻ってくるだけです。ここはリンクを外して、太字で「この記事」と示したい。
すると、5記事すべてで1行だけ違う目次を作ることになります。5本ならまだしも、シリーズが増えるたびに全記事を開いて直す必要が出てきます。
WordPressには「同期パターン」という便利な機能があります。1箇所直せば、貼ってあるすべての場所に反映されるというものです。ところがこれは、全部が同じ内容になるので、「この記事だけ強調」とは相性が悪いんです（笑）
便利さを取ると強調ができない、強調を取ると手作業が増える、というトレードオフの状況に陥っていました。
「今どのページか」をJavaScriptに判定させる
そこでClaude Codeに相談したところ、JavaScriptで自動判定すればいいという話になりました。
理屈はこうです。ページが開かれた時に、今開いているページのアドレスと、目次に並んでいるリンク先のアドレスを1つずつ見比べる。一致したものが見つかったら、そこだけリンクを外して太字にする。
これなら目次の中身は全記事で同じままなので、同期パターンが使えます。しかも「この記事」の判定はページを開くたびに勝手に行われるので、記事が増えても目次に1行足すだけで済みます。
コードは10行ほどでした。私が自分で書けるものではありませんが、何をしているかは説明してもらえば分かるレベルです。「アドレスの末尾のスラッシュがある・なしで一致しなくなるので、そこを揃えている」といった細かい配慮も入っていて、こういうところは人間がやると見落としがちな部分だと思います。
保存できない。犯人はサーバーの防御機能だった
さて、いざWordPressに貼り付けて保存しようとしたら、見慣れないエラーが出ました。
更新に失敗しました。返答が正しい JSON レスポンスではありません。
何このエラー？状態です（笑）試しにJavaScriptの部分だけ消して保存したら、あっさり通りました。犯人はJavaScriptです。
原因は、サーバー側の WAF（ワフ） という防御機能でした。Webサイトへの攻撃を防ぐ仕組みで、その一種に「投稿の中に紛れ込ませたJavaScriptで悪さをする攻撃」への対策があります。今回はそれに引っかかって、正当なコードなのに巻き添えで拒否されていたわけです。
対処としては、サーバーの管理画面でWAFを一時的に切り、保存して、すぐ戻しました。防御を下げている時間は数十秒です。念のため、戻したことを目視で確認するのは忘れないようにしました。
ちなみに、目次を各記事に差し込む作業のほうはWAFを切らずに済みました。記事本文には「あのパターンを使う」という参照が入るだけで、JavaScript本体は含まれないからです。引っかかるのは仕組みを登録する時だけ、と分かったのは収穫でした。
作っておいてよかったこと
完成してみると、思っていた以上に効きました。
一番よかったのは、後から別のシリーズにも流用できたことです。この後にICLの体験記シリーズも同じ形で目次を付けたのですが、JavaScriptは全く同じものをコピーするだけで動きました。作ったのは1回でも、使うのは何度でもというやつですね。
それと、これは常々感じていることですが、今までできなかったことが、ツールをうまく使うことでできるようになることを、AIを使うようになってより実感します。自分の作業の幅が、じわじわ広がっていく感覚はワクワクします（笑）
手作業でやっていたら、たぶん5記事ぶん書き分けて、記事が増えるたびにため息をついていたと思います。「面倒だな」と感じた時点で仕組み化できないか考えてみる、というのは覚えておきたい感覚でした。
それでは、また次回〜
コメント