Claude Desktopを使ったアプリ開発挑戦

はじめに

最近、GitHub CopilotをはじめとしたAIによるコード開発支援が話題となっています。
毎日のように多種多様なAIツールの話題が出てくるため、何かを使ってみたいけれどどれを選んだらいいかのかもわからない…なんてこともあるでしょう。
そこで今回はClaude Desktopに手伝ってもらいながらアプリ開発に挑戦してみることにしました。

Claude Desktopを選んだのは、
・Claude 3.7 Sonnetの評判が良い
・アカウント登録をすればフリープランで利用できる
といった、手軽に人気のモデルを利用できるところが大きな理由となります。

やってみる

環境

Claude Desktop（フリープランで使用）

モデル：Claude 3.7 Sonnet

事前準備：MCPによるローカルファイルへのアクセス設定

作業に入る前にMCPの設定を行います。
今回利用するのは、Filesystem MCP Serverというローカルファイルへのアクセスを可能にするMCPです。

MCPサーバーのインストールは以下のコマンドで行うことができます。

npm install -g @modelcontextprotocol/server-filesystem

※Node.jsがインストールされていない場合、事前にインストールが必要です。

次にClaude Desktopを開き、Settings > DeveloperのEdit Configからclaude_desktop_config.jsonの編集を行います。

"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"C:\\Users\\{ユーザー名}\\Documents" ← アクセスを許可したいフォルダパスを設定する
]
}
}

要件定義

まずはアプリの要件定義の作成から開始します。
作りたいアプリのイメージをかき集めて、Claudeに丸投げします。

スケジュール調整botを作成するための要件定義を作成してください。情報が不足している場合、詳細を私に質問してください。
#　概要
＊Outlookカレンダーの空き時間を取得して会議予定を作成できるTeamsチャットボットを作成する。
＊ユーザーは「○○さんと××さんとで1h程度の会議を行いたい」というように自然言語でボットに話しかける。
＊ボットは全員分の空き時間を照合して会議に適した日時をユーザーに返答する。
#　開発環境
＊.NET8での開発を想定している。
＊Visual Studio Codeを利用する。
#　その他要件
＊会社のMicrosoftアカウントを使用する。
＊コストをできるだけ抑えて開発したい。

ここで重要なのが、「情報が不足している場合、詳細を私に質問してください。」と付け加えることです。
これがないと、Claudeが気を利かせて情報不足の部分を勝手に補完してしまいます。
そうすると思ってたのとは違う方法に突き進んでしまうこともあるため、一旦ユーザー側に確認を入れさせるのは重要です。

さて、このようなざっくりとしたイメージでお願いすると、Claudeから質問が返ってきます。

スケジュール調整botの要件定義を作成するために、まず必要な情報を整理していきたいと思います。いくつか詳細を確認させてください。

質問事項

このボットは何人のユーザーに対応する予定ですか？（少人数のチームや、大規模な組織全体など）
ボットが提案する会議日時の優先順位はありますか？（例：朝の時間を優先、ランチタイムをさけるなど）
ユーザー認証はどのように行いますか？（Microsoft Graphの認証方法）
会議の予約を確定した後、自動的に会議招待を送信する機能は必要ですか？
会議室の予約も同時に行う必要がありますか？
特定の時間帯（営業時間外など）を除外する設定は必要ですか？
このボットの使用権原は組織内の全員に与えますか、それとも特定のユーザーのみですか？
多言語対応は必要ですか？（日本語のみ、英語も対応など）
このボットのデプロイ先はどこを予定していますか？（Azure Bot Service、Teams用のカスタムアプリなど）

これらの質問に回答いただけると、より詳細な要件定義書を作成できます。

このように、情報が足りていない部分をClaudeから聞いてくれるため、それに返答していくと要件定義書を作成してくれます。

