画像ビューアー

1. アプリ概要

画像ファイルを開いてウィンドウに表示するビューアー。PIL/Pillowの基本的な使い方を学びます。

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

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

動かしながら読むことが理解の最短経路です。まずはコードをコピーして実行し、想定どおりに動くことを確認したうえで解説と照らし合わせてください。

カスタマイズでは「機能追加」「UI 改善」「エラー耐性」の三方向で考えると視野が広がります。練習問題にもそれぞれの方向の具体例を用意しています。

2. 機能一覧

• 「📂 開く」ボタン（open_image()）・「🔍+」ボタン（change_zoom()）・「🔍-」ボタン（change_zoom()）・「原寸」ボタン（set_zoom()）・「フィット」ボタン（fit_to_window()）で操作
• マウス操作 <MouseWheel> から _on_mousewheel() を実行
• filedialog.askopenfilename() によるファイル選択ダイアログ
• ウィンドウはタイトル「画像ビューアー」・サイズ 640x520 で起動

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 tkinter as tk
from tkinter import ttk, messagebox, filedialog
from PIL import Image, ImageTk


class App28:
    """画像ビューアー"""

    def __init__(self, root):
        self.root = root
        self.root.title("画像ビューアー")
        self.root.geometry("640x520")
        self.root.configure(bg="#222")
        self.image = None
        self.photo = None
        self.zoom = 1.0
        self._build_ui()

    def _build_ui(self):
        # ツールバー
        toolbar = tk.Frame(self.root, bg="#333", pady=6)
        toolbar.pack(fill=tk.X)
        ttk.Button(toolbar, text="📂 開く", command=self.open_image).pack(side=tk.LEFT, padx=6)
        ttk.Button(toolbar, text="🔍+", command=lambda: self.change_zoom(1.2)).pack(side=tk.LEFT, padx=2)
        ttk.Button(toolbar, text="🔍-", command=lambda: self.change_zoom(0.8)).pack(side=tk.LEFT, padx=2)
        ttk.Button(toolbar, text="原寸", command=lambda: self.set_zoom(1.0)).pack(side=tk.LEFT, padx=2)
        ttk.Button(toolbar, text="フィット", command=self.fit_to_window).pack(side=tk.LEFT, padx=2)
        self.info_label = tk.Label(toolbar, text="画像を開いてください",
                                   bg="#333", fg="#aaa", font=("Noto Sans JP", 10))
        self.info_label.pack(side=tk.LEFT, padx=12)

        # スクロール付きキャンバス
        canvas_frame = tk.Frame(self.root, bg="#222")
        canvas_frame.pack(fill=tk.BOTH, expand=True)

        self.canvas = tk.Canvas(canvas_frame, bg="#222", cursor="crosshair")
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

        v_sb = ttk.Scrollbar(canvas_frame, orient=tk.VERTICAL, command=self.canvas.yview)
        v_sb.pack(side=tk.RIGHT, fill=tk.Y)
        h_sb = ttk.Scrollbar(self.root, orient=tk.HORIZONTAL, command=self.canvas.xview)
        h_sb.pack(fill=tk.X)
        self.canvas.configure(xscrollcommand=h_sb.set, yscrollcommand=v_sb.set)
        self.canvas.bind("<MouseWheel>", self._on_mousewheel)

    def open_image(self):
        path = filedialog.askopenfilename(
            filetypes=[("画像ファイル", "*.png *.jpg *.jpeg *.gif *.bmp *.webp"),
                       ("全てのファイル", "*.*")])
        if not path:
            return
        self.image = Image.open(path)
        self.zoom = 1.0
        self._show_image()
        w, h = self.image.size
        self.info_label.config(
            text=f"{w} × {h} px  |  {self.image.mode}  |  {path.split('/')[-1]}")

    def _show_image(self):
        if not self.image:
            return
        w, h = self.image.size
        new_w, new_h = int(w * self.zoom), int(h * self.zoom)
        resized = self.image.resize((new_w, new_h), Image.LANCZOS)
        self.photo = ImageTk.PhotoImage(resized)
        self.canvas.delete("all")
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.photo)
        self.canvas.configure(scrollregion=(0, 0, new_w, new_h))

    def change_zoom(self, factor):
        self.zoom = max(0.05, min(self.zoom * factor, 10.0))
        self._show_image()

    def set_zoom(self, zoom):
        self.zoom = zoom
        self._show_image()

    def fit_to_window(self):
        if not self.image:
            return
        cw = self.canvas.winfo_width()
        ch = self.canvas.winfo_height()
        iw, ih = self.image.size
        self.zoom = min(cw / iw, ch / ih)
        self._show_image()

    def _on_mousewheel(self, event):
        factor = 1.1 if event.delta > 0 else 0.9
        self.change_zoom(factor)


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

