GUI

[Python Tkinter] 表示中の画像を切り替えする方法

2025-01-18更新日: 2025-01-18

PythonのTkinterで表示中の画像を切り替えるには、Labelウィジェットを使用し、PhotoImageオブジェクトを更新します。

まず、画像を表示するためにLabelを作成し、PhotoImageオブジェクトをLabelのimageプロパティに設定します。

画像を切り替える際は、新しいPhotoImageオブジェクトを作成し、Labelのconfigメソッドを使ってimageプロパティを更新します。

画像の参照がガベージコレクションで消えないように、変数に保持することが重要です。

目次から探す

Tkinterで画像を表示する基本
画像の切り替え方法
画像切り替えの応用例
画像のサイズ変更と調整
画像フォーマットの対応
まとめ

Tkinterで画像を表示する基本

Tkinterのインストールとセットアップ

TkinterはPythonに標準で付属しているGUIライブラリですが、環境によっては別途インストールが必要な場合があります。

以下の手順でインストールを行います。

Windows: Pythonをインストールすると自動的にTkinterもインストールされます。
macOS: PythonをHomebrewや公式サイトからインストールするとTkinterも含まれます。
Linux: 以下のコマンドでTkinterをインストールします。

sudo apt-get install python3-tk

インストール後、以下のコードを実行してTkinterが正しく動作するか確認します。

import tkinter as tk
root = tk.Tk()
root.title("Tkinterのテスト")
root.mainloop()

このコードを実行すると、空のウィンドウが表示されます。

Labelウィジェットを使った画像表示

Labelウィジェットは、画像やテキストを表示するための基本的なウィジェットです。

以下のコードで画像を表示する方法を示します。

import tkinter as tk
from tkinter import PhotoImage
root = tk.Tk()
root.title("画像表示")
# 画像を読み込む
image = PhotoImage(file="path/to/image.png")
# Labelウィジェットを作成し、画像を設定
label = tk.Label(root, image=image)
label.pack()
root.mainloop()

このコードを実行すると、指定した画像がウィンドウに表示されます。

PhotoImageクラスの使い方

PhotoImageクラスは、Tkinterで画像を扱うためのクラスです。

主にPNGやGIF形式の画像を扱うことができます。

以下のポイントに注意してください。

画像ファイルのパスを正しく指定すること。
画像を表示するためには、LabelウィジェットやCanvasウィジェットに設定する必要があります。

画像ファイルの読み込みと表示

画像ファイルを読み込む際は、ファイルのパスを正確に指定することが重要です。

以下のサンプルコードでは、画像を読み込み、表示する方法を示します。

import tkinter as tk
from tkinter import PhotoImage
root = tk.Tk()
root.title("画像表示")
# 画像を読み込む
image = PhotoImage(file="path/to/image.png")
# Labelウィジェットを作成し、画像を設定
label = tk.Label(root, image=image)
label.pack()
# ウィンドウを表示
root.mainloop()

このコードを実行すると、指定した画像がウィンドウに表示されます。

画像のパスを正しく設定することを忘れないでください。

画像の切り替え方法

Labelウィジェットのconfigメソッドを使う

Labelウィジェットのconfigメソッドを使用すると、表示中の画像を簡単に切り替えることができます。

以下のコードでは、ボタンをクリックすることで画像を切り替える方法を示します。

import tkinter as tk
from tkinter import PhotoImage
def change_image():
    # 画像を切り替える
    label.config(image=image2)
root = tk.Tk()
root.title("画像切り替え")
# 画像を読み込む
image1 = PhotoImage(file="path/to/image1.png")
image2 = PhotoImage(file="path/to/image2.png")
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=image1)
label.pack()
# ボタンを作成し、画像切り替え関数を設定
button = tk.Button(root, text="画像を切り替える", command=change_image)
button.pack()
root.mainloop()

このコードを実行すると、ボタンをクリックすることで画像が切り替わります。

PhotoImageオブジェクトの更新

PhotoImageオブジェクトを更新することで、表示する画像を変更することができます。

新しい画像を読み込んだ後、Labelウィジェットのconfigメソッドを使って更新します。