ありがとうございます。いただいた情報を基に、より詳細な要件定義を作成します。
#　スケジュール調整bot　要件定義書
##　１.　プロジェクト概要
###　１.１　目的
- Outlookカレンダーの空き時間を取得し、複数の参加者間で会議予定を調整するTeamsチャットボットを開発する
- 自然言語での入力に対応し、AIで解析して適切な日時を提案する
###　１.2 　対象ユーザー
- 主に1名ユーザーが操作する
- 対象ユーザーが他の参加者との会議を調整する目的で使用
##　２.　機能要件
###　２.1　基本機能
- 自然言語でのユーザー入力解析
- Outlookカレンダーから空き時間取得
- 複数参加者の空き時間の照合
- 会議に適した日時を提案
###　２.２　ユアユースケース
1. ユーザーがボットに「AさんとBさんとで1時間程度の会議を行いたい」と入力
2. ボットが参加者を識別し、各参加者のOutlookカレンダーを確認
3. 全員が参加可能な時間帯を特定
4. ボットが適切な日時を提案
5. ユーザーが提案を確認して決定
###　２.３　入力制約と解析
- 自然言語での入力を許可
- 以下の情報を抽出できること：
　- 参加者（氏名）
　- 会議時間（長さ）
　- 日時の希望（「夕方がいい」など）
　- その他の条件（「来週中に」など）
###　２.４　時間帯の制約
- デフォルトの会議可能時間帯：9:00-18:00
- デフォルトで避ける時間帯：12:00-13:00（ランチタイム）
- ユーザーからの希望時間帯は優先的に考慮
###　２.５　将来的な拡張機能（開発フェーズ２）
- 会議招待の自動送信機能
- 会議室の予約機能
- 複数ユーザーによる利用
##　３.　技術要件
###　３.１　開発環境
- .NET 8
- Visual Studio Code
- Azure Bot Framework SDK
###　３.２　使用技術
- Microsoft Graph API（カレンダー情報取得用）
- Azure OpenAI Service（自然言語処理用）
- Bot Framework SDK（ボット開発用）
- Azure Bot Service（デプロイ先）
###　３.３　認証
- Microsoft ID プラットフォーム（OAuth 2.0）を使用
- 委任されたアクセス許可（Delegated permissions）でGraph APIにアクセス
- 必要な権限スコープ：
　- Calendars.Read（カレンダー読み取り）
　- Calendars.ReadWrite（将来的な会議作成機能用）
###　３.４　データ保存先
- ユーザー設定や環境設定はAzure Key Vaultに保存
- 一時的なセッションデータはメモリ内に保持
##　４.　非機能要件
……
##　５.　システム構成
……
##　６.　開発・運用計画
……
詳細な要件定義書を作成しました。いくつかの重要なポイントについて補足します：
##　認証方法について
Microsoft Graph APIにアクセスするための認証方法としては、OAuth 2.0を使用したMicrosoft ID プラットフォームが最適です。個人ユーザー用のボットであれば、委任されたアクセス許可（Delegated permissions）を使用することで、ユーザーの同意を得た上でカレンダー情報にアクセスできます。
##　技術スタックの選定理由
- Azure OpenAI Service：自然言語処理の精度を高めるために使用します。コストを抑えたい場合は、Azure AIの言語理解サービスの基本プランも検討できます。
- Bot Framework SDK：Microsoft Teams向けのボット開発に最適なフレームワークです。
- .NET 8：長期サポート版であり、Microsoft Graph APIとの親和性が高いです。
##　コスト最適化について
- Azure Bot Serviceは従量課金制なので、使用量に応じた料金となります。
- Azure OpenAI Serviceも従量課金ですが、初期段階では低コストプランから始めることができます。
- 開発工数を削減するため、Microsoft提供のサンプルコードやテンプレートを活用することをお勧めします。
この要件定義書に基づいて開発を進めることで、効率的かつ機能的なスケジュール調整ボットが構築できると考えています。
何か追加や修正が必要な点はありますか？

立派な要件定義書と補足の説明が返ってきました。（長いので一部抜粋）
基本機能やユースケースといったところに、最初にざっくりと伝えた要件をきれいに整理してくれています。
また認証方法や技術スタックなど、こういうものを使ったらいいよと教えてくれるのは非常にありがたいですね。

ひとまずこの要件定義書で進めていこうと思います。
もし変更したい部分がある場合、修正点を伝えれば再生成してもらえます。
今回はこのまま進めるため、「これをマークダウンファイルとして保存してください」とお願いします。
write_fileの許可を求めるポップアップが出るので許可すればファイルがローカルに保存されます。

ドキュメント作成

要件定義書が完成しました。
ですが、開発を進めるためにはもう少し手順などを詰めていく必要があります。
そのため、詳細な実装計画を立ててもらいます。

要件定義書.mdを元に、プロジェクト概要を示したファイルと、開発手順を説明したファイル、それから各実装ごとの詳細手順のファイルを作成してください。

