記事ファイルにしてサイトに載せる｜下書きの Markdown を作り、人が公開する

コース6 API編 8 / 13・読む時間約8分・最終確認日 2026-10-26

いまは無料で公開中です

このレッスンの要点

Claude の答え（JSON）とプログラムの順位を合わせて、1週ぶん1つの記事のファイル（Markdown）にします
ファイルは draft: true（下書き）で作ります。人が読んで false にするまで、本番には出ません
数字はページの側で、計算した値をそのまま出します。文章の中には数字を書かせません

1週ぶん、1つのファイル

毎週の結果は、1週ぶんを1つの記事のファイル（Markdown）にします。いちばん上の --- ではさんだ部分（frontmatter）に、題名・週・順位・紹介文などを決まった形で入れます。

項目	どこから入れるか
title・week	プログラム（順位の JSON の、データの週から作る）
date	プログラム（ファイルを作った日）
rank・change	プログラム（レッスン6の順位の JSON）
intro・comment	Claude（レッスン7の紹介文の JSON）
draft	プログラムがいつも true で作る。false にするのは人

形を作るのはプログラム、文章の欄だけが Claude。毎週同じ形のファイルができます。

下書き（draft）で置いておく

自動で作ったファイルは、必ず draft: true にしておきます。サイトの作りを「draft のものは本番に出さない」にしておけば、ファイルがリポジトリに入っても、人が false にするまで本番には出ません。

には、draft を自動で隠すしくみは入っていません。公式は、ページを作るときに自分で draft のものを外す書き方を紹介しています。そこで依頼文に「本番のビルドでは出さない」と書いておきます。下書きを読むための確認用のページは、preview というのビルドでだけ下書きも出す作りにしておきます（使い方はレッスン9・10）。

1自動で draft: true のファイルができる

2確認用のプレビューで、人が読む

3よければ draft: false にして push → 本番に出る

この講座のサイト（AIのてならい帖）も、レッスンやニュースを同じ作りで出しています。

Cloudflare Pages を GitHub とつないでいれば、push するたびに自動で公開されます。本番のブランチ（main）以外に push したものは、そのブランチ専用のプレビューの URL になります。プレビューには、はじめから検索に出ないための目印（noindex）が付きます。

数字はページの側で出す

ランキングのページは、ファイルの rank と change をそのまま表示し、紹介文は comment から出します。文章の中に数字を書かせないので、Claude の文章がまちがっていても、順位はいつも正しいままです。

/ranking/（イラスト）

1位　↑2　子猫のごはんの選び方

はじめて子猫をむかえた人に…（comment）

2位　→　猫が夜に走り回るわけ

「1位」「↑2」はファイルの数字から、紹介文は Claude から。

2つのデータが合っているか確かめる

ファイルを作るときは、順位の JSON と紹介文の JSON の、記事の名前（slug）がそろっているかを確かめます。Claude がちがう記事の紹介文を書いていたら、ファイルは作らずに止めます。

そろっていれば

draft: true のファイルを作る

そろっていなければ

ファイルを作らずに止めて、理由を出す

このしくみも、Claude Code に「そろっていなければ止めて」と頼んで作ってもらいます。

よくある勘違い

「Claude にファイルまるごと書かせれば早い」わけではありません

frontmatter も本文も、全部 Claude に書かせる

項目の名前や日付が毎週少しずつずれて、サイトのビルドが止まることがあります

形はプログラムが作り、Claude は文章の欄だけ

決まった形（構造化出力）の答えを、プログラムがファイルの決まった場所に入れます

やってみよう

下の「1週ぶんの記事のファイルの例」を見て、どの項目がプログラムから、どの項目が Claude からくるかを確かめます
下の依頼文を Claude Code に送って、ファイルを作るプログラムを作ってもらいます
できたファイル（src/content/ranking/2026-w43.md）を開き、draft: true になっていることを確かめます
手元のプレビュー（npm run dev）でランキングのページを開いて、下書きの週が見えることを確かめます
npm run build のあとに npm run preview で開き、本番と同じ作りでは下書きの週が出ないことも確かめます

1週ぶんの記事のファイルの例（src/content/ranking/2026-w43.md）--- title: 猫の記事の週間ランキング（2026年10月19日の週） week: 2026-w43 date: 2026-10-26 draft: true intro: 今週も子猫の記事がよく読まれました。 items: - slug: kitten-food rank: 1 change: 2 comment: はじめて子猫をむかえた人に向けて、月齢ごとのごはんの量と選び方を表でまとめた記事です。迷ったときの目安になります。 - slug: night-zoomies rank: 2 change: 0 comment: 夜になると猫が走り回る「運動会」の理由を、やさしく説明しています。落ち着かせるための遊び方のコツもわかります。 ---

ファイルを作るプログラムを作ってもらう依頼文（Claude Code に）data/ranking/ のいちばん新しい JSON（順位）と、data/draft/ の同じ日付の JSON（Claude の紹介文）を合わせて、src/content/ranking/（順位の JSON の week）.md を作るプログラムを scripts/make-page.mjs として作って。形は「1週ぶんの記事のファイルの例」と同じにして、必ず draft: true で作って。week と題名の日付は順位の JSON の week と date から、date はファイルを作った日にして。rank と change は順位の JSON から、intro と comment は紹介文の JSON から入れて。2つの JSON で slug がそろっていなければ、ファイルを作らずに止めて。Astro の content collection にも ranking を足して、/ranking/ で一番新しい週を表示するページを作って。draft: true の週は、本番のビルドでは出さないで。出すのは npm run dev のときと、Cloudflare Pages の preview というブランチのビルド（環境変数 CF_PAGES_BRANCH が preview）のときだけにして

確認問題

Q1. 自動で作ったファイルを、まず下書きにしておく理由は？

Q2. 順位の数字は、どこから記事のファイルに入れる？

今日の練習

自分のサイトの記事のファイルを1つ開いて、frontmatter の項目を「プログラムが入れるもの」「人や Claude が書くもの」に分けてみましょう。

前のレッスン
7. Claude に文章を書かせる次のレッスン
9. 毎週自動で動かす