中級者向け No.47

フォトギャラリー

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

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

📋 目次

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

1. アプリ概要

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

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

このアプリは「メディア処理」カテゴリです。画像・音声・動画を扱う領域は Python の強力なライブラリ群が活きる分野で、メディア処理の作法は他の用途にも応用が効きます。tkinter（標準ライブラリ）・Pillow を活かして実装するこの構造は、他のアプリにも応用が効きます。

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

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

フォトギャラリー実行画面（Linux Mint） — 実行画面（Linux Mint）

2. 機能一覧

「📂 フォルダを開く」ボタン（_open_folder()）・「▶ スライドショー」ボタン（_start_slideshow()）・「⏹ 停止」ボタン（_stop_slideshow()）・「🔄」ボタン（_sort_images()）・「◀ 前」ボタン（_navigate()）・「次 ▶」ボタン（_navigate()）で操作
<Configure> イベント（ウィンドウ側からの通知）で _on_canvas_resize() を自動実行
マウス操作 <MouseWheel> から lambda e: self.thumb_canvas.yview_scroll(-1 if e.delta > 0 else 1, 'units') を実行
<Configure> イベント（ウィンドウ側からの通知）で lambda e: self.thumb_canvas.configure(scrollregion=self.thumb_canvas.bbox('all')) を自動実行
キー <Left> から _navigate() を実行
キー <Right> から _navigate() を実行
マウス操作 <Button-1> から lambda e: self.preview_canvas.focus_set() を実行
マウス操作 <Button-1> から lambda e, c=cell: on_click(cell) を実行
マウス操作 <Button-1> から lambda e, c=cell: on_click(cell) を実行
マウス操作 <Button-1> から lambda e, c=cell: on_click(cell) を実行
filedialog.askdirectory() によるファイル選択ダイアログ
messagebox.showerror()・messagebox.showinfo() によるダイアログ通知
ウィンドウはタイトル「フォトギャラリー」・サイズ 1000x680 で起動

3. 事前準備・環境

ℹ️

動作確認環境

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

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

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

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

pip install pillow

4. 完全なソースコード

💡

コードのコピー方法

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

📦 必要なライブラリをインストール（初回のみ）

pip install pillow

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 クラスにアプリの全機能をまとめています（メソッド19個・全368行）。__init__ ではタイトル「フォトギャラリー」とウィンドウサイズ 1000x680 を設定します。あわせて状態を保持する変数（self._slideshow_running・self._slideshow_idx・self._slideshow_id・self._current_path）を初期化し、最後に _build_ui() で画面を組み立てます。