中級者向け No.087

デスクトップ付箋アプリ

常時最前面表示・カラー選択・自動保存機能付きのデスクトップ付箋。複数枚同時表示対応。

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ）のみ ⏱️ 制作時間: 30〜90分

📋 目次

1. アプリ概要
2. 機能一覧
3. 事前準備・環境
4. 完全なソースコード
5. コード解説
6. ステップバイステップガイド
7. カスタマイズアイデア
8. よくある問題と解決法
9. 練習問題

1. アプリ概要

常時最前面表示・カラー選択・自動保存機能付きのデスクトップ付箋。複数枚同時表示対応。

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

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

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

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

デスクトップ付箋アプリ実行画面（Windows） — 実行画面（Windows）

デスクトップ付箋アプリ実行画面（Linux Mint） — 実行画面（Linux Mint）

2. 機能一覧

ループで生成するボタン群を _new_note() に接続
「表示」ボタン（_show_selected()）・「全表示」ボタン（_show_all()）・「全非表示」ボタン（_hide_all()）・「削除」ボタン（_delete_selected()）で操作
イベント <<TreeviewSelect>> から _on_select() を実行
マウス操作 <Double-1> から _show_selected() を実行
ttk.Treeview による表形式の一覧表示
JSON ファイルの保存・読み込み（起動時に自動実行）
ウィンドウはタイトル「デスクトップ付箋アプリ」・サイズ 353x440 で起動

3. 事前準備・環境

ℹ️

動作確認環境

Python 3.10 以上 / Windows 11（実機）で起動・基本操作を確認／ Linux Mint 22.3（仮想マシン）で起動・画面表示を確認（macOS は未検証）

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

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

4. 完全なソースコード

💡

コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

✅ 追加インストール不要（標準ライブラリのみ使用）

app087.py

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

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

NOTE_COLORS = {
    "黄":  "#fffde7",
    "青":  "#e3f2fd",
    "緑":  "#e8f5e9",
    "ピンク": "#fce4ec",
    "紫":  "#f3e5f5",
    "白":  "#ffffff",
}