わかりました。まず、指定されたファイルの内容を確認します。
この情報を基に3つのファイルを作成します。
1. プロジェクト全体の概要を示すREADME.md
2. 開発手順を示すDEVELOPMENT.md
3. 各実装の詳細手順を示すIMPLEMENTATION_DETAILS.md
(各ファイルのwrite_file実行)
以上で、プロジェクトの3つの主要なドキュメントを作成しました。それぞれのファイルは以下の目的で作成されています：
README.md: プロジェクト全体の概要を示し、基本的な情報と目的を説明
DEVELOPMENT.md: 開発者向けのセットアップ、環境構築、デプロイメント手順を詳細に説明
IMPLEMENTATION_DETAILS.md: 技術的な実装の詳細、サービス、モデル、拡張性

このように、頼んだ通りにドキュメントを作成してくれます。
この中で重要なのが後ろ2つのドキュメントで、主にこれらを参照して続きの作業をしていくことになります。

開発環境構築

まずは先ほど作成してもらったDEVELOPMENT.mdを参考にしつつ、環境構築を行っていきます。
DEVELOPMENT.mdを開くと、このように手順が記載されています。

##　１.　開発環境のセットアップ
###　１.１　必要なツールのインストール
- Visual Studio Code をインストール
- .NET 8 SDK をインストール
- Bot Framework Emulator をインストール
- Azure CLI をインストール
- Git をインストール
###　１.２　VS Code 拡張機能のインストール
- C# Dev Kit
- Azure Tools
- Markdown All in One（ドキュメント作成用）
###　１.３　Microsoft Azureアカウントの準備
- Azure サブスクリプションの確認
- Azure OpenAI Serviceへのアクセス権限申請（必要な場合）
###　１.４　Microsoft 365開発者アカウントの準備
- Microsoft 365 開発者プログラムにサインアップ（既存アカウントがない場合）
- テスト用テナントの作成と設定
##　２.　プロジェクト初期化
###　２.１　プロジェクト作成
　```bash
# プロジェクトディレクトリを作成
mkdir ScheduleBot
cd ScheduleBot
# Bot Framework プロジェクトテンプレートをインストール
dotnet new -i Microsoft.Bot.Framework.CSharp.EchoBot
# 新しいボットプロジェクトを作成
dotnet new echobot
# 依存関係の復元
dotnet restore
```
……

必要なツールやプロジェクトの作成手順なども書いてあるのでそれに従いつつ進めます。
手順がわからなかったり設定が難しいものがあったときは、Claudeに「○○の部分を詳しく教えてください」とお願いすれば大体何とかなります。

ここでは特に難しいものはなく、スムーズにプロジェクト作成まで進みました。

コード実装

ここからがコード実装になります。
Claudeに「IMPLEMENTATION_DETAILS.mdを参照して、MeetingRequestモデルの実装をお願いします。」と依頼します。

実装詳細に従って、MeetingRequestモデルを実装しましょう。
(write_fileの詳細)
次に、ScheduleItemモデルも実装しましょう。
(write_fileの詳細)
これでMeetingRequestモデルとScheduleItemモデルの実装が完了しました。両方のモデルには、実装詳細ドキュメントに記載された基本的な情報に加え、実際のスケジュール調整に役立つ追加のプロパティを実装しました。
(以降、実装の詳細の説明)

勝手に追加のプロパティを実装したり他のモデルまで実装したり等だいぶ先走っている様子がありますが、迅速に実装が行われました。
これらのファイルも、先に作ったプロジェクトの中にcsファイルとして保存されています。
もし指示した以外の作業をしてほしくない場合は、「○○の実装をお願いします。終わったら次の作業に移らず、確認をお願いします。」といったように、明確にSTOPをかけておいた方がいいかもしれません。

続けて自然言語処理やカレンダー情報取得のモジュールの実装を行ってもらい、ボットクラスの作成やダイアログの実装も進めていきます。
大体は「○○の実装をお願いします。」だけで進めることができますが、チャットの切り替えなどを行ってコンテキストがリセットされてしまった場合は再度実装詳細のドキュメントを参照してもらうなどが必要になります。

エラー修正

一通りのコード実装が終わった段階で、実装してもらったコードを確認するとコンパイルエラーが発生していました。
そのため、エラー修正をClaudeに頼みます。

BotFunction.csで○○のメソッドを呼び出す際に○○というエラーが発生しています。どのように修正すればいいでしょうか。
(以下にエラーメッセージの貼り付け)

