中級者向け No.47

フォトギャラリー

フォルダ内の画像をサムネイル一覧表示・スライドショー再生できるフォトギャラリー。Pillowとスクロール可能なCanvasを学びます。

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ）, Pillow ⏱️ 制作時間: 30〜90分
📋 目次

1. アプリ概要

フォルダ内の画像をサムネイル一覧表示・スライドショー再生できるフォトギャラリー。Pillowとスクロール可能なCanvasを学びます。

このアプリは中級カテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ）・Pillow で、難易度は ★★☆ です。

Pythonでは tkinter を使うことで、クロスプラットフォームなGUIアプリを簡単に作成できます。このアプリを通じて、ウィジェットの配置・イベント処理・データ管理など、GUI開発の実践的なスキルを習得できます。

ソースコードは完全な動作状態で提供しており、コピーしてそのまま実行できます。まずは実行して動作を確認し、その後コードを読んで仕組みを理解していきましょう。カスタマイズセクションでは機能拡張のアイデアも紹介しています。

GUIアプリ開発は、プログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。アプリを作ることで、変数・関数・クラス・イベント処理など、プログラミングの重要な概念が自然と身についていきます。このアプリをきっかけに、オリジナルアプリの開発にも挑戦してみてください。

2. 機能一覧

  • フォトギャラリーのメイン機能
  • 直感的なGUIインターフェース
  • 入力値のバリデーション
  • エラーハンドリング
  • 結果の見やすい表示
  • キーボードショートカット対応

3. 事前準備・環境

ℹ️
動作確認環境

Python 3.10 以上 / Windows・Mac・Linux すべて対応

以下の環境で動作確認しています。

  • Python 3.10 以上
  • OS: Windows 10/11・macOS 12+・Ubuntu 20.04+

インストールが必要なライブラリ

pip install pillow

4. 完全なソースコード

💡
コードのコピー方法

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

app47.py
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

5. コード解説

フォトギャラリーのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

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

App47クラスにアプリの全機能をまとめています。__init__メソッドでウィンドウの基本設定を行い、_build_ui()でUI構築、process()でメイン処理を担当します。この分離により、各メソッドの責任が明確になりコードが読みやすくなります。

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

LabelFrameによるセクション分け

ttk.LabelFrame を使うことで、入力エリアと結果エリアを視覚的に分けられます。padding引数でフレーム内の余白を設定し、見やすいレイアウトを実現しています。

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

Entryウィジェットとイベントバインド

ttk.Entryで入力フィールドを作成します。bind('', ...)でEnterキー押下時に処理を実行できます。これにより、マウスを使わずキーボードだけで操作できるUXが実現できます。

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

Textウィジェットでの結果表示

結果表示にはtk.Textウィジェットを使います。state=tk.DISABLEDでユーザーが直接編集できないようにし、表示前にNORMALに切り替えてからinsert()で内容を更新します。

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

例外処理とmessagebox

