カンバンボード

1. アプリ概要

TODO・進行中・レビュー・完了の4列でカードを管理するカンバンボード。右クリックメニューで列間を移動し、JSONで永続管理する。

起動すると既定で TODO・進行中・レビュー・完了の4列が並び、カードを右クリックして「← 前へ移動 / → 次へ移動」を選ぶと隣の列へ動きます。カードをマウスでつかんで運ぶ操作は実装していません（tkinter で実現するには座標計算を自前で書く必要があるため、まず確実に動くメニュー方式にしています）。列は「＋ 列を追加」で5列目以降も増やせるので、自分の作業フローに合わせた板を作れます。変更のたびに kanban.json へ自動保存されるので、閉じても続きから再開できます。

このアプリはutilカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★★ です。

このアプリは「ユーティリティ」カテゴリです。小回りの効くユーティリティは Python の真骨頂で、汎用的なユーザー操作を組み合わせる発想が他のアプリにもそのまま流用できます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

コピー＆実行で動作確認 → コード解説で構造理解 → カスタマイズで応用、の 3 ステップで進めると、短時間で本質を押さえられます。

アプリを完成させた後は、自分の使い方に合わせて改造するのが学びを定着させる近道です。カスタマイズ章のアイデアを足がかりに、独自機能を一つ追加してみてください。

2. 機能一覧

• 既定で TODO・進行中・レビュー・完了の4列を表示（DEFAULT_COLUMNS で定義）
• 「＋ 列を追加」で列を自由に増やせる
• カードの追加・編集・削除（タイトル・説明・タグ・期限・優先度）
• カードを右クリック →「← 前へ移動 / → 次へ移動」で隣の列へ移動
• 優先度（高・中・低）をカード左端の色帯で表示し、優先度で絞り込み可能
• タグは先頭3つまでバッジ表示、期限は「期限: YYYY-MM-DD」で表示
• 操作のたびに kanban.json へ自動保存し、次回起動時に復元
• 「↩ リセット」で確認ダイアログの上、既定の4列に戻す

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import tkinter as tk
from tkinter import ttk, messagebox, simpledialog
import json
import os
from datetime import datetime

SAVE_PATH = os.path.join(os.path.dirname(__file__), "kanban.json")

PRIORITIES = {"高": "#ef5350", "中": "#ffa726", "低": "#26a69a"}

DEFAULT_COLUMNS = ["TODO", "進行中", "レビュー", "完了"]


class KanbanCard:
    """カンバンカードウィジェット"""

    def __init__(self, parent, card_data, on_move, on_edit, on_delete):
        self._data     = card_data
        self._on_move  = on_move
        self._on_edit  = on_edit
        self._on_delete = on_delete

        prio_color = PRIORITIES.get(card_data.get("priority", "中"), "#ffa726")

        self.frame = tk.Frame(parent, bg="#21262d", bd=1, relief=tk.RAISED,
                               padx=6, pady=4, cursor="hand2")

        # 優先度インジケーター
        tk.Frame(self.frame, bg=prio_color, width=4).pack(
            side=tk.LEFT, fill=tk.Y)

        content = tk.Frame(self.frame, bg="#21262d")
        content.pack(side=tk.LEFT, fill=tk.BOTH, expand=True, padx=(4, 0))

        title_row = tk.Frame(content, bg="#21262d")
        title_row.pack(fill=tk.X)
        tk.Label(title_row, text=card_data["title"],
                 bg="#21262d", fg="#c9d1d9", font=("Arial", 9, "bold"),
                 anchor="w", wraplength=160).pack(side=tk.LEFT, fill=tk.X, expand=True)

        # コンテキストメニュー
        self.frame.bind("<Button-3>", self._popup)
        content.bind("<Button-3>", self._popup)

        # サブ情報
        desc = card_data.get("desc", "")
        if desc:
            tk.Label(content, text=desc[:50], bg="#21262d", fg="#8b949e",
                     font=("Arial", 7), anchor="w", wraplength=160).pack(
                fill=tk.X)

        # タグ
        tags = card_data.get("tags", "")
        if tags:
            tag_row = tk.Frame(content, bg="#21262d")
            tag_row.pack(fill=tk.X, pady=(2, 0))
            for t in tags.split(",")[:3]:
                t = t.strip()
                if t:
                    tk.Label(tag_row, text=t, bg="#1f6feb", fg="white",
                             font=("Arial", 7), padx=3, pady=1).pack(
                        side=tk.LEFT, padx=1)

        due = card_data.get("due", "")
        if due:
            tk.Label(content, text=f"期限: {due}", bg="#21262d",
                     fg="#8b949e", font=("Arial", 7)).pack(anchor="w")

    def _popup(self, event):
        m = tk.Menu(self.frame, tearoff=False, bg="#21262d", fg="#c9d1d9")
        m.add_command(label="✏ 編集",  command=self._on_edit)
        m.add_separator()
        m.add_command(label="← 前へ移動", command=lambda: self._on_move(-1))
        m.add_command(label="→ 次へ移動", command=lambda: self._on_move(1))
        m.add_separator()
        m.add_command(label="🗑 削除",  command=self._on_delete)
        m.post(event.x_root, event.y_root)


