docata.jp のトップに制作ノートの最新記事を自動で表示した - 静的なサイトに［更新される欄］をプラス

この記事はトップの［最新記事］欄を作った記録です

2026年10月18日、コーポレートサイト［docata.jp］のトップに、制作ノート（notes.docata.jp）の最新記事6本を自動で表示する欄を足しました。場所はヒーローと［01 - Problems］の間です。

新しい記事を公開すると、わたしが何もしなくても、この欄の中身が入れ替わります。この記事では、どう作ったか、なぜその作りにしたか、つまずいたところを記録します。

先に結論です

• docata.jp は完全に静的なサイトです。そのままでは、制作ノートに記事を公開しても、トップは変わりません。
• そこで、notes 側に最新6本を返す小さな JSON（/latest.json）を用意しました。
• docata.jp は、ビルド時に1回取得して HTML に入れます。JavaScript が動かなくても、検索エンジンにも記事がみえます。
• さらに、画面を開いたときにブラウザがもう一度取得して、内容が変わっていれば入れ替えます。
• どちらの取得に失敗してもサイトは壊れません。

なぜ自動にしたのか

これまでのトップには、［制作ノート］の欄がありましたが、記事の一覧はコードの中に手で書いた配列でした。記事を公開するたびに、コードを直してデプロイし直す必要がありました。

しかも、その一覧にはまだ書いていない記事の予告も混ざっていて、実際の記事とずれていきます。更新を忘れると古い情報が残る作りでした。

制作ノートに記事を公開すればトップにも出る。この当たり前を人の手を介さずに実現したかったのです。

仕組み

3つの選択肢から選んだ

静的なサイトに更新される情報を載せる方法は、大きく3つあります。

1. ビルド時だけ取得する：HTML に入るので、検索エンジンにも見えます。ただ、記事を公開してもサイトを作り直す（デプロイする）までトップは変わりません。
2. ブラウザだけで取得する：公開した直後から変わります。ただ、JavaScript が動かないときや検索エンジンからは空の欄に見えます。
3. 両方を使う：ビルド時の内容を入れておき、開いたときに新しければ入れ替える。

3つめを選びました。弱点をお互いに補えるからです。

notes 側：最新6本を返す JSON

制作ノート（EmDash）に、/latest.json というページを足しました。公開済みの記事だけを、新しい順に6本、次の形で返します。

{
  "items": [
    {
      "title": "記事のタイトル",
      "url": "https://notes.docata.jp/posts/...",
      "publishedAt": "2026-10-18T11:55:13.792Z",
      "tag": "最初のタグの名前"
    }
  ]
}

別のドメイン（docata.jp）のブラウザから読むので、CORS を許可しています。返すのは、すでに公開されている情報だけです。負荷を抑えるため、5分間はキャッシュしてよいという指定も付けました。

docata.jp 側：ビルド時に入れて開いたときに入れ替える

• ビルド時：JSON を取得して、記事の行を HTML に書き出します。取得は8秒で打ち切ります。取得できなくてもビルドは止めず、欄を空のままにします。
• ブラウザで開いたとき：同じ JSON を取得し、いま表示している6本と比べます。同じなら何もしません。 違っていれば行を入れ替えます。

日付はどちらも日本時間で、制作ノートと同じ［2026.10.4］の形式にそろえました。

つまずいたところと直しかた

JavaScript で作った行にスタイルが当たらなかった

入れ替えた行だけ、日付とタイトルが横に並んでしまい、レイアウトが崩れました。

原因は Astro のスコープ付きスタイルです。Astro はページの中のスタイルを、そのページの要素にだけ効かせるために、要素に目印の属性を付けます。ところが、JavaScript があとから作った要素にはその目印がつきません。

そこで、行に関するスタイルは :global を使って、目印がなくても効くように書き直しました。

本番に出す前に本当の取得を試したい

取得先は本番の制作ノートです。出す前はまだ /latest.json が存在しません。

そこで、取得先を環境変数（NOTES_LATEST_URL）で切り替えられるようにしました。ローカルでは、手元で動かした制作ノートに向けて、ビルド時の取り込みもブラウザでの取得も試せます。環境変数がなければ本番のアドレスを使います。

確かめたこと

• ローカルでビルド時に記事の行が HTML に入ることを確かめました。
• ブラウザで古い行を置いたうえで取得し直して、新しい内容に入れ替わることを確かめました。同じ内容のときは触らないこともコードで確認しています。
• スマホ幅（390px）でも横にはみ出さず、日付の下にタイトルが並ぶことを確かめました。
• 型チェックとビルドは、エラーなく通りました。

注意したいところ

• 本番での長い目で見た動きはまだ確かめていません。 記事を増やしながら様子をみます。
• 公開してからトップに反映されるまではキャッシュの分だけ数分かかることがあります。
• 制作ノートが止まっているときは、ビルド時の取得もブラウザでの取得も失敗して、欄が空になります。欄の下には制作ノートへのリンクだけが残ります。
• 取得先のアドレスや返す項目（タイトル、アドレス、公開日、最初のタグ）を変えたときは、docata.jp 側のコードもいっしょに直す必要があります。
• 返すのは公開済みの記事の情報だけです。下書きや公開前の情報は出ません。

中小企業ではどう役立つか

会社のサイトにお知らせやブログがあっても、トップを手で直さないと新しい記事がみえないことがあります。記事を公開するだけでトップにも出るようにしておけば、更新の手間と更新忘れの両方が減ります。

ドカタ.jp ではサイトのお知らせやブログをトップに自動で表示するような小さな仕掛けのご相談もお受けしています。お気軽にお問い合わせください。

この記事は作業の記録をもとに Claude Code が EmDash の MCP サーバー経由で下書きを作成し、筆者が確認・編集して公開します。