📋 TaskBoard Pro - カンバン式タスク管理アプリ

🌟 概要

Trelloライクな直感的操作のカンバンボード式タスク管理アプリケーションです。ドラッグ&ドロップでタスクを管理し、チームや個人の生産性を向上させます。

✨ デモ

🔗 ライブデモはこちら

📸 スクリーンショット

クリックして表示

ライトモード

ダークモード

モバイル表示

🎯 主な機能

コア機能

• 📌 ドラッグ&ドロップ - 直感的なタスク移動
• 📊 3段階のステータス管理 - ToDo / 進行中 / 完了
• 🎨 優先度設定 - 高/中/低を色分け表示
• 📅 期限管理 - 期限切れタスクの自動検知
• 🏷️ タグ機能 - タスクの分類・整理
• 🔍 リアルタイム検索 - タイトル、説明、タグから検索

追加機能

• 🌙 ダークモード - 目に優しい暗色テーマ
• 💾 自動保存 - LocalStorageによるデータ永続化
• 📊 統計ダッシュボード - 進捗の可視化
• 📤 エクスポート機能 - JSONファイルでバックアップ
• 📱 レスポンシブデザイン - あらゆるデバイスに対応

🛠️ 使用技術

カテゴリ	技術	用途
構造	HTML5	セマンティックなマークアップ
スタイル	CSS3	モダンなデザイン、アニメーション
ロジック	Vanilla JavaScript	フレームワーク不使用の軽量実装
アイコン	Font Awesome 6	美しいアイコン表示
フォント	Google Fonts	読みやすい日本語フォント
ストレージ	LocalStorage API	データの永続化

💻 インストール & 使用方法

オンラインで使用

デモサイトにアクセスするだけですぐに使用開始できます：

https://se0831.github.io/task-management-app/

ローカルで実行

1. リポジトリをクローン

git clone https://github.com/SE0831/task-management-app.git
cd task-management-app

2. ブラウザで開く

# Macの場合
open index.html

# Windowsの場合
start index.html

# または任意のWebサーバーで実行
python -m http.server 8000

📖 使い方ガイド

タスクの追加

1. 「新規タスク」ボタンをクリック
2. タイトル、説明、優先度、期限、タグを入力
3. 「保存」をクリック

タスクの移動

• タスクカードをドラッグして別のカラムにドロップ
• または、タスクを編集してステータスを変更

タスクの検索

• 検索ボックスにキーワードを入力
• タイトル、説明、タグから検索可能

データのバックアップ

• ダウンロードアイコンをクリック
• JSONファイルとして保存

🎨 カスタマイズ

優先度の色を変更

/* styles内の以下の部分を編集 */
.task-card.priority-high {
    border-left-color: #your-color;
}

カラムの追加

// HTML内にカラムを追加
<div class="column" data-column="review">
    <div class="column-title">レビュー</div>
    <!-- ... -->
</div>

デフォルトテーマの変更

// 初期設定でダークモードを有効化
if (localStorage.getItem('darkMode') !== 'false') {
    toggleDarkMode();
}

📊 プロジェクト構成

task-management-app/
├── index.html          # アプリケーション本体
├── README.md           # このファイル
└── LICENSE            # MITライセンス

🚀 今後の改善予定

• 複数ボードの管理
• チーム共有機能
• ファイルアップロード
• コメント機能
• アクティビティログ
• カレンダービュー
• ガントチャート表示
• 通知機能
• PWA対応
• データベース連携

🤝 貢献

プルリクエストは大歓迎です！大きな変更の場合は、まずissueを開いて変更内容を議論してください。

1. フォーク (Fork)
2. フィーチャーブランチ作成 (git checkout -b feature/AmazingFeature)
3. コミット (git commit -m 'Add some AmazingFeature')
4. プッシュ (git push origin feature/AmazingFeature)
5. プルリクエスト作成

📝 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。

👨‍💻 作者

SE0831

• GitHub: @SE0831
• ポートフォリオ: その他のプロジェクト

🙏 謝辞

• Font Awesome - アイコンセット
• Google Fonts - Webフォント
• Trello - UIデザインのインスピレーション

💡 関連プロジェクト

他のポートフォリオ作品もご覧ください：

• 📊 売上分析ダッシュボード
• 📩 お問い合わせフォーム自動通知システム

⭐ サポート

このプロジェクトが役に立ったら、⭐スターをお願いします！

---

最終更新: 2024年8月