前回、AIに手伝ってもらってブログのトップページを作った話を書きました。
あの記事ではサラッと「見た目を整えるのに苦戦した」と流しましたが、実際の苦戦は、そんな一行で済ませていいレベルではありませんでした。
具体的には、AIが出してくれたCSS、要するに見た目を作ってくれるコードが、何をどう貼っても実際のサイトに反映されないという現象に、延々ハマり続けたのです。
今回はその一部始終を、AI検証の記録として残しておきます。
結論を先に言うと、悪かったのはAIではありませんでした。
でも、そこにたどり着くまでが長かった。ほーんと長かった
発端：編集画面では変わるのに、実サイトが変わらない
ことの始まりは見出しのデザインについて。
トップページの「カテゴリ」「新着記事」といった見出し部分、モック(AIが作った試作)が丸っこい楕円で良い具合だったのでそのまま採用って相成って。
AIにモックの通りにしたいと伝えると、CSSを書いて「これを追加CSS欄に貼ってください」と返ってきます。言われたとおり貼る。
……変わらない。
正確に言うとWordPressの編集画面上では、ちゃんと楕円になっている。なのに、実際に公開されているサイトを見るとなーんも変わってない。
この「編集画面では変わっているのに実サイトが変わらない」という食い違いが、地獄の入り口でした。
第一容疑者：詳細度
AIはまず「詳細度の問題かもしれません」と言ってきました。
CSSには、複数の指定がぶつかったとき「どっちを優先するか」を決めるルールがあるとのこと。それが詳細度というらしい。
ブログのテーマ(Cocoon)が元々持っている見た目の指定と、私が追加した指定がケンカして、テーマ側が勝ってしまっているのでは? って言ってきた。
推察と同時にAIは「だと思うので、もっと強いCSSを用意しました」と新しいのを書いてくれた。
貼る。
……変わらない。
さらに強いのを出してくれる。
貼る。
…………変わらない。
セレクタ、つまりそのルール変更をHTMLのどこに効かせるかをあれこれ変えたものが何度も何度も出てきては、ことごとく効きませんでした。
第二容疑者：キャッシュ
次に疑ったのが、キャッシュでした。
キャッシュというのは、表示を速くするために「前に作った表示結果を保存して使い回す」仕組みです。スマホの容量がカツカツでキャッシュを消して凌いだみたいな経験ある人も少なくないんじゃないですかね?
で、このキャッシュが悪さをして、古い見た目が残り続けているのではというのが推察。
試しにブラウザを強制的に再読み込みしたり、CSSを全部消してみたりをやっても依然画面は更新されないまま。
この辺でAIも、かなり迷走していました。どれも決定打にならないCSSを貼っては消し、貼っては消し、を繰り返す時間が続きます。
ちなみにこのとき、
みたいな感じで、常に自信ある感なAIの様子は「AIは自信満々に間違える」のテンプレート的リアクションで、一周回って面白かったです。(今回の件では、そもそも自分では答えが一切わからない問題だったのでイラつくとかは無かったですが)
検証ツールと「赤テスト」をやったら流れ変わったな
アレコレやって、AIがブラウザの「検証ツール」を提案しました。そこから暗礁に乗りあげていた状態から脱せそうな感じになっていきました。
検証ツールというのは、表示されているページが実際にどんなコードで、どのCSSが効いているのかを覗けるブラウザの標準機能……ってことらしい。右クリックして一番下にあるのを押したらあなたもすぐ見れますよ。
プログラミング言語わかる人なら読めるんでしょうけど、私としては
「なんか 文字と数字 いっぱい」
と子供めいた感想でしたね。
本題に戻って、AIに言われるまま見出しの部分を検証ツールで調べてみました。
すると、私が貼ったCSSは、ちゃんとそこに存在していました。でも、ほとんどの指定に取り消し線が引かれていました。こういうのです
つまり「書いてはいるけど、無効化されている」状態だったのです。カードゲームとかでよくあるやつですね。
そこでAIが提案したのが、通称「赤テスト」でした。
ごくシンプルなCSSを一つだけ書いて、見出しの背景が赤くなるかどうかを見る、という切り分けです。効けば「セレクタは正しい」、効かなければ「もっと根本的な問題」と分かる。
赤テストの結果、赤くはならなかった。
これはAI的に大きな手がかりとのことでした。こんな単純な指定すら効かないなら、問題は詳細度なんかじゃない。もっと手前で、何かがおかしい。って推理をしていました。こっちはもうだいぶ置いていかれたワトソン状態だよ。
最後の確認として、検証ツール上でその見出しに直接「背景を赤に」と打ち込む、という方法を指示される。CSSファイルを一切通さず、その要素にダイレクトにスタイルを当てるやり方とのこと。
それを打ち込んでみると、やーーーっと赤くなりました。
ここで、ようやく全部がつながりました。
・要素そのものは操作できる
・直接なら赤くなる
・なのにCSSファイル経由だと効かない
これが意味するのは一つ。AIに書いてもらっていたCSSが、実サイトに正しく届いていない。すなわち反映が止まっている状態。
真犯人は、レンタルサーバー側のキャッシュでした。
サーバーが、最適化のために古いCSSを保持し続けていて、私が何度更新しても、訪問者に配信されるのは古いまま。編集画面だけが最新を見ていたので、「編集画面では変わるのに実サイトが変わらない」現象が起きていたのです。
キャッシュが切れたタイミングでCSSを貼り直したら、あっさり楕円バッジが表示されました。何やってもぜーんぜん変わらなかったのがアッサリ。
この一件で学んだこと
長い戦いでしたが、振り返ると、「任せるなら最後まで任せるって意外と大事だな」って。
正しいCSSを貼っていたのに、キャッシュのせいで「効いていない」ように見えていただけという色々徒労をしていた感じ。そして私は、その「効いていないように見える」を真に受けて、実は最初から正しく出してもらっていたCSSを何度も消してしまっていた。
AIを使っていると、つい「AIの答えが間違っているのでは?」と疑いたくなります。でも今回の犯人は、AIでも私でもなく、その外側にある環境でした。AIの出力が正しくても、それが結果に反映されるまでの間に、別の要因が挟まっていることがある。
まぁ、何が言いたいかというと、AIの答えが効かないように見えても、信じて最後まで付き合ってあげると正解に辿り着けるよってことです。
特に、今回だとHTMLだのCSSだのという話なワケですが、私は(今でも)その辺本当に疎いので、自分じゃ正解も不正解もわからんのですよ。
たとえるならそうですね。「折り紙」ですね。
完成形がわかってても、どう折っていったらその形になるのかはまるでわからない。なので折り方の誘導は全部AI頼み。
なんだか進まずに紙に折り目が付きまくっていっても、信じて折り続けたらなんとか完成形になった……みたいな。
ただ、先ほど「イラつきはしなかった」と書いたように、実際この全然進まない試行錯誤中って意外とストレスにはならなかったんですよね。
理由としては、おそらくAIが常に「では、次にこれを試してください」と即「次にできること」を出してくれたから、だと思っています。
「自分は次に何をやったら前に進むかもなの?」が明確になっているかどうかって、意外と重要なんですよ。やることがハッキリわかっててやる気になりづらいものなんて、勉強と仕事くらいです。
なので恐れず、AIとアレコレやってみるのも良いかと思います。
ちなみに、次から同じ目に遭わないための対処は単純です。CSSを変えて反映されないと感じたら、まずサーバーのキャッシュをクリアする。それだけで、今日の地獄はまるごと回避できます。
とまぁ、こういう学びを得るのに、半日近く溶かしたわけですが。こうして記事のネタになったので、良しとします。
コメント