今日は自作サイトのシステム周りを大幅にアップデートしました。順調に進むかと思いきや、次から次へと課題が浮き彫りになり、非常に学びの多い1日となりました。
1. Astro 5.0とContent Layer APIの壁
まず直面したのは、Astroのバージョンアップに伴う仕様変更です。従来の config.ts ではなく、新しい src/content.config.ts への移行作業を行いました。
「物理ファイルはあるのにAstroが認識してくれない（取得件数0件）」という現象に悩まされましたが、新しい loader: glob 形式に書き換えることで、無事に用語データがシステムに読み込まれるようになりました。やはり公式の最新ドキュメントと構造の不一致を確認するのは大切ですね。
2. 消えた検索窓とPagefindの再設定
ページは表示されたものの、今度はPagefindによる検索窓が消えてしまいました。これはLayoutファイルでのライブラリ読み込み順序と、ビルド後のインデックス生成プロセスが噛み合っていなかったことが原因でした。
スクリプトに is:inline を付与し、ブラウザが直接JSを実行できるように調整したことで、無事に検索機能も復活しました。
3. 広告表示と「横スクロール」の戦い
一番苦戦したのは広告エリアです。忍者AdMaxや楽天モーションウィジットが「グレーアウト」したり「WARN:01」エラーを吐いたりと、なかなか機嫌が直りませんでした。
原因を探っていくと、CSSの display: flex が広告スクリプトのサイズ計算を邪魔していたことが判明。display: block への変更と、Astro特有のスクリプト最適化を回避する設定を行うことで、ようやくサイドバーに広告が戻ってきました。
また、同時に発生していた「謎の横スクロール（画面のハミ出し）」も、Gridレイアウトの計算式を見直し、min-width: 0 を活用することで、ピタッと画面内に収まるようになりました。
明日への課題
なんとか主要な機能は復旧しましたが、現在はページ上部と下部の広告エリアが少し広すぎて、間延びした印象になっています。
今日は時間切れとなってしまいましたが、明日はこの余白を美しく整え、より完成度の高いデザインに仕上げていきたいと思います。
一歩ずつですが、着実に自分のコードが形になっていく感覚は、やはり何物にも代えがたい達成感がありますね。明日も頑張ります！
コメント