try-except で ValueError と Exception を捕捉し、messagebox.showerror() でユーザーにわかりやすいエラーメッセージを表示します。入力バリデーションは必ず実装しましょう。

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import threading
import time

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App47:
    """フォトギャラリー"""

    SUPPORTED_EXT = {".jpg", ".jpeg", ".png", ".bmp", ".gif",
                     ".webp", ".tiff", ".tif"}
    THUMB_SIZE = (120, 90)

    def __init__(self, root):
        self.root = root
        self.root.title("フォトギャラリー")
        self.root.geometry("1000x680")
        self.root.configure(bg="#1e1e1e")
        self._images = []      # {"path", "name", "thumb_tk"}
        self._thumb_cache = {}
        self._slideshow_running = False
        self._slideshow_idx = 0
        self._slideshow_id = None
        self._current_path = None
        self._build_ui()

    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", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        ttk.Button(header, text="📂 フォルダを開く",
                   command=self._open_folder).pack(side=tk.LEFT, padx=4)

        # スライドショー
        ttk.Button(header, text="▶ スライドショー",
                   command=self._start_slideshow).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="⏹ 停止",
                   command=self._stop_slideshow).pack(side=tk.LEFT, padx=4)
        tk.Label(header, text="間隔(秒):", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(8, 2))
        self.slide_interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(header, from_=0.5, to=30, increment=0.5,
                    textvariable=self.slide_interval_var,
                    width=5).pack(side=tk.LEFT)

        # ソート
        tk.Label(header, text="並び:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(12, 2))
        self.sort_var = tk.StringVar(value="名前順")
        ttk.Combobox(header, textvariable=self.sort_var,
                     values=["名前順", "更新日順", "サイズ順"],
                     state="readonly", width=10).pack(side=tk.LEFT)
        ttk.Button(header, text="🔄",
                   command=self._sort_images).pack(side=tk.LEFT, padx=2)

        if not PIL_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ Pillow が未インストールです (pip install Pillow)。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア: 左(サムネイル) / 右(プレビュー)
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: サムネイルグリッド
        left = tk.Frame(paned, bg="#1e1e1e")
        paned.add(left, weight=2)
        self._build_thumbnail_panel(left)

        # 右: プレビュー
        right = tk.Frame(paned, bg="#0d1117")
        paned.add(right, weight=3)
        self._build_preview_panel(right)

        # ステータスバー
        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 _build_thumbnail_panel(self, parent):
        # 検索
        search_f = tk.Frame(parent, bg="#252526", pady=4)
        search_f.pack(fill=tk.X)
        self.search_var = tk.StringVar()
        self.search_var.trace_add("write", lambda *a: self._filter_thumbnails())
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=20).pack(side=tk.LEFT, padx=4, fill=tk.X, expand=True)
        tk.Label(search_f, text="🔍", bg="#252526", fg="#ccc").pack(side=tk.LEFT)

        # スクロール可能なキャンバス
        thumb_outer = tk.Frame(parent, bg="#1e1e1e")
        thumb_outer.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas = tk.Canvas(thumb_outer, bg="#1e1e1e",
                                       highlightthickness=0)
        sb = ttk.Scrollbar(thumb_outer, command=self.thumb_canvas.yview)
        self.thumb_canvas.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.thumb_canvas.pack(fill=tk.BOTH, expand=True)
        self.thumb_canvas.bind("<Configure>", self._on_canvas_resize)
        self.thumb_canvas.bind("<MouseWheel>",
                               lambda e: self.thumb_canvas.yview_scroll(
                                   -1 if e.delta > 0 else 1, "units"))

        self.thumb_frame = tk.Frame(self.thumb_canvas, bg="#1e1e1e")
        self.thumb_canvas.create_window((0, 0), window=self.thumb_frame,
                                         anchor="nw", tags="inner")
        self.thumb_frame.bind("<Configure>",
                               lambda e: self.thumb_canvas.configure(
                                   scrollregion=self.thumb_canvas.bbox("all")))

    def _build_preview_panel(self, parent):
        # 画像情報
        self.info_var = tk.StringVar(value="")
        tk.Label(parent, textvariable=self.info_var, bg="#0d1117",
                 fg="#8b949e", font=("Arial", 9)).pack(anchor="w", padx=6, pady=2)

        # プレビューキャンバス
        self.preview_canvas = tk.Canvas(parent, bg="black",
                                         highlightthickness=0)
        self.preview_canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_img_ref = None
        # クリックでナビゲーション
        self.preview_canvas.bind("<Left>",
                                  lambda e: self._navigate(-1))
        self.preview_canvas.bind("<Right>",
                                  lambda e: self._navigate(1))
        self.preview_canvas.bind("<Button-1>",
                                  lambda e: self.preview_canvas.focus_set())
        self.preview_canvas.configure(takefocus=True)

        # ナビゲーションボタン
        nav_f = tk.Frame(parent, bg="#252526", pady=4)
        nav_f.pack(fill=tk.X)
        tk.Button(nav_f, text="◀ 前",
                  command=lambda: self._navigate(-1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=8)
        tk.Button(nav_f, text="次 ▶",
                  command=lambda: self._navigate(1),
                  bg="#3c3c3c", fg="white", relief=tk.FLAT,
                  font=("Arial", 10), padx=12, pady=3,
                  activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        self.nav_label = tk.Label(nav_f, text="",
                                   bg="#252526", fg="#ccc", font=("Arial", 9))
        self.nav_label.pack(side=tk.LEFT, padx=8)

        # ズーム
        tk.Label(nav_f, text="ズーム:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.zoom_var = tk.DoubleVar(value=1.0)
        ttk.Scale(nav_f, from_=0.1, to=5.0, variable=self.zoom_var,
                   orient=tk.HORIZONTAL, length=100,
                   command=lambda v: self._show_preview(self._current_path)
                   ).pack(side=tk.RIGHT, padx=4)

    # ── フォルダ読み込み ──────────────────────────────────────────

    def _open_folder(self):
        folder = filedialog.askdirectory()
        if folder:
            self._load_folder(folder)

    def _load_folder(self, folder):
        if not PIL_AVAILABLE:
            messagebox.showerror("エラー", "Pillow が必要です:\npip install Pillow")
            return
        self.status_var.set("読み込み中...")
        self._images.clear()
        self._thumb_cache.clear()
        threading.Thread(target=self._do_load_folder,
                         args=(folder,), daemon=True).start()

    def _do_load_folder(self, folder):
        files = []
        for fn in os.listdir(folder):
            ext = os.path.splitext(fn)[1].lower()
            if ext in self.SUPPORTED_EXT:
                files.append(os.path.join(folder, fn))
        files.sort(key=lambda p: p.lower())
        for path in files:
            self._images.append({"path": path, "name": os.path.basename(path)})
        self.root.after(0, self._on_images_loaded, folder)

    def _on_images_loaded(self, folder):
        self.status_var.set(f"{len(self._images)} 枚の画像")
        self.root.title(f"フォトギャラリー — {folder}")
        self._render_thumbnails(self._images)
        if self._images:
            self._current_path = self._images[0]["path"]
            self._show_preview(self._current_path)

    def _render_thumbnails(self, images):
        for widget in self.thumb_frame.winfo_children():
            widget.destroy()
        for idx, img_info in enumerate(images):
            self._create_thumb(idx, img_info)

    def _create_thumb(self, idx, img_info):
        path = img_info["path"]
        cell = tk.Frame(self.thumb_frame, bg="#252526",
                         relief=tk.FLAT, bd=2)
        cell.grid(row=idx // 3, column=idx % 3, padx=3, pady=3)

        # サムネイル読み込みは遅延
        thumb_label = tk.Label(cell, bg="#252526", fg="#888",
                                text="...", width=14, height=6)
        thumb_label.pack()
        name_label = tk.Label(cell, text=img_info["name"][:16],
                               bg="#252526", fg="#ccc",
                               font=("Arial", 7))
        name_label.pack()

        # クリックでプレビュー
        def on_click(p=path, c=cell):
            for w in self.thumb_frame.winfo_children():
                w.config(bg="#252526", relief=tk.FLAT)
                for ww in w.winfo_children():
                    ww.config(bg="#252526")
            c.config(bg="#0288d1", relief=tk.SUNKEN)
            self._current_path = p
            self._show_preview(p)

        cell.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        thumb_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))
        name_label.bind("<Button-1>", lambda e, c=cell: on_click(cell))

        # サムネイル生成を別スレッドで
        threading.Thread(target=self._load_thumb,
                         args=(path, thumb_label), daemon=True).start()

    def _load_thumb(self, path, label):
        if path in self._thumb_cache:
            self.root.after(0, label.config,
                            {"image": self._thumb_cache[path], "text": ""})
            return
        try:
            img = Image.open(path)
            img.thumbnail(self.THUMB_SIZE, Image.LANCZOS)
            tk_img = ImageTk.PhotoImage(img)
            self._thumb_cache[path] = tk_img
            self.root.after(0, label.config, {"image": tk_img, "text": ""})
        except Exception:
            pass

    def _on_canvas_resize(self, event):
        self.thumb_canvas.itemconfig("inner", width=event.width)

    # ── プレビュー ────────────────────────────────────────────────

    def _show_preview(self, path):
        if not path or not PIL_AVAILABLE:
            return
        try:
            img = Image.open(path)
            img.load()
            w_orig, h_orig = img.size
            zoom = self.zoom_var.get()
            cw = max(1, self.preview_canvas.winfo_width())
            ch = max(1, self.preview_canvas.winfo_height())
            # フィット表示
            if zoom == 1.0:
                scale = min(cw / w_orig, ch / h_orig)
                new_w = max(1, int(w_orig * scale))
                new_h = max(1, int(h_orig * scale))
            else:
                new_w = max(1, int(w_orig * zoom))
                new_h = max(1, int(h_orig * zoom))
            resized = img.resize((new_w, new_h), Image.LANCZOS)
            self.preview_img_ref = ImageTk.PhotoImage(resized)
            self.preview_canvas.delete("all")
            self.preview_canvas.create_image(
                cw // 2, ch // 2, image=self.preview_img_ref, anchor="center")

            # 情報表示
            stat = os.stat(path)
            size_kb = stat.st_size // 1024
            self.info_var.set(
                f"{os.path.basename(path)}  |  {w_orig}×{h_orig}  |  {size_kb}KB")

            # ナビゲーション
            idx = next((i for i, im in enumerate(self._images)
                        if im["path"] == path), -1)
            total = len(self._images)
            if idx >= 0:
                self.nav_label.config(text=f"{idx+1} / {total}")
        except Exception as e:
            self.preview_canvas.delete("all")
            self.preview_canvas.create_text(
                300, 200, text=f"画像を開けませんでした\n{e}",
                fill="#888", font=("Arial", 11))

    def _navigate(self, delta):
        if not self._images:
            return
        idx = next((i for i, im in enumerate(self._images)
                    if im["path"] == self._current_path), 0)
        new_idx = (idx + delta) % len(self._images)
        self._current_path = self._images[new_idx]["path"]
        self._show_preview(self._current_path)

    def _filter_thumbnails(self):
        query = self.search_var.get().strip().lower()
        if query:
            filtered = [im for im in self._images
                        if query in im["name"].lower()]
        else:
            filtered = self._images
        self._render_thumbnails(filtered)

    def _sort_images(self):
        mode = self.sort_var.get()
        if mode == "名前順":
            self._images.sort(key=lambda im: im["name"].lower())
        elif mode == "更新日順":
            self._images.sort(key=lambda im: os.path.getmtime(im["path"]),
                              reverse=True)
        elif mode == "サイズ順":
            self._images.sort(key=lambda im: os.path.getsize(im["path"]),
                              reverse=True)
        self._render_thumbnails(self._images)

    # ── スライドショー ────────────────────────────────────────────

    def _start_slideshow(self):
        if not self._images:
            messagebox.showinfo("情報", "画像を読み込んでください")
            return
        self._slideshow_running = True
        self._slideshow_idx = next(
            (i for i, im in enumerate(self._images)
             if im["path"] == self._current_path), 0)
        self._slideshow_tick()

    def _slideshow_tick(self):
        if not self._slideshow_running or not self._images:
            return
        self._slideshow_idx = (self._slideshow_idx + 1) % len(self._images)
        self._current_path = self._images[self._slideshow_idx]["path"]
        self._show_preview(self._current_path)
        interval_ms = int(self.slide_interval_var.get() * 1000)
        self._slideshow_id = self.root.after(interval_ms, self._slideshow_tick)

    def _stop_slideshow(self):
        self._slideshow_running = False
        if self._slideshow_id:
            self.root.after_cancel(self._slideshow_id)
            self._slideshow_id = None


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

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

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

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

    新しいファイルを作成して app47.py と保存します。

  2. 2
    クラスの骨格を作る

    App47クラスを定義し、__init__とmainloop()の最小構成を作ります。

  3. 3
    タイトルバーを作る

    Frameを使ってカラーバー付きのタイトルエリアを作ります。

  4. 4
    入力フォームを実装する

    LabelFrameとEntryウィジェットで入力エリアを作ります。

  5. 5
    処理ロジックを実装する

    _calculate()メソッドに計算・処理ロジックを実装します。

  6. 6
    結果表示を実装する

    TextウィジェットかLabelに結果を表示する_show_result()を実装します。

  7. 7
    エラー処理を追加する

    try-exceptとmessageboxでエラーハンドリングを追加します。

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

💡 ダークモードを追加する

bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。

💡 データのエクスポート機能

計算結果をCSV・TXTファイルに保存するエクスポート機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。

💡 入力履歴機能

以前の入力値を覚えておいてComboboxのドロップダウンで再選択できる履歴機能を追加しましょう。

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

❌ 日本語フォントが表示されない

原因：システムに日本語フォントが見つからない場合があります。

解決法：font引数を省略するかシステムに合ったフォントを指定してください。

❌ ウィンドウのサイズが変更できない

原因：resizable(False, False)が設定されています。

解決法：resizable(True, True)に変更してください。

9. 練習問題

アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。

  1. 課題1：機能拡張

    フォトギャラリーに新しい機能を1つ追加してみましょう。どんな機能があると便利か考えてから実装してください。

  2. 課題2：UIの改善

    色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしてみましょう。

  3. 課題3：保存機能の追加

    入力値や計算結果をファイルに保存する機能を追加しましょう。jsonやcsvモジュールを使います。

🚀
次に挑戦するアプリ

このアプリをマスターしたら、次のNo.48に挑戦しましょう。