以下の例では、画像を切り替える際に新しいPhotoImageオブジェクトを作成しています。

import tkinter as tk
from tkinter import PhotoImage
def change_image():
    global current_image
    # 画像を切り替える
    if current_image == image1:
        current_image = image2
    else:
        current_image = image1
    label.config(image=current_image)
root = tk.Tk()
root.title("画像切り替え")
# 画像を読み込む
image1 = PhotoImage(file="path/to/image1.png")
image2 = PhotoImage(file="path/to/image2.png")
current_image = image1
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=current_image)
label.pack()
# ボタンを作成し、画像切り替え関数を設定
button = tk.Button(root, text="画像を切り替える", command=change_image)
button.pack()
root.mainloop()

画像の参照を保持する重要性

Tkinterでは、画像を表示するためにPhotoImageオブジェクトの参照を保持することが重要です。

参照を保持しないと、ガーベジコレクションによって画像が消えてしまう可能性があります。

上記の例では、current_imageという変数を使って現在の画像を保持しています。

ボタンを使った画像切り替えの実装

ボタンを使って画像を切り替える実装は非常にシンプルです。

以下のコードでは、ボタンをクリックすることで画像を切り替える方法を示しています。

import tkinter as tk
from tkinter import PhotoImage
def change_image():
    global current_image
    # 画像を切り替える
    if current_image == image1:
        current_image = image2
    else:
        current_image = image1
    label.config(image=current_image)
root = tk.Tk()
root.title("画像切り替え")
# 画像を読み込む
image1 = PhotoImage(file="path/to/image1.png")
image2 = PhotoImage(file="path/to/image2.png")
current_image = image1
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=current_image)
label.pack()
# ボタンを作成し、画像切り替え関数を設定
button = tk.Button(root, text="画像を切り替える", command=change_image)
button.pack()
root.mainloop()

このコードを実行すると、ボタンをクリックすることで画像が切り替わります。

キーボードイベントで画像を切り替える方法

キーボードイベントを使って画像を切り替えることも可能です。

以下のコードでは、特定のキーを押すことで画像を切り替える方法を示しています。

import tkinter as tk
from tkinter import PhotoImage
def change_image(event):
    global current_image
    # 画像を切り替える
    if current_image == image1:
        current_image = image2
    else:
        current_image = image1
    label.config(image=current_image)
root = tk.Tk()
root.title("画像切り替え")
# 画像を読み込む
image1 = PhotoImage(file="path/to/image1.png")
image2 = PhotoImage(file="path/to/image2.png")
current_image = image1
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=current_image)
label.pack()
# キーボードイベントをバインド
root.bind("<space>", change_image)  # スペースキーで画像を切り替え
root.mainloop()

このコードを実行すると、スペースキーを押すことで画像が切り替わります。

キーボードイベントを利用することで、よりインタラクティブなアプリケーションを作成できます。

画像切り替えの応用例

スライドショーの実装

スライドショーを実装するには、一定の時間間隔で画像を切り替える必要があります。

以下のコードでは、スライドショーを実現する方法を示します。

import tkinter as tk
from tkinter import PhotoImage
class Slideshow:
    def __init__(self, root, images, delay=2000):
        self.root = root
        self.images = images
        self.delay = delay
        self.current_image_index = 0
        self.label = tk.Label(root)
        self.label.pack()
        self.update_image()
    
    def update_image(self):
        image = PhotoImage(file=self.images[self.current_image_index])
        self.label.config(image=image)
        self.label.image = image  # 参照を保持
        self.current_image_index = (self.current_image_index + 1) % len(self.images)
        self.root.after(self.delay, self.update_image)
root = tk.Tk()
root.title("スライドショー")
images = ["path/to/image1.png", "path/to/image2.png", "path/to/image3.png"]
slideshow = Slideshow(root, images)
root.mainloop()

このコードを実行すると、指定した画像が2秒ごとに切り替わるスライドショーが表示されます。

タイマーを使った自動画像切り替え

タイマーを使って自動的に画像を切り替える方法は、スライドショーと似ていますが、特定の条件で切り替えを行うことも可能です。

