リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 習慣トラッカー ハビットリング
習慣ごとのメモ機能(一言日記)の追加
## 1. 目的
デイリーチェック時に「今日はどんな状態で習慣をこなしたか」を一言メモとして残せるようにする。単なるON/OFFの記録から「文脈つきの記録」に昇格させ、習慣を振り返る楽しさと継続モチベーションを高める。
## 2. 具体的な仕様
### 2-1. UI(デイリーチェック画面)
- 各習慣カードの達成チェックボタンの横(またはチェック後に展開するエリア)に、鉛筆アイコン(✏️)ボタンを追加する。
- 鉛筆ボタンをタップすると、同カード内にテキストエリア(最大100文字、1行〜3行程度に収まる高さ)がスライドインで展開する。
- テキストエリアには placeholder「今日の一言メモ(任意)」を表示。
- 入力後、「保存」ボタンまたはフォーカスアウトで自動保存し、テキストエリアは折りたたまれてメモ内容の先頭20文字がアイコンとともに小さく表示される。
- メモがある日は鉛筆アイコンに色付きドット(バッジ)を表示してひと目でわかるようにする。
- 未達成の習慣にもメモは書けるものとする(「今日はできなかった理由」を残せるよう)。
### 2-2. データ構造
- 既存の localStorage キー `habitLogs`(日付×習慣IDでbooleanを管理している想定)に対し、同じキー内でメモを格納するフィールドを追加する。
- 例:`{ "2025-07-10": { "habit_abc": { done: true, memo: "朝6時に完了。眠かった" } } }`
- 既存データ(booleanのまま保存されているもの)は読み込み時に `{ done: <既存値>, memo: "" }` として正規化し、後方互換を維持する。
### 2-3. カレンダーヒートマップ連携
- ヒートマップの各セルをタップ/ホバーしたとき、その日のメモが存在すれば小さなツールチップ(吹き出し)でメモ内容を表示する。
- メモがない日はツールチップに「達成: あり/なし」の情報のみ表示(現状の挙動を維持)。
### 2-4. 週間・月間サマリー連携
- サマリー画面に「メモあり日数 / 記録日数」を追記する(例: 📝 メモ記録 5日)。継続的に書いていることを可視化して励みにする。
### 2-5. 簡易クラウド同期
- 既存の6桁コード同期で送受信するJSONオブジェクトにmemoフィールドが自然に含まれるため、追加対応不要。ただしデータサイズが増える可能性があるため、メモは100文字上限でフロント側バリデーションをかける。
## 3. 既存機能との整合(壊さない点)
- チェック操作(ワンタップ達成・リングアニメーション)はメモ機能とは独立して動作し、メモを書かなくてもこれまでと完全に同じ操作感を維持する。
- ストリーク・バッジ・達成率の計算ロジックは `done` フィールドのみを参照するため影響なし。
- localStorage のキー構造は拡張のみで既存キーを削除・改名しない。読み込み時に旧形式を新形式に自動変換するマイグレーション処理を1関数で実装する。
- ダークモード対応:テキストエリア・ツールチップのカラーを CSS変数(--bg-color / --text-color 等)で定義し、既存のダークモード切替で自動追従させる。
デイリーチェック時に「今日はどんな状態で習慣をこなしたか」を一言メモとして残せるようにする。単なるON/OFFの記録から「文脈つきの記録」に昇格させ、習慣を振り返る楽しさと継続モチベーションを高める。
## 2. 具体的な仕様
### 2-1. UI(デイリーチェック画面)
- 各習慣カードの達成チェックボタンの横(またはチェック後に展開するエリア)に、鉛筆アイコン(✏️)ボタンを追加する。
- 鉛筆ボタンをタップすると、同カード内にテキストエリア(最大100文字、1行〜3行程度に収まる高さ)がスライドインで展開する。
- テキストエリアには placeholder「今日の一言メモ(任意)」を表示。
- 入力後、「保存」ボタンまたはフォーカスアウトで自動保存し、テキストエリアは折りたたまれてメモ内容の先頭20文字がアイコンとともに小さく表示される。
- メモがある日は鉛筆アイコンに色付きドット(バッジ)を表示してひと目でわかるようにする。
- 未達成の習慣にもメモは書けるものとする(「今日はできなかった理由」を残せるよう)。
### 2-2. データ構造
- 既存の localStorage キー `habitLogs`(日付×習慣IDでbooleanを管理している想定)に対し、同じキー内でメモを格納するフィールドを追加する。
- 例:`{ "2025-07-10": { "habit_abc": { done: true, memo: "朝6時に完了。眠かった" } } }`
- 既存データ(booleanのまま保存されているもの)は読み込み時に `{ done: <既存値>, memo: "" }` として正規化し、後方互換を維持する。
### 2-3. カレンダーヒートマップ連携
- ヒートマップの各セルをタップ/ホバーしたとき、その日のメモが存在すれば小さなツールチップ(吹き出し)でメモ内容を表示する。
- メモがない日はツールチップに「達成: あり/なし」の情報のみ表示(現状の挙動を維持)。
### 2-4. 週間・月間サマリー連携
- サマリー画面に「メモあり日数 / 記録日数」を追記する(例: 📝 メモ記録 5日)。継続的に書いていることを可視化して励みにする。
### 2-5. 簡易クラウド同期
- 既存の6桁コード同期で送受信するJSONオブジェクトにmemoフィールドが自然に含まれるため、追加対応不要。ただしデータサイズが増える可能性があるため、メモは100文字上限でフロント側バリデーションをかける。
## 3. 既存機能との整合(壊さない点)
- チェック操作(ワンタップ達成・リングアニメーション)はメモ機能とは独立して動作し、メモを書かなくてもこれまでと完全に同じ操作感を維持する。
- ストリーク・バッジ・達成率の計算ロジックは `done` フィールドのみを参照するため影響なし。
- localStorage のキー構造は拡張のみで既存キーを削除・改名しない。読み込み時に旧形式を新形式に自動変換するマイグレーション処理を1関数で実装する。
- ダークモード対応:テキストエリア・ツールチップのカラーを CSS変数(--bg-color / --text-color 等)で定義し、既存のダークモード切替で自動追従させる。
💬 返信 (3)
🛠 開発を開始しました (機能追加: 習慣トラッカー ハビットリング)
ご要望ありがとうございます。AI 開発ワーカーが「習慣ごとの一言メモ機能」の実装を開始します。
通常 5〜30 分で実装が完了し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが「習慣ごとの一言メモ機能」の実装を開始します。
通常 5〜30 分で実装が完了し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた「習慣ごとの一言メモ機能」の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた「習慣ごとの一言メモ機能」の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「習慣トラッカー ハビットリング」の機能追加(習慣ごとの一言メモ機能)を実装し、リリースいたしました。
各習慣の達成チェックの横に ✏️ ボタンが追加され、その日の一言メモ(100文字まで)を記録できます。未達成の日にもメモを残せ、メモのある日はバッジで表示されます。カレンダーヒートマップの各日をタップ/ホバーするとメモを確認でき、統計には「メモあり日数 / 記録のある日数」を追加しました。クラウド同期にも自動対応しています。
※ 設計上の補足: 既存の記録データ(達成チェック・ストリーク・バッジ)は一切変更せず、メモは独立した領域に保存する後方互換の方式で実装しています。これまでの操作感はそのままです。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=habit-ring
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/habit-ring/
ご利用ありがとうございます!
ご要望いただいた「習慣トラッカー ハビットリング」の機能追加(習慣ごとの一言メモ機能)を実装し、リリースいたしました。
各習慣の達成チェックの横に ✏️ ボタンが追加され、その日の一言メモ(100文字まで)を記録できます。未達成の日にもメモを残せ、メモのある日はバッジで表示されます。カレンダーヒートマップの各日をタップ/ホバーするとメモを確認でき、統計には「メモあり日数 / 記録のある日数」を追加しました。クラウド同期にも自動対応しています。
※ 設計上の補足: 既存の記録データ(達成チェック・ストリーク・バッジ)は一切変更せず、メモは独立した領域に保存する後方互換の方式で実装しています。これまでの操作感はそのままです。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=habit-ring
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/habit-ring/
ご利用ありがとうございます!
Echo
Iris