class StickyNote:
    """個別の付箋ウィンドウ"""

    def __init__(self, master, note_data, on_save, on_delete):
        self._data = note_data
        self._on_save   = on_save
        self._on_delete = on_delete

        color = note_data.get("color", "#fffde7")
        x = note_data.get("x", 100)
        y = note_data.get("y", 100)
        w = note_data.get("w", 220)
        h = note_data.get("h", 180)

        self.win = tk.Toplevel(master)
        self.win.overrideredirect(True)   # タイトルバー非表示
        self.win.geometry(f"{w}x{h}+{x}+{y}")
        self.win.configure(bg=color)
        self.win.attributes("-topmost", note_data.get("topmost", False))

        # タイトルバー代替
        title_bar = tk.Frame(self.win, bg=self._darken(color), height=22)
        title_bar.pack(fill=tk.X)
        title_bar.pack_propagate(False)

        tk.Label(title_bar, text="📌", bg=self._darken(color),
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=4)

        tk.Button(title_bar, text="✕", bg=self._darken(color), fg="#555",
                  relief=tk.FLAT, font=("Arial", 8), bd=0,
                  command=self._hide).pack(side=tk.RIGHT, padx=2)
        tk.Button(title_bar, text="⋮", bg=self._darken(color), fg="#555",
                  relief=tk.FLAT, font=("Arial", 8), bd=0,
                  command=self._menu).pack(side=tk.RIGHT, padx=2)

        # ドラッグ移動
        self._drag_x = self._drag_y = 0
        title_bar.bind("<ButtonPress-1>",   self._start_move)
        title_bar.bind("<B1-Motion>",       self._do_move)
        title_bar.bind("<ButtonRelease-1>", self._end_move)

        # テキストエリア
        self.text = tk.Text(self.win, bg=color, fg="#333",
                             font=("Noto Sans JP", 10), relief=tk.FLAT,
                             insertbackground="#333", wrap=tk.WORD,
                             padx=4, pady=2, undo=True)
        self.text.pack(fill=tk.BOTH, expand=True)
        self.text.insert("1.0", note_data.get("content", ""))
        self.text.bind("<<Modified>>", self._on_modified)

        # リサイズグリップ
        grip = tk.Label(self.win, text="◢", bg=self._darken(color),
                         fg="#999", font=("Arial", 7), cursor="size_nw_se")
        grip.place(relx=1.0, rely=1.0, anchor="se")
        grip.bind("<ButtonPress-1>",   self._start_resize)
        grip.bind("<B1-Motion>",       self._do_resize)

    def _darken(self, hex_color):
        """16進カラーを少し暗くする"""
        try:
            r = int(hex_color[1:3], 16)
            g = int(hex_color[3:5], 16)
            b = int(hex_color[5:7], 16)
            return f"#{max(0,r-30):02x}{max(0,g-30):02x}{max(0,b-30):02x}"
        except Exception:
            return hex_color

    def _start_move(self, e):
        self._drag_x = e.x
        self._drag_y = e.y

    def _do_move(self, e):
        dx = e.x - self._drag_x
        dy = e.y - self._drag_y
        x = self.win.winfo_x() + dx
        y = self.win.winfo_y() + dy
        self.win.geometry(f"+{x}+{y}")

    def _end_move(self, _e):
        self._data["x"] = self.win.winfo_x()
        self._data["y"] = self.win.winfo_y()
        self._on_save()

    def _start_resize(self, e):
        self._rx = e.x_root
        self._ry = e.y_root
        self._rw = self.win.winfo_width()
        self._rh = self.win.winfo_height()

    def _do_resize(self, e):
        dw = e.x_root - self._rx
        dh = e.y_root - self._ry
        nw = max(150, self._rw + dw)
        nh = max(100, self._rh + dh)
        self.win.geometry(f"{nw}x{nh}")
        self._data["w"] = nw
        self._data["h"] = nh

    def _on_modified(self, _=None):
        self._data["content"] = self.text.get("1.0", tk.END).rstrip()
        self.text.edit_modified(False)
        self._on_save()

    def _hide(self):
        self._data["visible"] = False
        self.win.withdraw()
        self._on_save()

    def _menu(self):
        m = tk.Menu(self.win, tearoff=False, bg="#252526", fg="#c9d1d9")
        m.add_command(label="🗑 削除", command=self._delete)
        m.add_separator()
        for name, hex_c in NOTE_COLORS.items():
            m.add_command(label=f"🎨 {name}",
                           command=lambda c=hex_c: self._change_color(c))
        pin_label = "📌 ピン留め解除" if self._data.get("topmost") else "📌 ピン留め"
        m.add_command(label=pin_label, command=self._toggle_topmost)
        m.post(self.win.winfo_rootx() + self.win.winfo_width() - 60,
               self.win.winfo_rooty() + 22)

    def _delete(self):
        self._data["deleted"] = True
        self.win.destroy()
        self._on_delete(self._data["id"])

    def _change_color(self, color):
        self._data["color"] = color
        self.win.configure(bg=color)
        self.text.configure(bg=color)
        self._on_save()

    def _toggle_topmost(self):
        val = not self._data.get("topmost", False)
        self._data["topmost"] = val
        self.win.attributes("-topmost", val)
        self._on_save()