以下の例では、ボタンを押すことで自動切り替えを開始します。

import tkinter as tk
from tkinter import PhotoImage
class AutoSlideshow:
    def __init__(self, root, images, delay=2000):
        self.root = root
        self.images = images
        self.delay = delay
        self.current_image_index = 0
        self.is_running = False
        self.label = tk.Label(root)
        self.label.pack()
        self.start_button = tk.Button(root, text="自動切り替え開始", command=self.start_slideshow)
        self.start_button.pack()
    def start_slideshow(self):
        self.is_running = True
        self.update_image()
    def update_image(self):
        if self.is_running:
            image = PhotoImage(file=self.images[self.current_image_index])
            self.label.config(image=image)
            self.label.image = image  # 参照を保持
            self.current_image_index = (self.current_image_index + 1) % len(self.images)
            self.root.after(self.delay, self.update_image)
root = tk.Tk()
root.title("自動画像切り替え")
images = ["path/to/image1.png", "path/to/image2.png", "path/to/image3.png"]
auto_slideshow = AutoSlideshow(root, images)
root.mainloop()

このコードを実行すると、ボタンをクリックすることで自動的に画像が切り替わります。

マウスイベントで画像を切り替える

マウスイベントを利用して画像を切り替えることもできます。

以下のコードでは、マウスクリックで画像を切り替える方法を示しています。

import tkinter as tk
from tkinter import PhotoImage
class MouseClickSlideshow:
    def __init__(self, root, images):
        self.root = root
        self.images = images
        self.current_image_index = 0
        self.label = tk.Label(root)
        self.label.pack()
        self.label.bind("<Button-1>", self.change_image)  # 左クリックで画像を切り替え
        self.update_image()
    def update_image(self):
        image = PhotoImage(file=self.images[self.current_image_index])
        self.label.config(image=image)
        self.label.image = image  # 参照を保持
    def change_image(self, event):
        self.current_image_index = (self.current_image_index + 1) % len(self.images)
        self.update_image()
root = tk.Tk()
root.title("マウスイベントで画像切り替え")
images = ["path/to/image1.png", "path/to/image2.png", "path/to/image3.png"]
mouse_click_slideshow = MouseClickSlideshow(root, images)
root.mainloop()

このコードを実行すると、ウィンドウをクリックすることで画像が切り替わります。

画像のフェードイン・フェードアウト効果を実装する

画像の切り替えにフェードイン・フェードアウト効果を加えることで、より滑らかな表示が可能になります。

以下のコードでは、フェード効果を実装しています。

import tkinter as tk
from tkinter import PhotoImage
class FadeSlideshow:
    def __init__(self, root, images, delay=2000):
        self.root = root
        self.images = images
        self.delay = delay
        self.current_image_index = 0
        self.label = tk.Label(root)
        self.label.pack()
        self.label.bind("<Button-1>", self.fade_out)
        self.update_image()
    def update_image(self):
        image = PhotoImage(file=self.images[self.current_image_index])
        self.label.config(image=image)
        self.label.image = image  # 参照を保持
    def fade_out(self, event):
        for i in range(100, -1, -5):
            self.label.config(bg=f'#{i:02x}{i:02x}{i:02x}')  # グレーのフェードアウト
            self.root.update()
            self.root.after(20)
        self.current_image_index = (self.current_image_index + 1) % len(self.images)
        self.update_image()
        self.fade_in()
    def fade_in(self):
        for i in range(0, 101, 5):
            self.label.config(bg=f'#{i:02x}{i:02x}{i:02x}')  # グレーのフェードイン
            self.root.update()
            self.root.after(20)
root = tk.Tk()
root.title("フェードイン・フェードアウト")
images = ["path/to/image1.png", "path/to/image2.png", "path/to/image3.png"]
fade_slideshow = FadeSlideshow(root, images)
root.mainloop()

このコードを実行すると、画像がフェードイン・フェードアウトしながら切り替わります。

複数の画像をランダムに切り替える

複数の画像をランダムに切り替えることも可能です。