5. コード解説

画像ビューアーのコードを、実際に書かれている実装に沿って解説します。

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

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

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

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

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

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

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

   title("画像ビューアー")・geometry("640x520")・configure(bg="#222") をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（open_image()・change_zoom()・change_zoom()・set_zoom()・fit_to_window()）につなぎます。bind("<MouseWheel>", ...) の登録も忘れずに。

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

   アプリの本体である open_image()（12行）・fit_to_window()（8行）・change_zoom()（3行）など を実装します。

7. 7
   動作確認する

   python app28.py で起動し、各ボタンが反応すること・マウス操作（クリック・ホイールなど）が効くことを確認します。

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。

1. 課題1：画像でないファイルを開いたときに知らせる

   ファイル選択で「全てのファイル」に切り替えると、テキストファイルなども選べてしまいます。読み込めないときは警告を出して、表示中の画像を守りましょう。

   期待結果：.txt ファイルを開くと警告「画像として開けませんでした」が出て、直前の画像が消えずに残る。いまは画面が変わらず、コンソールに PIL.UnidentifiedImageError が出るだけ。

   合格条件

   • 画像でないファイルを選ぶと警告ダイアログが出る
   • 警告のあとも、前に開いていた画像がそのまま表示されている
   • 「キャンセル」を押したときは、これまでどおり何も出ない

   ヒント①（どこを触るか）: 触るのは open_image() の1か所です。self.image = Image.open(path) を try: で囲みます。messagebox は2行目の from tkinter import ttk, messagebox, filedialog で読み込み済みです。
   ヒント②（使うもの）: try: の中では img = Image.open(path) と別の名前で受け、成功したときだけ self.image = img に入れます。except では警告を出したあと return します（open_image() 冒頭の if not path: と同じ形です）。return を忘れると、下の w, h = self.image.size まで進んでしまい、1枚も開いていないときは AttributeError になります。受け取る例外は except OSError: で足ります（UnidentifiedImageError は OSError を継承しています）。
   つまずきやすい点: Image.open() はヘッダだけを読む遅延読み込みです。そのため途中で壊れた JPEG は open() を素通りし、_show_image() の self.image.resize(...) を通るときに OSError: image file is truncated が出ます。壊れたファイルまで拾いたいときは、try: の範囲を self._show_image() の呼び出しまで広げてください。

2. 課題2：いま何倍で表示しているかを出す

   拡大と縮小を繰り返すと、いまの倍率が分からなくなります。ツールバーに倍率を出して、原寸との違いが見えるようにしましょう。

   期待結果：画像を開くと「100%」と出る。🔍+ を1回押すと「120%」、もう1回押すと「144%」に変わる。

   合格条件

   • 画像を開いた直後は 100% と出る
   • 🔍+ を2回押すと 144%、「原寸」で 100% に戻る
   • 「フィット」を押すと、窓に合わせた倍率が出る

   ヒント①（どこを触るか）: 触るのは2か所です。_build_ui() で self.info_label を作っている下に倍率用のラベルを足し、_show_image() の末尾で書き換えます。
   ヒント②（使うもの）: ラベルは self.zoom_label = tk.Label(toolbar, text="100%", bg="#333", fg="#aaa") のように作り、.pack(side=tk.LEFT, padx=12) は次の行に分けます。書き換えは self.zoom_label.config(text=f"{self.zoom * 100:.0f}%") です。
   つまずきやすい点: self.zoom_label = tk.Label(...).pack(...) と1行にまとめると、pack() の戻り値の None が入って AttributeError になります。また _show_image() は画像が無いと先頭で return するので、画像を開く前に「原寸」を押しても表示は変わりません。倍率は change_zoom() の max(0.05, min(self.zoom * factor, 10.0)) で頭打ちになるため、上限は 1000% です。

3. 課題3：新しいボタンを追加する

   既存のボタンと同じ書き方で新しいボタンを1つ足し、押されたときに動くメソッドを自作してみましょう。ボタンの作成と command= の接続がセットで身に付きます。