class App087:
    """デスクトップ付箋アプリ"""

    def __init__(self, root):
        self.root = root
        self.root.title("デスクトップ付箋アプリ")
        self.root.geometry("353x440")
        self.root.minsize(353, 440)
        self.root.configure(bg="#1e1e1e")
        self._notes   = []   # note data dicts
        self._windows = {}   # {note_id: StickyNote}
        self._next_id = 1
        self._build_ui()
        self._load()

    def _build_ui(self):
        header = tk.Frame(self.root, bg="#252526", pady=6)
        header.pack(fill=tk.X)
        tk.Label(header, text="📌 デスクトップ付箋アプリ",
                 font=("Noto Sans JP", 11, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        tb = tk.Frame(self.root, bg="#2d2d2d", pady=4)
        tb.pack(fill=tk.X)
        for color_name, hex_c in NOTE_COLORS.items():
            btn = tk.Button(tb, text=color_name, bg=hex_c, fg="#333",
                             relief=tk.FLAT, font=("Arial", 8), padx=4, pady=3,
                             activebackground=hex_c, bd=1,
                             command=lambda c=hex_c: self._new_note(c))
            btn.pack(side=tk.LEFT, padx=1)

        # 付箋一覧
        tk.Label(self.root, text="付箋一覧", bg="#1e1e1e", fg="#888",
                 font=("Arial", 9)).pack(anchor="w", padx=8, pady=(4, 0))
        cols = ("color", "preview", "updated")
        self.tree = ttk.Treeview(self.root, columns=cols, show="headings",
                                  selectmode="browse")
        self.tree.heading("color",   text="色")
        self.tree.heading("preview", text="内容")
        self.tree.heading("updated", text="更新")
        self.tree.column("color",   width=40,  anchor="center")
        self.tree.column("preview", width=160, anchor="w")
        self.tree.column("updated", width=80,  anchor="center")
        tsb = ttk.Scrollbar(self.root, command=self.tree.yview)
        self.tree.configure(yscrollcommand=tsb.set)
        tsb.pack(side=tk.RIGHT, fill=tk.Y)
        self.tree.pack(fill=tk.BOTH, expand=True, padx=(8, 0))
        self.tree.bind("<<TreeviewSelect>>", self._on_select)
        self.tree.bind("<Double-1>", self._show_selected)

        btn_row = tk.Frame(self.root, bg="#1e1e1e")
        btn_row.pack(fill=tk.X, padx=8, pady=4)
        ttk.Button(btn_row, text="表示", command=self._show_selected).pack(side=tk.LEFT, padx=2)
        ttk.Button(btn_row, text="全表示", command=self._show_all).pack(side=tk.LEFT, padx=2)
        ttk.Button(btn_row, text="全非表示", command=self._hide_all).pack(side=tk.LEFT, padx=2)
        ttk.Button(btn_row, text="削除", command=self._delete_selected).pack(side=tk.RIGHT, padx=2)

        self.status_var = tk.StringVar(value="付箋を追加してください")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#252526", fg="#858585", font=("Arial", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

    def _new_note(self, color="#fffde7"):
        note = {
            "id":      self._next_id,
            "content": "",
            "color":   color,
            "x":       200 + self._next_id * 30,
            "y":       100 + self._next_id * 30,
            "w":       220,
            "h":       180,
            "visible": True,
            "topmost": False,
            "updated": datetime.now().strftime("%m/%d %H:%M"),
        }
        self._next_id += 1
        self._notes.append(note)
        self._open_window(note)
        self._refresh_list()
        self._save()

    def _open_window(self, note):
        note_id = note["id"]
        if note_id in self._windows:
            self._windows[note_id].win.deiconify()
            return
        sn = StickyNote(
            self.root, note,
            on_save=self._on_note_save,
            on_delete=self._on_note_delete)
        self._windows[note_id] = sn

    def _on_note_save(self):
        for n in self._notes:
            n["updated"] = datetime.now().strftime("%m/%d %H:%M")
        self._refresh_list()
        self._save()

    def _on_note_delete(self, note_id):
        self._notes = [n for n in self._notes if n["id"] != note_id]
        if note_id in self._windows:
            del self._windows[note_id]
        self._refresh_list()
        self._save()

    def _refresh_list(self):
        self.tree.delete(*self.tree.get_children())
        for n in self._notes:
            preview = n.get("content", "")[:30].replace("\n", " ")
            self.tree.insert("", tk.END, text=n["id"],
                              values=("●", preview, n.get("updated", "")))
        self.status_var.set(f"付箋: {len(self._notes)} 枚")

    def _on_select(self, _=None):
        pass

    def _show_selected(self, _=None):
        sel = self.tree.selection()
        if not sel:
            return
        note_id = int(self.tree.item(sel[0], "text"))
        note = next((n for n in self._notes if n["id"] == note_id), None)
        if note:
            note["visible"] = True
            self._open_window(note)
            if note_id in self._windows:
                self._windows[note_id].win.deiconify()

    def _show_all(self):
        for n in self._notes:
            n["visible"] = True
            self._open_window(n)
            if n["id"] in self._windows:
                self._windows[n["id"]].win.deiconify()

    def _hide_all(self):
        for sn in self._windows.values():
            sn.win.withdraw()

    def _delete_selected(self):
        sel = self.tree.selection()
        if not sel:
            return
        note_id = int(self.tree.item(sel[0], "text"))
        if note_id in self._windows:
            self._windows[note_id].win.destroy()
            del self._windows[note_id]
        self._notes = [n for n in self._notes if n["id"] != note_id]
        self._refresh_list()
        self._save()

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

    def _load(self):
        if not os.path.exists(SAVE_PATH):
            return
        try:
            with open(SAVE_PATH, encoding="utf-8") as f:
                data = json.load(f)
            self._next_id = data.get("next_id", 1)
            self._notes   = data.get("notes", [])
            for n in self._notes:
                if n.get("visible", True):
                    self._open_window(n)
            self._refresh_list()
        except Exception:
            pass


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

5. コード解説

デスクトップ付箋アプリのコードを、実際に書かれている実装に沿って解説します。

クラス設計とコンストラクタ

App087 クラスにアプリの全機能をまとめています（メソッド14個・全336行）。__init__ ではタイトル「デスクトップ付箋アプリ」とウィンドウサイズ 353x440 を設定します。あわせて状態を保持する変数（self._next_id）を初期化し、そのあと _build_ui() → _load() の順に呼び出して初期状態を作ります。