以下のコードでは、ボタンをクリックすることでランダムに画像を切り替える方法を示しています。

import tkinter as tk
from tkinter import PhotoImage
import random
class RandomImageSlideshow:
    def __init__(self, root, images):
        self.root = root
        self.images = images
        self.label = tk.Label(root)
        self.label.pack()
        self.button = tk.Button(root, text="ランダムに画像を切り替える", command=self.change_image)
        self.button.pack()
        self.update_image()
    def update_image(self):
        image = PhotoImage(file=random.choice(self.images))
        self.label.config(image=image)
        self.label.image = image  # 参照を保持
    def change_image(self):
        self.update_image()
root = tk.Tk()
root.title("ランダム画像切り替え")
images = ["path/to/image1.png", "path/to/image2.png", "path/to/image3.png"]
random_image_slideshow = RandomImageSlideshow(root, images)
root.mainloop()

このコードを実行すると、ボタンをクリックすることでランダムに画像が切り替わります。

ランダム性を加えることで、よりダイナミックな表示が可能になります。

画像のサイズ変更と調整

PhotoImageのリサイズ方法

PhotoImageクラス自体にはリサイズ機能はありませんが、画像を表示する際にウィジェットのサイズを調整することで、見た目上のリサイズを実現できます。

以下のコードでは、Labelウィジェットのサイズを指定して画像を表示します。

import tkinter as tk
from tkinter import PhotoImage
root = tk.Tk()
root.title("画像リサイズ")
# 画像を読み込む
image = PhotoImage(file="path/to/image.png")
# Labelウィジェットを作成し、サイズを指定
label = tk.Label(root, image=image, width=200, height=200)  # 幅200px、高さ200px
label.pack()
root.mainloop()

このコードを実行すると、指定したサイズで画像が表示されますが、元のアスペクト比は保持されません。

PIL(Pillow)を使った画像のリサイズ

PIL(Pillow)は、Pythonで画像を扱うための強力なライブラリです。

Pillowを使うことで、画像のリサイズやフォーマット変換が簡単に行えます。

以下のコードでは、Pillowを使って画像をリサイズする方法を示します。

import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
root.title("Pillowで画像リサイズ")
# 画像を読み込む
original_image = Image.open("path/to/image.png")
resized_image = original_image.resize((200, 200))  # 幅200px、高さ200px
image = ImageTk.PhotoImage(resized_image)
# Labelウィジェットを作成し、リサイズした画像を設定
label = tk.Label(root, image=image)
label.pack()
root.mainloop()

このコードを実行すると、Pillowを使ってリサイズされた画像が表示されます。

ウィンドウサイズに合わせた画像の自動調整

ウィンドウのサイズに合わせて画像を自動的に調整することも可能です。

以下のコードでは、ウィンドウサイズに応じて画像をリサイズする方法を示しています。

import tkinter as tk
from PIL import Image, ImageTk
def resize_image(event):
    # ウィンドウサイズに合わせて画像をリサイズ
    new_size = (event.width, event.height)
    resized_image = original_image.resize(new_size)
    image = ImageTk.PhotoImage(resized_image)
    label.config(image=image)
    label.image = image  # 参照を保持
root = tk.Tk()
root.title("ウィンドウサイズに合わせた画像調整")
# 画像を読み込む
original_image = Image.open("path/to/image.png")
image = ImageTk.PhotoImage(original_image)
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=image)
label.pack(fill=tk.BOTH, expand=True)
# ウィンドウサイズ変更イベントをバインド
root.bind("<Configure>", resize_image)
root.mainloop()

このコードを実行すると、ウィンドウのサイズが変更されるたびに画像が自動的にリサイズされます。

画像のアスペクト比を保つ方法

画像のアスペクト比を保ちながらリサイズするには、元の画像の比率を計算し、それに基づいて新しいサイズを決定する必要があります。

以下のコードでは、アスペクト比を保ちながら画像をリサイズする方法を示しています。

