Day 25 - 12/25
無風の熱源 - Web原稿公開サイト
HTMLCSSJavaScriptVercelPostgreSQLNode.js
Claude

概要
作品について
「無風の熱源」は、限定公開したい原稿やコンテンツを、パスワードで安全に共有できるWebサイトです。
一人のサラリーマンが「何者でもない自分」から世界規模のビジネスを立ち上げるまでの実話を描いた原稿を、必要な人だけに届けるために制作しました。
主な機能
- 時限パスワード発行: 1日〜1年の有効期限付きパスワードを発行
- パスワード管理: 誰に渡したか名前をつけて管理、不要になったら削除
- アクセス履歴: いつ、どのパスワードでアクセスがあったか記録
- 快適な読書体験: ダークモード、フォントサイズ調整、音声読み上げ対応
- SNS共有対応: OGP画像・Twitter Cardで美しくシェア
こんな時に便利
- 執筆中の原稿を特定の人だけに見せたい
- 配布したパスワードを後から無効化したい
- 誰がいつ読んでくれたか知りたい
- スマホでも快適に読める読書環境を提供したい
リンク
制作時間
8時間
学んだこと・振り返り
作ってみて
原稿を「必要な人だけに届ける」というシンプルな課題から始まりましたが、実際に運用してみると「誰に渡したパスワードか分からなくなる」「もう読まなくていい人のアクセスを止めたい」といった現実的な課題が出てきました。
AIと一緒に作ることで、こうした課題を発見するたびにすぐ機能追加できるのが大きなメリット。従来なら「また開発者に依頼して...」となるところが、その場で解決できるスピード感は革命的です。
学んだこと
- Vercel Hobbyプランの制限: 12関数までという制限があり、API設計を工夫する必要がある
- 認証の落とし穴: 形式チェックだけでなくDB存在確認も重要
- OGP/faviconの重要性: サイト公開時には必須。SNSでの見え方が大きく変わる
メインAIツールの評価
Claude
⭐⭐⭐⭐⭐
良かった点
- データベース移行(Supabase→Railway PostgreSQL)を一気に進められた - バグの原因特定が的確で、パスワードの末尾スペース問題もすぐ解決 - 「削除したパスワードでも認証できてしまう」というセキュリティ問題も即座に修正 - favicon・OGP画像の自動生成スクリプトまで作ってくれた
改善してほしい点
- Vercelの12関数制限に何度か引っかかり、都度対応が必要だった - 画像生成では日本語フォントの関係でシンプルなデザインに限定された
総合コメント
Claude Code(Opus 4.5)を使った本格的なWeb開発でした。特に印象的だったのは、「削除したパスワードでまだ認証できる」という報告をしたら、すぐにDBチェックを追加する修正を提案してくれたこと。セキュリティの観点からも信頼できるパートナーでした。管理画面の機能追加(名前欄、削除ボタン)からSNS共有対策まで、一気通貫で対応してもらえて非常に効率的でした。
公開日: 2025/12/24