Claude Codeで有料記事アプリを作る方法

TL;DR

Claude Opus 4.6のClaude Codeに要件を音声で伝え、計画を確認してからNext.jsの実装を進め、TursoとStripeのMCPを接続すれば、有料記事販売アプリを構築できる。実演では初回実装に37分37秒、データベース作成に2分35秒かかり、記事の編集、下書き保存、プレビューまで動作を確認した。

Transcript

はい、どうもしです。今回はですね、 クロード4.6Oパスがついにリリースさ れましたということで、え、実際にね、 その4.6OPASを使って僕が作りたい ウェブサービスをちょっと作ってね、検証 してみたいと思います。4.5と比べて どのぐらい優れているのかっていうのをね 、見ていきます。ま、作っていく前にです ね、4.6パスどういうところが変わった のかっていうのをね、ちょっと公式で、え 、さらっと見てみたいと思います。で、 ここにも書いてある通り、Oパス4.6は ベータ版で100万トークンの コンテキストウィンドを備えています。と いうことで、これ素晴らしいアップデート でコンテキストウィンドウっていうのは要 はAIにとっての脳の記憶領域ですね。 それが今までは確か何万トークだったかな ?... Read More

Key Insights

• Claude Opus 4.6は、ベータ版で100万トークンのコンテキストウィンドウを備えると公式情報を参照しながら紹介され、長い開発履歴を保持しやすくなったと話者は評価している。
• 要件定義は、Claude Codeのプランモードで機能、課金方式、管理者権限、記事編集体験、サイト構造をまとめて伝え、生成された実装計画を人間が確認する流れである。
• 有料記事サービスの仕様は、無料記事と有料記事を切り替え、記事途中から有料範囲を設定し、単品買い切りと全記事対象の月額購読を提供する構成である。
• 実装の技術構成はNext.jsを中心とし、データベースにTurso、課金にStripe、データアクセスにDrizzle ORMを採用する形でClaude Codeがコードを生成した。
• MCP接続は、Tursoでデータベースやスキーマを作り、Stripeで商品や購読設定を扱うために使われ、GUI操作を減らしてCLI中心で作業する仕組みである。
• 初回の一通りの実装は37分37秒で完了し、その後のTursoデータベースとテーブルの作成は2分35秒で完了したと、画面上の結果を交えて報告されている。
• 管理画面は、環境変数で設定したパスワードによるログイン、Markdown記事の作成、価格とタグの指定、下書き保存、保存内容の再読み込みに対応した。
• 生成コードはNext.jsのサーバーコンポーネントでデータを取得していた一方、インデックスやN+1問題、セキュリティは追加確認が必要だと話者は注意している。
• 🎬 このチャンネルの他の動画:
  • Notionで高速ブログを作る方法とは？
  • Claude Coworkで業務を効率化する方法
  • CursorでWebアプリをバイブ開発する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Claude Codeで有料記事アプリを作る方法は？

Claude Codeをプランモードに切り替え、無料記事と有料記事、記事単体の買い切り、月額購読、管理者専用の投稿画面などの要件を伝える。生成された計画をレビューしてからNext.jsで実装させ、TursoとStripeのMCPを接続してデータベースと課金機能を整え、ローカル環境で保存や表示を確認する。

Q: 有料記事アプリの要件はどのように伝えればよいですか？

利用者、販売方式、記事の公開範囲、編集方法、管理機能を具体的に伝える。実演では、管理者本人だけがMarkdownで投稿できること、記事途中から有料にできること、単品購入と月額購読を用意すること、講座も宣伝できるサイト構造にすることまで音声入力で指定した。

Q: Claude Codeのプランモードはいつ使うのですか？

プランモードは、実装を始める前に要件と仕様を整理するときに使う。実演ではシフトキーとタブキーで切り替え、Claude Codeがフェーズ単位のタスク計画を作成した。その計画を確認し、SupabaseではなくTursoを使うよう誤りを修正してから開発へ進んだ。

Q: TursoのMCPで何を自動化できますか？

TursoのMCPでは、アプリ用データベースの作成、必要なデータスキーマとテーブルの生成をClaude Codeから指示できる。実演ではMCP接続後にデータベースとテーブルを作らせ、2分35秒後にTursoの管理画面を開いて、テーブルが実際に作成されていることを確認した。

Q: StripeのMCPは有料記事アプリで何に使いますか？

StripeのMCPは、課金に必要な商品、クーポン、月額購読などをCLIから扱う用途で紹介されている。今回の実演はローカル環境でのテストであり、環境変数として価格IDやWebhook関連の設定も必要とされた。課金機能を公開する前の完全な動作検証までは示されていない。

Q: 生成された記事編集画面では何ができますか？

記事編集画面では、タイトルとMarkdown本文を入力し、有料記事への切り替え、価格、タグなどを設定できる。実演では価格を3980円に設定し、Claude Code入門の記事を貼り付けて下書き保存した。再読み込み後も内容が残り、Tursoのデータベースにも保存されていることを確認した。

Q: 作成した記事を公開前に確認する方法は？

編集画面にプレビューモードを追加し、読者から見える記事表示を公開前に確認する。最初に生成された管理画面には希望するプレビュー機能がなかったため、話者がClaude Codeへ追加を依頼した。その結果、編集画面からプレビューへ切り替えられるように修正された。

Q: AIが生成したWebアプリはそのまま公開できますか？

そのまま公開せず、コードとセキュリティを人間が確認する必要がある。話者もバイブコーディングにはまだ危険があり、レビューが必要だと述べている。特にデータベースのインデックス、N+1問題、認証、画像保存、課金設定などは追加で点検し、リリース前にセキュリティチェックを行う方針を示した。

Summary & Key Takeaways

• 最初にClaude Codeを起動し、モデルがClaude Opus 4.6、推論設定がハイエフォートであることを確認する。シフトキーとタブキーでプランモードへ切り替え、個人用の記事販売サービスとして、無料記事と有料記事、記事単体の買い切り、全記事を読める月額購読、講座紹介ページなどの要件を音声入力で伝える。生成された計画をレビューし、誤って選ばれたSupabaseをTursoへ修正してから実装を開始する。

• 技術構成にはNext.js、Turso、Stripeを採用し、管理者だけが記事を投稿できる認証には環境変数のパスワードを使う。記事編集画面にはMarkdown入力、画像挿入を想定したリッチなエディター、無料範囲と有料範囲の切り替え、価格とタグの設定、下書き保存を求めた。Claude Codeはタスクを分割して実装を進め、初回の一通りの生成には37分37秒を要したが、その間に話者自身はコードを書いていない。

• 初回実装後にTursoとStripeのMCPサーバーを設定し、Claude Codeから接続状態を確認する。Turso側ではアプリ用データベースとテーブルを生成させ、2分35秒後に管理画面で作成結果を確認した。ローカル環境ではトップページ、料金プラン、講座一覧、管理者ダッシュボード、記事作成、下書きの永続化が動作した。さらに不足していた読者表示の確認機能を指示し、編集画面からプレビューモードへ切り替えられるよう修正した。