Cloudflare の EmDash で、エレベーター型ブログを作ってみた

地下6階へ、ようこそ

このサイトは、下から上へスクロールしてのぼっていくブログです。
新しい記事ほど地上に近く、古い記事ほど深い階に眠っています。いまあなたがいるのは、いちばん深い地下6階です。

遊び用に取ったドメインで「なにか面白いものを載せたい」と考えていたところ、Cloudflare から新しい CMS「EmDash」が出ていたので、試しに作ってみることにしました。

EmDash ってなに？

EmDash は、Astro というフレームワークで動く CMS です。Cloudflare の上にそのまま載せられます。

• 記事のデータ：D1（Cloudflare のデータベース）
• 画像：R2（Cloudflare のストレージ）
• ログイン：パスキー（パスワードなし）

WordPress にたとえると、「テーマのファイル」は GitHub に置き、push すると自動で公開されます。「記事」は管理画面から直接データベースに書き込みます。テーマと記事の置き場所がはっきり分かれているのが特徴です。

エレベーターのしくみ

• 1フロア＝記事1本：最新の6本が B1〜B6 になり、1F がゴール（プロフィール）です。
• 最深階からスタート：ページを開くと、まず B6 に着きます。
• ドアが開く：フロアが画面に入ると、ステンレスのドアが左右に開きます。
• 深いほど暗い：地下は暗く、地上に近づくほど明るくなります。1F には光が差し込みます。
• 階数表示：右の操作盤にアンバー色の階数ランプがあります。
• ピタッと止まる：スクロールを止めると、各フロアに吸い付きます。
• 到着のチャイム：操作盤のスピーカーボタンをオンにすると、着くたびに「チン」と鳴ります。音のファイルは使わず、ブラウザの中で音を合成しています。

つまずいたところ

• GitHub のアカウント違い：別のアカウントでログインしたままだったため、プライベートリポジトリが「not found」になりました。GitHub CLI（gh）でアカウントを追加して解決しました。
• 日本語化で記事が消えかけた：Astro の言語設定を日本語にすると、EmDash が「日本語の記事だけ」を表示しようとして、既存の記事が出なくなります。今回は、表示の言語だけを日本語にする方法にしました。
• 環境変数：Cloudflare のダッシュボードで設定した変数は、デプロイのたびに設定ファイルの内容で上書きされます。設定ファイル（wrangler.jsonc）にも書いておくのが安全です。

Claude と一緒に作りました

今回は、AI の Claude と相談しながら作りました。役割分担はこんな感じです。

• わたし：「上にスクロールするエレベーター」というアイデア、見た目の確認、GitHub や Cloudflare の操作
• Claude：トップページのコード、色や動きの調整、エラーの原因探し

Claude は、ブラウザで動く確認用のモックを自分で作って、ドアの開閉や階数表示をテストしてくれました。ただ、スピーカーから本当に「チン」と鳴ったかは、Claude には聞こえません。最初に鳴らなかったときも、「鳴らない」と伝えたら原因を見つけて直してくれました。

アイデアと確認は人間、手を動かすのは AI。 この分担だと、遊びのサイトでも、思ったより短い時間で形になりました。人間は任せきりにしないでなるべく読む、聞き返す、をするのが良いです。

さあ、上へ

ここから上の階には、新しい記事が並んでいます。
スクロールして、地上をめざしてみてください。

「こんなサイトを作ってみたい」という方は、1F の About からお気軽にどうぞ。