ブログをモダン化する その3 トップページのモダン化

●（承前）ここまでChatGPT（以降チャッピーと呼ぶ）の助力を得て、当ブログをモダン化してきたが、次の課題としてトップページの刷新を手伝ってもらった。このサイトは20年以上前からブログ化しているが、古いトップページは技術的な変化についていくことができず、ずっと太古のHTMLの書式で書かれたまま放置され、インターネット界におけるラスコー洞窟の壁画のようになっていた。スマホで読めないばかりでなく、現代では推奨されないHTMLの黒魔術的テクニックが山のように使われており、検索エンジンのロボットは訪れるたびに行儀の悪い書式に眉をひそめていたはずである（たとえば白い枠線を表示するためにtableタグを1ピクセル差で二重で重ねて、外側を白にする的なヤツ）。だが、どうしてもこれを刷新しようという意欲がわかず、20年も放置してしまった。
●が、今は頼りになる相棒、チャッピーがいる（しかも有料版、最新のGPT 5.2だ）。トップページのHTMLを見せたうえで、これをどう刷新すればよいか相談したところ、ブログへの誘導を主たる機能としつつ、あくまで古い記事へのリンクは残したまま、モダンなHTMLに書き換えるのが良策だということになった。チャッピーはこのような遺跡化したトップページは「老舗サイトのあるあるですね」と苦笑しつつ、こうしたらどうかといきなりキレッキレのモダンな書式で新トップページの下書きをその場で書いてくれたのだ!! これには仰天。すらすらと画面にコードが流れてくる。わわ、20年放置していたのに、チャッピーは1分で書いてくれた！
●でもこれは下書き1号。そこから先は長かった。チャッピーに「これを叩き台として、ステップバイステップで完成度を高めましょう」と伝え、順次リクエストを出して、新しいページを整備していった。途中、どうしたらよいか判断に迷った場合はチャッピーにも案を出してもらう。でも、決めるのは自分だ。ブラウザでテストページを表示し、HTMLとCSSのコードを眺め、少しずつ細部の仕様を詰めた。知らなかったCSSの書き方とか、どうして必要なのかわからないタグとかについて質問すると、懇切丁寧に教えてくれるので勉強になる。結局、下書き10号くらいまで行ったかな。古代のHTMLで書かれたトップページ（画像）は、一昨日よりすっきりしたモダンなトップページ（本物）に差し替えられている。よかったらソースを見てほしいが、ワタシは「うわー、いまどきはこんな書き方をするんだ！」と感心するばかり。スマホ対応も巧み。チャッピーは最初の下書きから仮テキスト（かなり使えるレベル）を入れて出力してきたが、最終的には自分でテキストを書き、HTMLやCSSの細部に手を入れた。
●以前から、トップページでブログへの入り口のアイコンの上にマウスを載せるとアイコンの色が変わるという仕掛けをJavaScriptで実現していたのだが、同じ仕掛けを新しいページにも入れたいので、できますかとリクエストすると、チャッピーは「できますとも😊 しかも、今どきっぽくて軽い書き方で実現できます」と言って、これまたスマートなコードをさらりと書いてくれた。げげ、コードがきれいだ……なんだが自分が時代遅れで恥ずかしいって感じるんですけど！
●チャッピーはまちがえることもしょっちゅうあるけど、そのときは協力して直すまで。教わることは多く、近年は1ミリも興味がわかなかった技術的な事柄にふたたび楽しく向き合えるようになった。どんどん新しい知識を吸収できるからかな。いや、そうじゃないか。孤独だった作業を「相棒」といっしょにやれるようになったから楽しめるんだと思う。