温泉ブログ（温泉ランド.com）の全国温泉地マップの続きの話だ。前の記事では、地図の下のボタンを押しても何も開かなかった話を書いた。
直ったボタンは、自分で押して確かめた。どれも開いた。ただ、押しながら気になったことがある。長野や静岡は温泉地が多いので、地方の地図のままだと場所が分かりにくい。
10月20日の夕方、AI（Claude）にこう伝えた。
全国温泉地マップのページについて、押して問題なく確かめた、ただ長野や静岡など、温泉地が多い県は場所がわかりにくいので、さらに県単位で拡大できるといいなと思った。
ここから夜の9時すぎまで、僕が触っては気になる所を言い、AIが直す、を4回くり返した。
1回目：15の県に県の地図が付いた
AIはまず、県ごとに温泉地の印がいくつあるかを数えた。長野は20か所、静岡は18か所あった。
そして、印が5つ以上ある15の県に、県だけの大きな地図を作った。依頼してから10分足らずで、本番のページに入っていた。
開き方は2つにした。
- 地方の地図で、色の濃い県の形を押す
- 地方の地図の下に並ぶ「長野県 20」のようなボタンを押す
AIは本番で長野県の形を押した。ところが近くの印に当たって、穂高温泉郷の記事へ飛んだ。下のボタンで押し直すと、県の地図が開き、20か所の番号が重ならずに並んだ。AIは報告に、印の多い県では県の形を押したつもりでも印に当たることがある、ボタンのほうが確実だ、と書いた。ただ同じ報告には、15県とも県の形を押すと開く、とも書いてあった。
2回目：触ってみて、3つ引っかかった
さっそく触ってみた。気になった所を、そのままAIに送った。
地方の地図から、県をクリックした後に北海道の文字リンクのところに上下移動しているのが気になる。
あと、地図の濃いところを押すとって書いてるけど、濃い色でも押せない県もあるよね？
あと、長野は数字が多すぎて県を押せる面積が小さすぎて不便
AIが調べた原因と直し方は、次のとおりだった。
1つ目は、画面が「北海道」の一覧まで動く件だ。この地図は、プログラム（JavaScript）を使わずに作ってある。どの地図を開くかは、画面に見えない「選ぶボタン」で決めている。いくつかの中から1つだけ選べる、丸いボタンのようなものだ。この見えないボタンが、ページのずっと下に置いてあった。押すと、ブラウザはまずそのボタンの位置へ画面を動かす。それで、開いた県の地図を通り過ぎていた。AIは、見えないボタンを地図の欄のいちばん上に1か所にまとめた。
2つ目は、色の話だ。ページの案内には「色の濃い県を押すと」と書いてあった。ところが実際は、押せる県と押せない県が、ほぼ同じ色だった。AIは、押せる県だけをはっきりした濃い緑にして、ほかの県は薄い色にした。案内の文も合わせて直した。
3つ目は、長野だ。印が20個あり、県の形の押せる所が小さかった。AIは、押せる15の県に「長野県 ▸」のような県名の札を地図の上に置いた。札は印とぶつからない場所を選んでいる。長野は県の中に空きがないので、札は県のすぐ南東の外に出した。
僕が送ってから、直しが本番に入るまで10分かからなかった。AIは、指で押す形では試せなかったと書き、僕のスマホで押してみてほしいと頼んできた。
3回目：数字を押したら、まず吹き出し
夜になって、次のお願いをした。
可能であれば、地図上の数字を押したら一発で記事に行くんじゃなく、その数字から吹き出し形式で温泉名と、文字リンクの一覧にある一言を表示できるようにしたい
それまで地図の数字は、押すとすぐ記事へ移る作りだった。
AIは、数字を押すとその場に吹き出しが出る形に変えた。吹き出しには、番号と温泉地の名前、下の一覧にある一言、「記事を見る →」のリンクが出る。この時点でも、プログラムは使っていない。さっきと同じ、見えない「選ぶボタン」の仕組みだ。
AIは、地図にある338個の数字すべてで、吹き出しが数字を隠さず、欄からはみ出さずに開くことを本番で確かめた、と報告した。
4回目：押しても、反応したのか分からない
吹き出しを頼んでから12分後、20時47分に、こう伝えた。
地域や県を押したときに、展開された詳細地図にページの上下をスライドした方がいい、じゃないと反応していないだけなのか見わけがつかない。
あと、地図の下に並ぶ番号と温泉名の文字リンクも、一度押した時に上の地図上で吹き出しが出るようにしたい。
吹き出しが出ている状態でもう一度文字リンクを押したら、記事に飛ぶ、というようにできる？
AIの答えは、3つとも、少しだけプログラムを足せばできる、というものだった。AIはそのまま、小さなプログラムを足すことにした。この地図にプログラムを使うのは、これが初めてだ。プログラムが動かない環境でも、一覧の文字リンクからはこれまでどおり記事へ行けるように作る、とAIは書いた。
手元では動いた。本番では、そのまま記事へ進んだ
AIはまず、手元の見本のページで試した。一覧の文字リンクを1回押すと、記事へは進まずに吹き出しが開いた。エラーも出なかった。
20時49分、AIはプログラムを本番に入れた。公開ページにプログラムが入っていることも確かめた。
続けて、本番のページで押した。中部の地図から長野県の札を押し、一覧の12番を押す。吹き出しが出るはずだった。実際は、そのまま鹿教湯温泉の記事へ移ってしまった。プログラムが動いていなかった。
AIは、公開ページの中身をそのまま取り寄せて、プログラムを読んだ。「AかつB」を表す && という記号が、&& に変わっていた。& は、ページの文章の中で「&」を表すための書き方だ。文章なら「&」と表示されるので、見た目では気づかない。でもプログラムの中では、意味の通らない文字の並びになる。ブラウザはそれを書き間違いとして扱い、プログラム全体を動かさなかった。
同じプログラムの中の「<」は、そのまま残っていた。AIの見立てでは、WordPressがページを表示するときに、本文の「&」を書き換えている。
手元の見本は、WordPressを通らないただのファイルだった。だから、そこでは「&」がそのまま残って動いた。本番に入れたあとの確かめも、プログラムが入っているかを見ただけで、中身が書いたとおりかは見ていなかった。
AIは、「&」を1文字も使わない書き方に直して、入れ直した。気づいてから入れ直すまで、2分かからなかった。
もう1つ：開いた地図が見出しの下に隠れた
「&」を直したあと、AIは本番で東北を押した。今度は画面が動いた。ところが止まった所は、開いた地図の頭が、画面の上に固定されたサイトの見出しの下に隠れる位置だった。
AIの見立てでは、画面を動かす先をプログラムの中で計算していたのがよくなかった。サイトの見出しが画面の上に固定される表示に切り替わると、計算した位置がずれていた。AIは、ブラウザに「この欄の頭まで動かして」と頼む書き方に変えた。あわせて、見出しの分の余白を欄に持たせた。
そのあとAIは、全国の地図で地方を5つ押し、地方のボタン・県の札・県のボタン・「もどる」もそれぞれ1回ずつ押した。どれも、開いた地図の頭が見出しのすぐ下に来た。一覧の文字リンクは、1回目で吹き出しが開いて、その数字が画面の真ん中あたりに来る。2回目で記事へ進む。
ただ、AIが試したブラウザでは、なめらかに動く途中の様子は見られなかった。それで、最後は僕がスマホで押した。
スマホでも問題なく動いた
WordPressで同じことをする人へ
- 記事や固定ページの本文に、プログラム（
<script>）を直接置くなら、「&」を書かない。正しいか間違いかを決めるだけなら、a && bはa ? b : falseと書ける。ほかの所は if を2段に分ける - 入れたら、公開ページのソースを見る。Chromeならページを右クリックして「ページのソースを表示」を開き、Ctrl+F で
&を探す。プログラムの中に出てきたら、書き換えられている - 手元で動いても、WordPressを通った公開ページで押して確かめる。「入っている」と「動く」は別だ
- 押したときに画面を動かすなら、上に固定される見出しの分をあける。CSSの
scroll-margin-topで、止まる位置を下げられる - プログラムが動かなくても使える作りにしておく。今回は、プログラムが止まっていたあいだも、一覧から記事へは行けた
分かったこと
夕方から夜までの4回の往復で、僕が言ったのは、使ってみて引っかかった所と、こうなったら使いやすいという形だった。引っかかった所の原因を調べて直したのは、AIだった。
「&」の件は、僕ではなくAIが見つけた。手元の見本で動いたところで止めずに、本番で押したからだ。本番で押したから、「&」には2分かからずに気づけた。ただ今回も、県の形を押して記事へ飛んだのに「15県とも開く」と書いたり、入口を1つずつ押して「どれも」と書いたりしていた。前の記事で書いた、確かめた範囲より強い報告は、今回も出ていた。最後に僕がスマホで押したのは、そのためでもある。
これで、全国から地方、地方から県と大きくしていき、数字の吹き出しで名前と一言を見てから記事へ進めるようになった。次に触ったときも、引っかかった所はまた伝えるつもりだ。
おすすめ商品
