🌸 日報の木

日報を送るたびに桜の木が育つ、研究室向けリマインダーアプリ

月・水・金に日報メールを送る習慣をつけるためのWebアプリです。 送信するたびに桜の木が成長し、1年間（年度）で満開になります。 定期的なタスクを忘れやすい方はぜひ！！

---

機能

• 🌸 桜の木の成長 — 送信回数に応じて種→若木→満開と育つ
• 📅 季節連動の背景 — 春・夏・秋・冬で背景が自動で変わる
• 🔔 ブラウザ通知 — 月・水・金の18:00に「日報まだー？」と通知
• 📧 Outlook連携 — ボタン1つでOutlookの作成画面を開く
• 📊 カレンダー記録 — 今月の送信状況を一覧表示
• 🧪 テストモード — 送信を何度でも記録して木の成長を確認できる

---

フォルダ構成

nippo-tree/
├── index.html          # HTMLのみ（構造）
├── css/
│   └── style.css       # 全スタイル
└── js/
    ├── storage.js      # データの読み書き（localStorage）
    ├── utils.js        # 日付・年度計算などの純粋関数
    ├── tree.js         # 桜の木の描画ロジック
    ├── calendar.js     # カレンダー描画
    ├── notification.js # ブラウザ通知
    └── app.js          # UI更新・イベント・初期化

---

使い方

セットアップ

GitHub Pages で公開するだけで使えます。サーバー不要・インストール不要です。

1. このリポジトリを GitHub Pages で公開する
   • Settings → Pages → Branch: main / (root) → Save
2. 公開された URL にアクセス
   • https://<ユーザー名>.github.io/nippo-tree/
3. スマホのホーム画面に追加するとアプリのように使える

日々の使い方

1. 月・水・金の18:00に通知が届く
2. アプリを開いて「📧 Outlookで日報を送る」をタップ
3. 日報を送信したら「✅ 送った！記録する」をタップ
4. 桜の木が成長する 🌸

---

設定

右上の ⚙️ から設定できます。

項目	内容
目標送信回数	年度（4月〜翌3月）の月・水・金を自動計算
Outlookのメールアドレス	日報の宛先を設定すると自動入力される
テストモード	ONにすると何度でも記録でき、木の成長を確認できる
データリセット	全記録を削除する

---

データについて

送信記録はブラウザの localStorage に保存されます。

• GitHubのコードを更新しても記録は消えません
• 同じ端末・同じブラウザで使い続ける限り記録が残ります
• 別の端末・別のブラウザでは記録は共有されません

---

技術スタック

• HTML / CSS / JavaScript（フレームワーク不使用）
• Canvas API（木の描画）
• Web Notifications API（プッシュ通知）
• localStorage（データ保存）