import tkinter as tk
from PIL import Image, ImageTk
def resize_image(event):
    # ウィンドウサイズに合わせてアスペクト比を保ちながら画像をリサイズ
    width_ratio = event.width / original_image.width
    height_ratio = event.height / original_image.height
    ratio = min(width_ratio, height_ratio)
    new_size = (int(original_image.width * ratio), int(original_image.height * ratio))
    resized_image = original_image.resize(new_size)
    image = ImageTk.PhotoImage(resized_image)
    label.config(image=image)
    label.image = image  # 参照を保持
root = tk.Tk()
root.title("アスペクト比を保つ画像調整")
# 画像を読み込む
original_image = Image.open("path/to/image.png")
image = ImageTk.PhotoImage(original_image)
# Labelウィジェットを作成し、初期画像を設定
label = tk.Label(root, image=image)
label.pack(fill=tk.BOTH, expand=True)
# ウィンドウサイズ変更イベントをバインド
root.bind("<Configure>", resize_image)
root.mainloop()

このコードを実行すると、ウィンドウのサイズが変更されるたびに、アスペクト比を保ちながら画像がリサイズされます。

これにより、画像が歪むことなく表示されます。

画像フォーマットの対応

PhotoImageがサポートするフォーマット

PhotoImageクラスは、Tkinterで使用できる画像フォーマットに制限があります。

具体的には、以下のフォーマットがサポートされています。

フォーマット	説明
GIF	アニメーションも可能なフォーマット
PNG	透過情報を持つフォーマット
PPM/PGM	一般的な画像フォーマット

PhotoImageはこれらのフォーマットを直接扱うことができますが、JPEGやBMPなどの他のフォーマットはサポートされていません。

PIL(Pillow)を使って他のフォーマットを読み込む

PIL(Pillow)ライブラリを使用することで、JPEGやBMPなどの他の画像フォーマットを簡単に読み込むことができます。

以下のコードでは、Pillowを使ってJPEG画像を読み込み、Tkinterで表示する方法を示しています。

import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
root.title("JPEG画像の表示")
# JPEG画像を読み込む
image = Image.open("path/to/image.jpg")
photo = ImageTk.PhotoImage(image)
# Labelウィジェットを作成し、画像を設定
label = tk.Label(root, image=photo)
label.pack()
root.mainloop()

このコードを実行すると、指定したJPEG画像がTkinterウィンドウに表示されます。

透過PNG画像の表示方法

透過PNG画像を表示する場合も、Pillowを使用することで簡単に実現できます。

以下のコードでは、透過PNG画像をTkinterで表示する方法を示しています。

import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
root.title("透過PNG画像の表示")
# 透過PNG画像を読み込む
image = Image.open("path/to/image_with_transparency.png")
photo = ImageTk.PhotoImage(image)
# Labelウィジェットを作成し、画像を設定
label = tk.Label(root, image=photo)
label.pack()
root.mainloop()

このコードを実行すると、透過PNG画像が正しく表示され、背景が透けて見えることが確認できます。

GIFアニメーションの表示と制御

GIFアニメーションを表示するには、PhotoImageを使用してアニメーションフレームを管理する必要があります。

以下のコードでは、GIFアニメーションを表示し、制御する方法を示しています。

import tkinter as tk
from tkinter import PhotoImage
class GifAnimation:
    def __init__(self, root, gif_path):
        self.root = root
        self.gif_path = gif_path
        self.frames = []
        self.current_frame = 0
        # GIFのフレームを読み込む
        self.load_gif()
        self.label = tk.Label(root)
        self.label.pack()
        self.update_frame()
    def load_gif(self):
        # GIFの各フレームを読み込む
        gif = PhotoImage(file=self.gif_path)
        for i in range(gif.n_frames):
            gif.seek(i)
            self.frames.append(gif.copy())
    def update_frame(self):
        # 現在のフレームを表示
        frame = self.frames[self.current_frame]
        self.label.config(image=frame)
        self.label.image = frame  # 参照を保持
        self.current_frame = (self.current_frame + 1) % len(self.frames)
        self.root.after(100, self.update_frame)  # 100msごとにフレームを更新
root = tk.Tk()
root.title("GIFアニメーション")
gif_animation = GifAnimation(root, "path/to/animation.gif")
root.mainloop()