class App095:
    """カンバンボード"""

    def __init__(self, root):
        self.root = root
        self.root.title("カンバンボード")
        self.root.geometry("1100x680")
        self.root.configure(bg="#0d1117")
        self._columns  = []   # [{"name": ..., "cards": [...]}]
        self._card_widgets = {}   # {card_id: KanbanCard}
        self._next_id  = 1
        self._build_ui()
        self._load()

    def _build_ui(self):
        header = tk.Frame(self.root, bg="#161b22", pady=6)
        header.pack(fill=tk.X)
        tk.Label(header, text="📋 カンバンボード",
                 font=("Noto Sans JP", 12, "bold"),
                 bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        # ツールバー
        tb = tk.Frame(self.root, bg="#161b22", pady=4)
        tb.pack(fill=tk.X)
        ttk.Button(tb, text="＋ カードを追加",
                   command=self._add_card).pack(side=tk.LEFT, padx=4)
        ttk.Button(tb, text="＋ 列を追加",
                   command=self._add_column).pack(side=tk.LEFT, padx=2)
        ttk.Button(tb, text="💾 保存",
                   command=self._save).pack(side=tk.LEFT, padx=2)
        ttk.Button(tb, text="↩ リセット",
                   command=self._reset).pack(side=tk.LEFT, padx=2)

        # フィルター
        tk.Label(tb, text="優先度:", bg="#161b22", fg="#8b949e",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.filter_prio = tk.StringVar(value="ALL")
        ttk.Combobox(tb, textvariable=self.filter_prio,
                     values=["ALL", "高", "中", "低"],
                     state="readonly", width=6).pack(side=tk.LEFT)
        self.filter_prio.trace_add("write", lambda *_: self._render())

        # ボードエリア (スクロール可能)
        canvas = tk.Canvas(self.root, bg="#0d1117", highlightthickness=0)
        xsb = ttk.Scrollbar(self.root, orient=tk.HORIZONTAL,
                             command=canvas.xview)
        canvas.configure(xscrollcommand=xsb.set)
        xsb.pack(side=tk.BOTTOM, fill=tk.X)
        canvas.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        self.board_frame = tk.Frame(canvas, bg="#0d1117")
        self._canvas_win = canvas.create_window((0, 0), window=self.board_frame,
                                                  anchor="nw")
        self.board_frame.bind("<Configure>",
                               lambda e: canvas.configure(
                                   scrollregion=canvas.bbox("all")))
        self._canvas = canvas

        self.status_var = tk.StringVar(value="カードを追加してください")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#21262d", fg="#8b949e", font=("Arial", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

    def _render(self):
        # ボードをクリア
        for widget in self.board_frame.winfo_children():
            widget.destroy()
        self._card_widgets.clear()

        filter_prio = self.filter_prio.get()

        for col_idx, col in enumerate(self._columns):
            col_frame = tk.Frame(self.board_frame, bg="#161b22",
                                  width=210, padx=4, pady=4)
            col_frame.pack(side=tk.LEFT, fill=tk.Y, padx=4, pady=4)
            col_frame.pack_propagate(False)

            # 列ヘッダー
            hdr = tk.Frame(col_frame, bg="#21262d")
            hdr.pack(fill=tk.X, pady=(0, 4))
            tk.Label(hdr, text=col["name"],
                     bg="#21262d", fg="#c9d1d9",
                     font=("Arial", 10, "bold")).pack(side=tk.LEFT, padx=4)
            count = len(col["cards"])
            tk.Label(hdr, text=str(count), bg="#4fc3f7", fg="#000",
                     font=("Arial", 8, "bold"), padx=4).pack(side=tk.LEFT)
            ttk.Button(hdr, text="＋",
                       command=lambda ci=col_idx: self._add_card(ci)
                       ).pack(side=tk.RIGHT, padx=2)

            # カード
            cards_area = tk.Frame(col_frame, bg="#161b22")
            cards_area.pack(fill=tk.BOTH, expand=True)

            for card in col["cards"]:
                if filter_prio != "ALL" and card.get("priority") != filter_prio:
                    continue
                cid = card["id"]
                kc = KanbanCard(
                    cards_area, card,
                    on_move   =lambda d, ci=col_idx, c=card: self._move_card(ci, c, d),
                    on_edit   =lambda ci=col_idx, c=card: self._edit_card(ci, c),
                    on_delete =lambda ci=col_idx, c=card: self._delete_card(ci, c),
                )
                kc.frame.pack(fill=tk.X, pady=2)
                self._card_widgets[cid] = kc

        total = sum(len(c["cards"]) for c in self._columns)
        self.status_var.set(
            f"列: {len(self._columns)}  カード合計: {total}")

    def _add_column(self):
        name = simpledialog.askstring("列を追加", "列名を入力してください:",
                                       parent=self.root)
        if name:
            self._columns.append({"name": name, "cards": []})
            self._render()
            self._save()

    def _add_card(self, col_idx=0):
        if not self._columns:
            messagebox.showwarning("警告", "列を追加してください")
            return
        card = self._card_dialog()
        if card:
            card["id"] = self._next_id
            self._next_id += 1
            ci = min(col_idx, len(self._columns) - 1)
            self._columns[ci]["cards"].append(card)
            self._render()
            self._save()

    def _edit_card(self, col_idx, card):
        updated = self._card_dialog(card)
        if updated:
            card.update(updated)
            self._render()
            self._save()

    def _delete_card(self, col_idx, card):
        if messagebox.askyesno("確認", f"「{card['title']}」を削除しますか？"):
            self._columns[col_idx]["cards"].remove(card)
            self._render()
            self._save()

    def _move_card(self, col_idx, card, direction):
        target = col_idx + direction
        if 0 <= target < len(self._columns):
            self._columns[col_idx]["cards"].remove(card)
            self._columns[target]["cards"].append(card)
            self._render()
            self._save()

    def _card_dialog(self, existing=None):
        dlg = tk.Toplevel(self.root)
        dlg.title("カード編集" if existing else "カードを追加")
        dlg.configure(bg="#21262d")
        dlg.grab_set()
        result = {}

        fields = [
            ("タイトル", "title",  existing.get("title", "") if existing else ""),
            ("説明",     "desc",   existing.get("desc",  "") if existing else ""),
            ("タグ (,区切り)", "tags", existing.get("tags", "") if existing else ""),
            ("期限 (YYYY-MM-DD)", "due", existing.get("due", "") if existing else ""),
        ]
        vars_ = {}
        for label, key, default in fields:
            row = tk.Frame(dlg, bg="#21262d")
            row.pack(fill=tk.X, padx=12, pady=3)
            tk.Label(row, text=f"{label}:", bg="#21262d", fg="#ccc",
                     width=18, anchor="w").pack(side=tk.LEFT)
            v = tk.StringVar(value=default)
            vars_[key] = v
            ttk.Entry(row, textvariable=v, width=24).pack(side=tk.LEFT)

        prio_var = tk.StringVar(value=existing.get("priority", "中") if existing else "中")
        prio_row = tk.Frame(dlg, bg="#21262d")
        prio_row.pack(fill=tk.X, padx=12, pady=3)
        tk.Label(prio_row, text="優先度:", bg="#21262d", fg="#ccc",
                 width=18, anchor="w").pack(side=tk.LEFT)
        ttk.Combobox(prio_row, textvariable=prio_var,
                     values=list(PRIORITIES.keys()),
                     state="readonly", width=8).pack(side=tk.LEFT)

        def _ok():
            if not vars_["title"].get().strip():
                return
            for k, v in vars_.items():
                result[k] = v.get()
            result["priority"] = prio_var.get()
            result["updated"]  = datetime.now().strftime("%Y-%m-%d %H:%M")
            dlg.destroy()

        ttk.Button(dlg, text="保存", command=_ok).pack(pady=8)
        dlg.wait_window()
        return result if result else None

    def _reset(self):
        if messagebox.askyesno("確認", "ボードをリセットしますか？"):
            self._columns = [{"name": c, "cards": []} for c in DEFAULT_COLUMNS]
            self._next_id = 1
            self._render()
            self._save()

    def _save(self):
        try:
            with open(SAVE_PATH, "w", encoding="utf-8") as f:
                json.dump({"next_id": self._next_id,
                           "columns": self._columns}, f,
                          ensure_ascii=False, indent=2)
        except Exception:
            pass

    def _load(self):
        if os.path.exists(SAVE_PATH):
            try:
                with open(SAVE_PATH, encoding="utf-8") as f:
                    data = json.load(f)
                self._next_id = data.get("next_id", 1)
                self._columns = data.get("columns", [])
            except Exception:
                self._columns = [{"name": c, "cards": []}
                                  for c in DEFAULT_COLUMNS]
        else:
            self._columns = [{"name": c, "cards": []}
                              for c in DEFAULT_COLUMNS]
            # サンプルカード
            samples = [
                (0, "トップページのデザイン変更", "高", "UIチーム", "design"),
                (0, "APIエンドポイント追加",   "中", "バックエンド対応", "api,backend"),
                (1, "ログイン機能の実装",       "高", "認証モジュール", "auth"),
                (2, "単体テスト作成",           "低", "テストカバレッジ80%以上", "test"),
            ]
            for ci, title, prio, desc, tags in samples:
                self._columns[ci]["cards"].append({
                    "id": self._next_id, "title": title,
                    "priority": prio, "desc": desc, "tags": tags, "due": "",
                    "updated": datetime.now().strftime("%Y-%m-%d %H:%M"),
                })
                self._next_id += 1
        self._render()


if __name__ == "__main__":
    root = tk.Tk()
    app = App095(root)
    root.mainloop()

5. コード解説

カンバンボードのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

カードを別の場所へ動かすアプリでは、画面に並んでいる順番と、元データの並びを別々に持つのが定石です。この考え方をもっと単純な一覧1本で確かめたい場合は、ToDoリストを「データ」と「画面」に分けて考える解説が下地になります。ここが分かれていないと、表示を変えた途端に「操作したのと違うカードが動く」不具合が起きます。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

1. 1
   ファイルを作成する

   新しいファイルを作成して app095.py と保存します。使うのは tkinter・json・os・datetime だけなので、追加インストールは要りません。

2. 2
   データの形を先に決める

   画面を作る前に DEFAULT_COLUMNS = ["TODO", "進行中", "レビュー", "完了"] と、self._columns = [{"name": c, "cards": []} for c in DEFAULT_COLUMNS] を用意します。ここが決まっていれば、あとの描画も保存もこのリストを見るだけで書けます。

3. 3
   ボードの土台を作る

   App095クラスの _build_ui() で、ヘッダー・ツールバー（カード追加／列追加／保存／リセット）・横スクロールできる tk.Canvas と、その中に置く board_frame を作ります。列が増えても横にスクロールできるのがポイントです。

4. 4
   列とカードを描く _render() を書く

   self._columns をループして列の枠・列名・カード枚数バッジを並べ、その下にカードを pack() します。まだカードは追加できないので、サンプルの辞書を直接入れて表示だけ確認しましょう。

5. 5
   カードの追加・編集・削除を実装する

   _card_dialog() で tk.Toplevel の入力フォーム（タイトル・説明・タグ・期限・優先度）を作ります。grab_set() で他の操作をブロックし、タイトルが空のときは保存しないようにします。

6. 6
   右クリックメニューで列を移動できるようにする

   カードの Frame に bind("<Button-3>", self._popup) を付け、メニューから _move_card() を呼びます。移動先が 0 <= target < len(self._columns) の範囲に入るかを必ず確認してから移してください。

7. 7
   JSONへの保存と読み込みを付ける

   _save() で kanban.json へ書き出し、_load() で起動時に読み戻します。データを変える操作の最後に必ず _render() と _save() を並べて呼ぶ、と決めておくと保存漏れが起きません。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

8. よくある問題と解決法

9. 練習問題

アプリの理解を深めるための練習問題です。

1. 課題1：既定の列を変えてみる

   DEFAULT_COLUMNS を自分の作業フローに合わせて書き換え（例：「未着手・調査中・実装中・確認待ち・完了」）、「↩ リセット」を押して反映されることを確かめましょう。既存の kanban.json があると読み込みが優先される点にも注目してください。

2. 課題2：同じ列の中でカードを並べ替える

   今のメニューは隣の列への移動だけです。「↑ 上へ / ↓ 下へ」を追加し、cards リストの中で要素の位置を入れ替えてみましょう。リストの index を使う練習になります。

3. 課題3：列ごとの上限枚数を設ける

   カンバンの定番ルール「WIP制限」に挑戦します。「進行中」の列が3枚を超えたら messagebox.showwarning() で警告を出し、移動を止める処理を _move_card() に追加しましょう。