使った技術構成
出発点にしたのは、microCMS が公式に配布している「Astro を使ったシンプルなブログ」テンプレートです。ただし、そのままAstroの静的生成の仕組みを使うのではなく、ページを表示するタイミングでPHPからmicroCMSのAPIを呼び出す方式に作り替えています。構成要素は次の3つです。
microCMS は記事のコンテンツを管理する日本製のヘッドレスCMSです。管理画面から記事のタイトルや本文、画像を登録すると、API経由でその内容を取得できるようになります。デザインとコンテンツが分離されているので、記事を書く作業とサイトの見た目を整える作業を独立して進められます。
PHP がページ表示のたびにmicroCMSのAPIへリクエストを送り、最新の記事データを取得して画面に表示します。Astroテンプレートのようにビルド時にHTMLを生成しておく方式ではなく、アクセスがあった瞬間に最新のコンテンツを取りに行く形です。管理画面で記事を更新すれば、ビルドし直さなくてもすぐにサイトへ反映されるのが特徴です。
GitHub にはソースコード一式を置いています。テンプレートを土台にコードを管理することで、変更履歴を追いながらデスクトップ上で開発を進められる環境になりました。
開発の進め方
コーディング作業は Claude を使って進めました。Astroテンプレートの構造を理解した上で、静的生成の部分をPHPでの動的取得に置き換える作業を中心に進めています。microCMSのAPI呼び出し部分の実装、テンプレート由来の不要な仕組みの整理、表示崩れの修正などを対話しながら進めていく形です。ゼロからすべてを書くのではなく、既存のテンプレートを参考にしつつ、必要な部分を作り替えていくアプローチを取りました。
GitHub上でソースを管理しているため、変更をコミットしながら進められ、何か問題があれば過去の状態に戻せる安心感もありました。
この構成のメリット
この構成にしたことで、以下のような利点が生まれました。
記事の更新は microCMS の管理画面から行うだけで、ページを開いた瞬間に最新の内容が表示されます。ビルドやデプロイの手順を挟まずに更新が反映されるので、記事を書いてすぐ公開したいときの手軽さがあります。
一方で、アクセスのたびにAPIへ問い合わせが発生するため、静的生成に比べると表示速度やAPI呼び出し回数の面では工夫の余地があります。今後、必要に応じてキャッシュの仕組みなどを足していく予定です。
おわりに
CMSと軽量なサーバーサイド処理を組み合わせ、AIとの対話を通じてコードを書いていく、という今の時代らしい作り方でサイトをリニューアルしました。今後もこの環境を使って、技術的な話題を中心に発信していきたいと思います。