Zenn
Accenture Japan (有志)
✨

【Claude Codeチャレンジ日誌2】Claude Codeで記事執筆アプリ開発

shinya.hara
に公開
Claude
Claude Code
tech

【Claude Codeチャレンジ日誌2】Claude Codeで記事執筆アプリ開発

Claude Codeの基本的な使い方がわかったので、今度は実際にWebアプリを作ってみることにしました。今回のターゲットは、ZennそっくりなGennというMarkdown記法で記事を執筆できるアプリです。

🎯 今回作るもの

ざっくり設計は以下の通り：

  • サーバサイド: Django
  • DB: とりあえずSQLite
  • 認証: Googleのソーシャル認証でサクッとログイン

機能要件

最低限の記事執筆機能として以下を実装していきます。

1. ユーザー管理

  • Googleアカウントでのサインアップ/サインイン
  • プロフィール管理
  • ログアウト機能

2. 記事管理

  • 記事の作成（Markdownエディタ）
  • 記事の編集
  • 記事の削除
  • 下書き保存
  • 公開/非公開の切り替え
  • リアルタイムプレビュー

3. 記事一覧

  • 公開記事の一覧表示
  • ユーザー別記事一覧
  • 記事検索機能（タイトル、本文）
  • ページネーション

📸 まずはZennサイトを観察

Zennそっくりなクローンサイトを作りたいので、まずは本家Zennサイトの記事一覧と新規登録画面のスクリーンショットを撮って、imagesフォルダに保存しておきました。

Zennサイトのスクリーンショット

🤖 Claude Codeに設計書作成を依頼

準備ができたら、Claude Codeに以下のように指示を出してみました：

Zenn（記事投稿サイト）とそっくりなクローンサイトを作りたいです。
imagesフォルダに実際のZennサイトの画面があるのでそっくりなサイトにしたいです。
まずは、このWEBアプリを開発するために必要な設計書を設計書フォルダを作ってその配下に作ってください。

すると、Claude Codeがいろいろな設計書を自動で作ってくれました！

設計書フォルダ

例えば機能概要設計書はこんな感じです：

機能概要設計書

設計内容を1つ1つ確認して、修正したい点や足りない機能があれば、Claude Code上で指示を出して設計書を自動で修正してもらいました。

⚙️ Heroku環境の準備

今回はサーバをHerokuにデプロイする前提なので、Claude CodeがHerokuに自動デプロイできるように事前にHeroku CLIをインストールして初期設定を行いました。

Heroku CLIのインストール

Windows11上にインストールしたWSL上にHeroku CLIをインストールします：

npm install -g heroku
heroku --version

›   Warning: Our terms of service have changed: https://dashboard.heroku.com/terms-of-service
heroku/8.7.1 wsl-x64 node-v24.1.0

Herokuのアカウントを事前に登録しておき、CLIからログインします：

heroku login

Webブラウザが開くのでログインして認証すると、以下のように表示されます：

heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/...
Logging in... done
Logged in as <あなたのメールアドレス>

これで準備完了です！

🚀 Web開発を開始！

準備が整ったところで、以下の指示でClaude Codeに開発を始めてもらいました：

では設計書に従ってHerokuにWEBアプリを実装してください。

📱 完成したアプリを見てみよう

数十分後、デプロイが完了しました。一度ではうまくいかない部分もありましたが、デザインやGoogle認証部分などのエラー修正を繰り返し指示していくうちに、いい感じの記事投稿サイトができました。

TOP画面

TOP画面

Google認証でログイン

「ログイン」ボタンを押すとGoogleのソーシャル認証画面が表示されます。

Google認証画面

ログイン完了

ログイン後の画面

記事投稿機能

記事を投稿してみます。

記事投稿画面

記事公開

記事が無事公開されました！

公開された記事

記事管理画面

自分の記事は管理画面から編集・削除が可能です。

記事管理画面1

記事管理画面2

他人の記事は閲覧のみ

他のユーザーの記事は参照のみで、編集権限はありません。

他人の記事表示

以下のリンクから実際のサイトを見れて、Googleログオンして投稿もできます。（デプロイするとデータ消えちゃいますが）

製作中のサイト

🤔 今後の課題

なかなかいい感じのアプリができましたが、いくつか課題もあります。

最大の問題: データベースがSQLiteなので、デプロイするたびに記事データがリフレッシュされてしまいます。これはかなり致命的ですね...😅

今後の改善点:

  • PostgreSQLなどの永続化可能なDBへの移行
  • より高度なMarkdownエディタの実装
  • 記事へのいいね機能
  • コメント機能
  • タグ機能

この辺りも引き続きClaude Codeに依頼して、さらに機能改善を進めてみたいと思います。

Accenture Japan (有志)
Accenture Japan (有志)

アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。

Discussion