はじめに
毎日ひとつ、AIアプリをつくる。
日替わりでテーマに沿って小さなアプリを開発します。Claudeで。
この記事は 
AI Code Challenge Advent Calender 2025 の 11 日目の記事です！
10日目の記事：円周率記憶ゲームアプリを作ってみた！
12日目の記事：AIにジョークを言ってもらうアプリを作ってみた！ 
AI アプリ
概要
やることがなくて暇だなーってことありませんか？
そんな時はAIにやることを決めてもらいましょう！ 
AI 実装
Claude Desktopでプロンプトを与えて実装してもらいます。
プロンプト：
やることルーレットアプリをつくって
AIがやることをリスト化
ルーレットでやることを決める
やることルーレットアプリを作成しました！
プロンプト：
今日のタスクについてAIが具体的な提案をしてくれる機能を追加して
完成しました！AIが具体的な提案をしてくれる機能を追加しました。
完成したアプリ
できました！
やることルーレットアプリ
のリンクからアプリを確認できます
使い方：
- AIタスク提案 - 「AIにタスクを提案してもらう」ボタンで、Claudeが日常生活で役立つ8つのタスクを自動生成します。
- 手動追加 - 自分でタスクを追加・削除することもできます。（最大12個）
- ルーレットを回して「今日のタスク」が決まると、「💡 AIに具体的な提案をもらう」ボタンが表示されます。
- ボタンを押すと、AIが選ばれたタスクについて以下の提案をしてくれます。
- 具体的な取り組み方やステップ
- 効率的に進めるコツ
- モチベーションを保つアドバイス
こんなイメージです。
「AIにタスクを提案してもらう」をクリック
「ルーレットを回す！」をクリック
「AIに具体的な提案をもらう」をクリック
最初から最後までAIにお任せしてやることを決められました！
プログラム解説
ポイントとなるプログラムを解説します。
async function generateAITasks() {
const resultText = document.getElementById('resultText');
const aiButton = document.querySelector('.btn-ai');
// ボタンを無効化して待機表示
aiButton.disabled = true;
aiButton.innerHTML = '✨ AIがタスクを考え中...<span class="loading"></span>';
resultText.innerHTML = 'AIがタスクを考え中...<span class="loading"></span>';
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [{
role: 'user',
content: '日常生活で役立つ、バラエティに富んだ「やること」を8個リストアップしてください。仕事、趣味、健康、家事、学習など、様々なカテゴリーから選んでください。各タスクは簡潔に（5-10文字程度）、箇条書きで出力してください。JSONフォーマットで、{"tasks": ["タスク1", "タスク2", ...]}の形式で返してください。JSON以外の文字は一切含めないでください。'
}]
})
});
const data = await response.json();
let responseText = data.content[0].text.trim();
// Remove markdown code blocks if present
responseText = responseText.replace(/```json\n?/g, '').replace(/```\n?/g, '').trim();
const parsedData = JSON.parse(responseText);
tasks = parsedData.tasks || [];
renderTasks();
drawRoulette();
resultText.textContent = 'タスクが追加されました！ルーレットを回してください';
} catch (error) {
console.error('Error:', error);
resultText.textContent = 'エラーが発生しました。もう一度お試しください。';
} finally {
// ボタンを再度有効化
aiButton.disabled = false;
aiButton.innerHTML = '✨ AIにタスクを提案してもらう';
}
}
...
async function getAISuggestion() {
if (!selectedTask) return;
const suggestionBox = document.getElementById('suggestionBox');
const suggestionButton = document.querySelector('.btn-suggestion');
// ボタンを無効化して待機表示
suggestionButton.disabled = true;
suggestionButton.innerHTML = '💡 AIが提案を考え中...<span class="loading"></span>';
suggestionBox.classList.remove('hidden');
suggestionBox.innerHTML = '提案を生成中...<span class="loading"></span>';
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1500,
messages: [{
role: 'user',
content: `「${selectedTask}」というタスクについて、具体的で実践的な提案をしてください。以下の点を含めてください：
1. このタスクに取り組む具体的な方法やステップ
2. 効率的に進めるためのコツやポイント
3. モチベーションを保つためのアドバイス
親しみやすく、実行しやすい形でアドバイスをお願いします。200文字程度で簡潔にまとめてください。`
}]
})
});
const data = await response.json();
const suggestion = data.content[0].text.trim();
suggestionBox.innerHTML = `<strong>💡 AIからの提案：</strong><br><br>${suggestion}`;
} catch (error) {
console.error('Error:', error);
suggestionBox.textContent = 'エラーが発生しました。もう一度お試しください。';
} finally {
// ボタンを再度有効化
suggestionButton.disabled = false;
suggestionButton.innerHTML = '💡 AIに具体的な提案をもらう';
}
}
- ClaudeのArtifacts上でAnthropicのAPIを実行します。
response = await fetch("https://api.anthropic.com/v1/messages" ...)
- 生成AIのモデルは「claude-sonnet-4」です。
model: "claude-sonnet-4-20250514"
- こちらがClaudeが生成したユーザプロンプトです。やることを生成する。
日常生活で役立つ、バラエティに富んだ「やること」を8個リストアップしてください。仕事、趣味、健康、家事、学習など、様々なカテゴリーから選んでください。各タスクは簡潔に（5-10文字程度）、箇条書きで出力してください。JSONフォーマットで、{"tasks": ["タスク1", "タスク2", ...]}の形式で返してください。JSON以外の文字は一切含めないでください。
- こちらがClaudeが生成したユーザプロンプトです。選択したやることの具体的な内容を提案する。
「${selectedTask}」というタスクについて、具体的で実践的な提案をしてください。以下の点を含めてください：
1. このタスクに取り組む具体的な方法やステップ
2. 効率的に進めるためのコツやポイント
3. モチベーションを保つためのアドバイス
親しみやすく、実行しやすい形でアドバイスをお願いします。200文字程度で簡潔にまとめてください。
おわりに
- AIをフルに使ってアプリを作ってみました！
やることの作成、やることの具体的な提案。 - やることなくて暇な時にお楽しみください！
AI で楽しいアプリ開発を！！
この記事は AI Code Challenge Advent Calender 2025 の 11 日目の記事です！