わかりました。BotFunction.csを確認します。
(read_file)
エラーの原因が分かりました。50行目でProcessAsyncメソッドを呼び出していますが、第一引数にreq.Bodyを渡しています。しかしエラーメッセージによると、ProcessAsyncメソッドはHttpRequest型の引数を期待していますが、req.BodyはStream型です。
(以下エラーの説明)
以下に修正案を示します：
(修正済みBotFunction.csのコードブロック)
主な修正ポイントは以下の通りです：
1.上記のコードでは、StreamベースのProcessAsyncメソッドを使用するよう調整しました。
2.req.Bodyを読み取った後、ストリームの位置を0にリセットする処理を追加しました。これにより、ストリームを複数回読み取れるようになります。
これで、System.IO.StreamからMicrosoft.AspNetCore.Http.HttpRequestへの変換エラーが解消されるはずです。

これで解消されたかと思われましたが、変更を適用してもコンパイルエラーは残ったままでした。
何度か手を変え品を変え修正できないか頼んでみたものの解決には至らず、結局エラーを解消することができませんでした。
根本の原因をこちらで理解したうえで修正をお願いできればよかったのかもしれませんが、理解が浅い分野をAIに任せるとこういうことも起こりうるんだなという手痛い経験になりました。

課題点

ドキュメント開発の利点と欠点

ドキュメントを軸に開発を進める方法が便利ですが、きちんと使いこなさないと逆に開発の妨げになることもあります。

実装作業当初は「ドキュメントを読んで、○○の実装を行ってください」といった指示でスムーズに作業が進んでいました。
しかし実装が進んでファイル数が増えてくると、一つの実装に対して実装範囲に関連するファイルを全部読み込もうとしてはトークンの上限に引っかかるのかエラーを発して応答が止まる、という挙動を繰り返してしまうようになりました。
そういった場合「ドキュメントのこの部分を読んでこういう実装をしてください。ここまでの実装は済んでます。」といった風に指示の内容を詳しく行うことで突破はできますが、思っていたやり方とは違うなという感覚が否めません。

このような過剰な読み込みを解決するための策としては、以下のようなものが考えられます。

対策１.作業工程の詳細化、細分化

これはとにかく事前にAIが作業をしやすい環境を整えようというアプローチになります。
例えば、クラスの構造やメソッドなど、実装に必要な情報をすべて書き出したドキュメントを作成しておく方法です。
実装の際にそのドキュメントのみを参照してもらうようにすれば、ファイル読み込み作業がかさむのを防げるのではないでしょうか。
また、ドキュメントを各実装ステップごとに必要な情報だけが載っている程度に分割するのも、読み込み作業量を減らすのに役立つはずです。

この方法は、ドキュメント作成段階から意識して準備が必要ですが、その分実装作業をスムーズに進めることが期待できます。

対策２.タスク進捗の可視化

こちらは作業進捗を可視化して引継ぎをスムーズにしようというアプローチです。
例えば、タスクリストをチェックボックスで作成し、作業完了時にチェックをつけてもらうことで作業の完了状況と次のタスクを明確にすることができます。また、実装作業時に実装した内容と次に行うべきタスクをまとめた作業報告書を書いてもらうことで、作業再開時に状況を把握しやすくなることが期待できます。

これは、会話が上限に達して新しいチャットに切り替える必要があるときでも、コンテキストを引き継ぐのに役立つはずです。
ただ、作業ごとにファイルの読み書きを追加で行うことになるので、その文トークンを消費することを意識する必要があるかもしれません。

AIによるコーディングの限界

もうひとつの課題は、生成したコードにコンパイルエラーが発生することがままあるということです。
コード修正をお願いしても、なかなか的確に修正ができないことと、エラーの種類によってはまた過剰にファイルを読み込んで応答が止まってしまうので、こちら側でできるだけエラーの原因を把握したうえで詳細な修正指示を出す必要があります。

ただ、人間側で把握できる程度のエラーでしたら問題ないのですが、エラーの詳細が理解できないとかなりドツボに嵌まってしまいます。
対応としては、エラーコードやエラーメッセージを元にエラーの詳細を説明してもらうことで修正案を出しやすくしたり、場合によってはClineやCursorといったコーディングに強い他のAIエージェントを利用することも視野に入れてもいいかもしれません。

おわりに

Claude Desktopを開発のお供として使ってみて、最近のAIの進化を実感できました。特に要件定義やドキュメント作成における力は、うまく扱うことができれば開発作業のスピードアップにも繋がりそうです。
一方で、コーディング部分においては基本的なコード実装は上手いことできていますが、複雑な実装ともなるともう一工夫が必要になって来そうです。Claude Desktopだけでなく他のAIツールも、それぞれの特性を把握して上手に使いこなしていきたいですね。

最新記事

カテゴリー一覧

著者一覧