画像スライドショー

1. アプリ概要

フォルダを選択して画像を自動スライドショー表示するアプリ。表示間隔調整とキーナビゲーション付き。

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

このアプリは「入門」カテゴリです。ウィンドウ・ウィジェット・イベントの基本構造を反復することで、後から複雑なアプリを作るときの骨格が身につきます。tkinter（標準ライブラリ）・Pillow を活かして実装するこの構造は、他のアプリにも応用が効きます。

完成形を見てから細部の解説に進む流れが効果的です。実行→気になる箇所を解説で確認→自分の手で改造、というサイクルで定着が早まります。

カスタマイズ章では具体的な拡張アイデアを示しています。一つ実装するごとに動作確認することで、変更が予期せぬ副作用を起こさないかも体感できます。

2. 機能一覧

• 「フォルダ選択」ボタン（choose_folder()）・「◀ 前へ」ボタン（prev_img()）・「▶ 再生」ボタン（play()）・「■ 停止」ボタン（stop()）・「次へ ▶」ボタン（next_img()）で操作
• キー <Left> から prev_img() を実行
• キー <Right> から next_img() を実行
• キー <space> から toggle() を実行
• filedialog.askdirectory() によるファイル選択ダイアログ
• messagebox.showerror()・messagebox.showinfo() によるダイアログ通知
• ウィンドウはタイトル「画像スライドショー」・サイズ 760x601 で起動

3. 事前準備・環境

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

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

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

pip install pillow

4. 完全なソースコード

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

# Pillow が無い場合は GIF/PGM/PPM のみ対応 (tkinter 標準)
try:
    from PIL import Image, ImageTk  # type: ignore
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


SUPPORTED_EXTS = (".png", ".jpg", ".jpeg", ".gif", ".bmp", ".ppm", ".pgm")


