要点

datasette.io サイトの「news」セクションは、GitHub に保存された `news.yaml` ファイルから生成されており、`date` と Markdown の `body` コンテンツを含む YAML エントリを用いています。
記事では、YAML 形式は編集を確実に行うのが難しいため、公開前に書式の問題を検出できるようにすることで手間を減らすカスタムの「news preview」UI が作られたと説明しています。
プレビュー用ツールは Claude を用いて作成され（リポジトリのクローンやアーティファクト生成を含む）、YAML のレンダリングと、無効な `date` 形式のような YAML/Markdown のバリデーションエラーのハイライトの両方を行います。
手順の説明では、ワークフロー改善として「YAMLを貼り付けて編集し、レンダリングされたホームページの出力とエラー表示を直ちに確認できる」ことを強調しています。
目に見える例として、左右に並べた編集とプレビューが示され、ニュース項目の正確性を高めるためのバリデーションエラーバッジが表示されます。

Simon Willison’s Weblog

提供: Teleport — Teleport Beamsで数秒でインフラにエージェントを接続。組み込みのアイデンティティ。秘密情報ゼロ。早期アクセスを受け取る

2026年4月16日

ツール datasette.io news preview

datasette.io のサイトには、基盤となる GitHub リポジトリ内のこのnews.yaml ファイルから作られたニュースセクションがあります。YAML 形式は次のようになります:

- date: 2026-04-15
  body: |-
    [Datasette 1.0a27](https://docs.datasette.io/en/latest/changelog.html#a27-2026-04-15) は、CSRF 保護の仕組みを変更し、フォームおよび API 連携を単純化する形で実装するようになりました。さらに、SQL クエリによってテーブルが名前変更されたときの新しい `RenameTableEvent` が導入されています。
- date: 2026-03-18
  body: |-
    ...

この形式は編集が少し大変なので、ようやく Claude にカスタムのプレビュー UI を作らせることで、エラー確認のための手間が少し減るようにしました。

claude.ai と Claude Artifacts を使って作りました。Claude が GitHub リポジトリを複製して、通常のチャットの一部としてその内容を読み取れることを活用しています:

https://github.com/simonw/datasette.io をクローンし、news.yaml ファイルと、それがホームページでどのようにレンダリングされるかを見てください。私がその YAML を貼り付けると、どのように見えるかをプレビューし、Markdown エラーや YAML エラーを強調表示するようなアーティファクトを作ってください

datasette.io のニュースプレビューツールの、左右に並んだ2つの表示を示すスクリーンショット。左パネルには暗いテーマの YAML エディタがあり、ニュースエントリが Markdown 形式で date と body フィールドを含んで表示されています。左下には、date フィールドの形式が不正であることを示す赤いバリデーションエラーがあります。右パネルには、日付（2026年4月、2026年3月18日）ごとに見出しが整形されたレンダリング済みのプレビュー出力が表示され、リンクされたリリース名、インラインコードスニペット、変更履歴の説明を含む115件のニュースエントリが表示されています。左パネルのヘッダーには、バリデーションエラーが1件あることを示す赤いバッジ「1」が表示されます。