class App074:
    """画像スライドショー"""

    def __init__(self, root):
        self.root = root
        self.root.title("画像スライドショー")
        self.root.geometry("760x601")
        self.root.minsize(760, 601)
        self.root.configure(bg="#f8f9fc")
        self.images = []  # ファイルパス一覧
        self.idx = 0
        self.interval_ms = 3000
        self.playing = False
        self._after_id = None
        self._tk_img = None
        self._build_ui()

    def _build_ui(self):
        """UI を構築する"""
        title = tk.Frame(self.root, bg="#3776ab", pady=12)
        title.pack(fill=tk.X)
        tk.Label(title, text="画像スライドショー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        ctrl = ttk.LabelFrame(self.root, text="操作", padding=10)
        ctrl.pack(fill=tk.X, padx=15, pady=8)
        ttk.Button(ctrl, text="フォルダ選択", command=self.choose_folder).pack(side=tk.LEFT, padx=4)
        ttk.Button(ctrl, text="◀ 前へ", command=self.prev_img).pack(side=tk.LEFT, padx=4)
        ttk.Button(ctrl, text="▶ 再生", command=self.play).pack(side=tk.LEFT, padx=4)
        ttk.Button(ctrl, text="■ 停止", command=self.stop).pack(side=tk.LEFT, padx=4)
        ttk.Button(ctrl, text="次へ ▶", command=self.next_img).pack(side=tk.LEFT, padx=4)
        ttk.Label(ctrl, text="間隔(秒):").pack(side=tk.LEFT, padx=(20, 4))
        self.interval_var = tk.DoubleVar(value=3.0)
        ttk.Spinbox(ctrl, from_=0.5, to=30.0, increment=0.5, width=6,
                    textvariable=self.interval_var).pack(side=tk.LEFT)

        self.canvas = tk.Canvas(self.root, width=720, height=420, bg="#222",
                                highlightthickness=0)
        self.canvas.pack(padx=15, pady=10)

        self.status = tk.Label(self.root, text="フォルダを選択してください",
                               bg="#f8f9fc", fg="#555")
        self.status.pack()

        # キーバインド
        self.root.bind("<Left>", lambda e: self.prev_img())
        self.root.bind("<Right>", lambda e: self.next_img())
        self.root.bind("<space>", lambda e: self.toggle())

    def choose_folder(self):
        """画像フォルダを選択する"""
        path = filedialog.askdirectory(title="画像フォルダを選択")
        if not path:
            return
        try:
            files = sorted(
                os.path.join(path, f) for f in os.listdir(path)
                if f.lower().endswith(SUPPORTED_EXTS)
            )
        except OSError as e:
            messagebox.showerror("エラー", str(e))
            return
        if not files:
            messagebox.showinfo("情報", "対応画像が見つかりません")
            return
        self.images = files
        self.idx = 0
        self._show_current()

    def _show_current(self):
        """現在のインデックスの画像を表示する"""
        if not self.images:
            return
        path = self.images[self.idx]
        try:
            if PIL_AVAILABLE:
                img = Image.open(path)
                img.thumbnail((720, 420))
                self._tk_img = ImageTk.PhotoImage(img)
            else:
                # 標準 tkinter は PNG/GIF のみ
                self._tk_img = tk.PhotoImage(file=path)
        except Exception as e:
            self.status.config(text=f"読込失敗: {os.path.basename(path)} ({e})")
            return
        self.canvas.delete("all")
        self.canvas.create_image(360, 210, image=self._tk_img)
        self.status.config(
            text=f"{self.idx + 1} / {len(self.images)}  {os.path.basename(path)}"
        )

    def next_img(self):
        """次の画像へ"""
        if not self.images:
            return
        self.idx = (self.idx + 1) % len(self.images)
        self._show_current()

    def prev_img(self):
        """前の画像へ"""
        if not self.images:
            return
        self.idx = (self.idx - 1) % len(self.images)
        self._show_current()

    def play(self):
        """自動再生を開始する"""
        if not self.images:
            messagebox.showinfo("情報", "先にフォルダを選択してください")
            return
        self.playing = True
        self._tick()

    def stop(self):
        """自動再生を停止する"""
        self.playing = False
        if self._after_id is not None:
            self.root.after_cancel(self._after_id)
            self._after_id = None

    def toggle(self):
        """再生/停止を切り替える"""
        if self.playing:
            self.stop()
        else:
            self.play()

    def _tick(self):
        """一定間隔で次の画像へ進める"""
        if not self.playing:
            return
        try:
            self.interval_ms = max(500, int(self.interval_var.get() * 1000))
        except (ValueError, tk.TclError):
            self.interval_ms = 3000
        self.next_img()
        self._after_id = self.root.after(self.interval_ms, self._tick)


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

5. コード解説

画像スライドショーのコードを、実際に書かれている実装に沿って解説します。

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

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

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

   新しいファイルを作成して app074.py と保存します。外部ライブラリ PIL を使います。先に pip install Pillow を実行してください。（import 名と pip のパッケージ名が異なる点に注意：PIL は Pillow でインストールします）

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

   App074 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("画像スライドショー")・geometry("760x601")・configure(bg="#f8f9fc")・minsize(760, 601) をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame・tk.Label×2・ttk.LabelFrame・ttk.Button×5・ttk.Label・ttk.Spinbox・tk.Canvas・tk.PhotoImage を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（choose_folder()・prev_img()・play()・stop()・next_img()）につなぎます。bind("<Left>", ...)・bind("<Right>", ...)・bind("<space>", ...) の登録も忘れずに。

6. 6
   中心になるメソッドを実装する

   アプリの本体である _tick()（10行）・choose_folder()（19行）・play()（7行）など を実装します。

7. 7
   動作確認する

   python app074.py で起動し、各ボタンが反応すること・キー操作（<Left>・<Right>・<space>）が効くことを確認します。

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。画像が3枚以上入ったフォルダを1つ用意すれば、どちらの課題も確かめられます（課題のために新しく入れるライブラリはありません）。Pillow を入れていない環境でも、コード上部の try / except ImportError により起動はできるので、tkinter が標準で読める PNG か GIF を入れておいてください。

1. 課題1：最後の画像まで来たら自動再生を止める

   自動再生はいま、最後まで行くと先頭に戻って延々と繰り返します。最後の画像を映したところで止まるようにしましょう。

   期待結果：画像5枚のフォルダを開き、1枚目から「▶ 再生」する。ステータスが 2 / 5 → 3 / 5 と進み、「5 / 5」で自動的に止まる（いまは 5 / 5 の次に 1 / 5 へ戻る）。

   合格条件

   • 「5 / 5」で自動再生が止まり、そのあとカウントが動かない
   • 手動の「次へ ▶」と → キーは、今までどおり 5 / 5 の次に 1 / 5 へ戻る
   • 止まったあと「◀ 前へ」で戻して「▶ 再生」すると、また進む

   ヒント①（どこを触るか）: 触るのは1か所です。_tick() の self.next_img() の前に判定を足します。next_img() そのものは触りません。
   ヒント②（使うもの）: self.idx は0から始まるので、最後の画像は len(self.images) - 1 です。if self.idx == len(self.images) - 1: なら self.stop() を呼んで return しましょう。stop() は playing を False にして、予約済みの after も after_cancel() で取り消してくれる仕組みです。
   つまずきやすい点: 判定を next_img() の側に書くと、「次へ ▶」ボタンと self.root.bind("<Right>", ...) の → キーまで最後で止まります。self.next_img() の後ろに置くと、最後の1枚を映した瞬間に止まるため、「5 / 5」が表示間隔のぶん残らずに終わります。止まる位置は同じでも、最後の画像を見る時間が無くなる点に注意してください。なお最後の画像を映した状態で「▶ 再生」を押すと、play() がすぐ _tick() を呼ぶため、その場で止まって何も起きないように見えます。

2. 課題2：再生中か停止中かをステータスに出す

   いまのステータスは「2 / 5 photo.jpg」だけで、自動再生が動いているのか止まっているのか分かりません。状態も一緒に出しましょう。

   期待結果：「▶ 再生」中は「2 / 5 photo.jpg ▶ 再生中」と出る。「■ 停止」を押すと、画像はそのままで同じ行が「2 / 5 photo.jpg ■ 停止中」に変わる。

   合格条件

   • フォルダを選んだ直後（まだ再生していない）は「■ 停止中」と出る
   • 自動再生中は画像が切り替わるたびに「▶ 再生中」が付いたままになる
   • スペースキーで再生と停止を切り替えても、表示が追いつく

   ヒント①（どこを触るか）: 触るのは2か所です。_show_current() の self.status.config(...) と、stop() の末尾です。
   ヒント②（使うもの）: state = "▶ 再生中" if self.playing else "■ 停止中" を作り、f 文字列の末尾に足します。stop() の最後で self._show_current() を呼べば、画像はそのままで文字だけ書き換わる仕組みです。
   つまずきやすい点: play() や stop() の中で self.status.config(...) を直接書くと、次の画像に進んだ瞬間に _show_current() が同じラベルを丸ごと上書きするので消えます。stop() に self._show_current() を足し忘れた場合は、止めても「▶ 再生中」が残ったままです。画像が切り替わらない＝ステータスも更新されないためで、エラーは出ません。

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

   処理結果をファイルに保存する機能を追加しましょう。