GUI

[Python Tkinter] ボタンを画像に変更する方法

PythonのTkinterライブラリでは、ボタンウィジェットに画像を表示するために、Buttonウィジェットのimageオプションを使用します。

まず、PhotoImageクラスを使って画像を読み込み、その画像オブジェクトをButtonのimage引数に渡します。

画像はPNGやGIF形式がサポートされています。

JPEGなど他の形式を使用する場合は、Pillowライブラリを使って画像を読み込むことができます。

目次から探す

Tkinterでボタンに画像を設定する基本
画像形式と互換性
画像付きボタンのイベント処理
画像付きボタンのデザインカスタマイズ
応用例：画像付きボタンを使ったGUIアプリケーション
まとめ

Tkinterでボタンに画像を設定する基本

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

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

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

Windows: Pythonをインストールすると自動的にTkinterもインストールされます。
macOS: PythonをHomebrewでインストールする場合、Tkinterも自動的にインストールされます。
Linux: 以下のコマンドでTkinterをインストールします。

sudo apt-get install python3-tk

Buttonウィジェットの基本構造

TkinterのButtonウィジェットは、ユーザーがクリックできるボタンを作成するためのウィジェットです。

基本的な構造は以下の通りです。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
button = tk.Button(root, text="クリックしてね")  # ボタンの作成
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、「クリックしてね」というテキストが表示されたボタンが作成されます。

PhotoImageクラスを使った画像の読み込み

PhotoImageクラスを使用すると、画像ファイルをTkinterで扱うことができます。

以下のように画像を読み込むことができます。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み

ここで、image.pngは同じディレクトリにある画像ファイルの名前です。

Buttonウィジェットに画像を設定する方法

ボタンに画像を設定するには、imageオプションを使用します。

以下のコードで画像付きボタンを作成できます。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image)  # 画像付きボタンの作成
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、指定した画像が表示されたボタンが作成されます。

画像付きボタンのサイズ調整

画像付きボタンのサイズは、画像のサイズに自動的に合わせられますが、必要に応じてwidthやheightオプションを使ってサイズを調整することもできます。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, width=100, height=50)  # サイズを指定
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

画像とテキストを同時に表示する方法

ボタンに画像とテキストを同時に表示するには、compoundオプションを使用します。

以下のコードでは、画像の上にテキストを表示します。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, text="クリック", compound="top")  # 画像とテキストを同時に表示
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、画像の上に「クリック」というテキストが表示されたボタンが作成されます。

画像形式と互換性

Tkinterでサポートされている画像形式

TkinterのPhotoImageクラスは、以下の画像形式をサポートしています。

画像形式	説明
GIF	アニメーションも可能な形式
PNG	透過情報を持つ形式
PPM/PGM	簡易な画像形式

これらの形式は、Tkinterの標準機能で直接扱うことができますが、JPEGやBMPなどの他の形式は直接サポートされていません。

Pillowライブラリを使ったJPEGなどの画像形式のサポート

JPEGやBMPなどの画像形式を扱うためには、Pillowライブラリを使用する必要があります。

PillowはPython Imaging Library(PIL)のフォークで、さまざまな画像形式をサポートしています。

これにより、TkinterでJPEGやBMP画像を簡単に扱うことができます。

Pillowのインストール方法

Pillowライブラリは、以下のコマンドを使用して簡単にインストールできます。

pip install Pillow

このコマンドを実行することで、Pillowがインストールされ、TkinterでJPEGやBMPなどの画像形式を扱えるようになります。

Pillowを使った画像の読み込みと表示

Pillowを使用して画像を読み込み、Tkinterのウィジェットに表示する方法は以下の通りです。

import tkinter as tk
from PIL import Image, ImageTk  # Pillowから必要なクラスをインポート
root = tk.Tk()  # メインウィンドウの作成
image = Image.open("image.jpg")  # JPEG画像の読み込み
photo = ImageTk.PhotoImage(image)  # Tkinter用に変換
button = tk.Button(root, image=photo)  # 画像付きボタンの作成
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、指定したJPEG画像が表示されたボタンが作成されます。

Pillowを使うことで、JPEGやBMPなどの画像形式も簡単に扱えるようになります。

画像付きボタンのイベント処理

ボタンにクリックイベントを設定する方法

Tkinterでは、ボタンにクリックイベントを設定するためにcommandオプションを使用します。

以下のコードでは、ボタンがクリックされたときにメッセージを表示するイベントを設定しています。

import tkinter as tk
def on_button_click():
    print("ボタンがクリックされました！")  # クリック時の処理
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, command=on_button_click)  # クリックイベントを設定
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、ボタンがクリックされたときに「ボタンがクリックされました！」というメッセージがコンソールに表示されます。

画像付きボタンの状態変更(有効/無効)

ボタンの状態を変更するには、configメソッドを使用してstateオプションを設定します。

以下のコードでは、ボタンを無効にする例を示します。

import tkinter as tk
def disable_button():
    button.config(state=tk.DISABLED)  # ボタンを無効にする
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, command=disable_button)  # クリック時にボタンを無効にする
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、ボタンがクリックされると無効になり、再度クリックできなくなります。

ボタンのホバー時に画像を変更する方法

ボタンにマウスがホバーしたときに画像を変更するには、bindメソッドを使用してイベントを設定します。

以下のコードでは、ホバー時に画像を変更する例を示します。

import tkinter as tk
def on_enter(event):
    button.config(image=hover_image)  # ホバー時の画像に変更
def on_leave(event):
    button.config(image=normal_image)  # 通常の画像に戻す
root = tk.Tk()  # メインウィンドウの作成
normal_image = tk.PhotoImage(file="normal.png")  # 通常の画像の読み込み
hover_image = tk.PhotoImage(file="hover.png")  # ホバー時の画像の読み込み
button = tk.Button(root, image=normal_image)  # 通常の画像付きボタンの作成
button.pack()  # ボタンをウィンドウに配置
# ホバーイベントのバインド
button.bind("<Enter>", on_enter)  # マウスがボタンに入ったとき
button.bind("<Leave>", on_leave)  # マウスがボタンから出たとき
root.mainloop()  # メインループの開始

このコードを実行すると、ボタンにマウスがホバーすると画像が変更され、マウスが離れると元の画像に戻ります。

ボタンのクリック時に画像を変更する方法

ボタンがクリックされたときに画像を変更するには、クリックイベント内で画像を設定します。

以下のコードでは、ボタンがクリックされたときに画像を変更する例を示します。

import tkinter as tk
def change_image():
    button.config(image=clicked_image)  # クリック時の画像に変更
root = tk.Tk()  # メインウィンドウの作成
normal_image = tk.PhotoImage(file="normal.png")  # 通常の画像の読み込み
clicked_image = tk.PhotoImage(file="clicked.png")  # クリック時の画像の読み込み
button = tk.Button(root, image=normal_image, command=change_image)  # クリック時に画像を変更
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、ボタンがクリックされると画像が変更されます。

これにより、ユーザーに対して視覚的なフィードバックを提供することができます。

画像付きボタンのデザインカスタマイズ

ボタンの背景色と画像の調整

Tkinterでは、ボタンの背景色をbgオプションで設定できます。

また、画像の表示位置を調整するためにcompoundオプションを使用します。

以下のコードでは、ボタンの背景色を青に設定し、画像を上部に配置しています。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, bg="blue", compound="top")  # 背景色と画像の位置を設定
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、青い背景のボタンに画像が上部に表示されます。

ボタンの枠線とパディングの設定

ボタンの枠線の太さやパディングを設定するには、borderwidthやpadx、padyオプションを使用します。

以下のコードでは、ボタンの枠線を2ピクセルに設定し、左右に10ピクセル、上下に5ピクセルのパディングを追加しています。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image, borderwidth=2, padx=10, pady=5)  # 枠線とパディングを設定
button.pack()  # ボタンをウィンドウに配置
root.mainloop()  # メインループの開始

このコードを実行すると、指定した枠線とパディングが適用されたボタンが表示されます。

ボタンの配置とレイアウト調整(pack, grid, place)

Tkinterでは、ボタンの配置方法としてpack、grid、placeの3つのメソッドがあります。

それぞれの使い方を以下に示します。

pack: 簡単にウィジェットを配置できます。
grid: 行と列を指定して配置できます。
place: 絶対座標で配置できます。

以下のコードでは、gridメソッドを使用してボタンを配置しています。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image = tk.PhotoImage(file="image.png")  # 画像の読み込み
button = tk.Button(root, image=image)  # 画像付きボタンの作成
button.grid(row=0, column=0, padx=5, pady=5)  # gridメソッドで配置
root.mainloop()  # メインループの開始

このコードを実行すると、指定した行と列にボタンが配置されます。

複数の画像付きボタンを並べる方法

複数の画像付きボタンを並べるには、gridメソッドやpackメソッドを使って配置します。

以下のコードでは、gridメソッドを使用して2つのボタンを並べています。

import tkinter as tk
root = tk.Tk()  # メインウィンドウの作成
image1 = tk.PhotoImage(file="image1.png")  # 1つ目の画像の読み込み
image2 = tk.PhotoImage(file="image2.png")  # 2つ目の画像の読み込み
button1 = tk.Button(root, image=image1)  # 1つ目の画像付きボタンの作成
button2 = tk.Button(root, image=image2)  # 2つ目の画像付きボタンの作成
button1.grid(row=0, column=0, padx=5, pady=5)  # 1つ目のボタンを配置
button2.grid(row=0, column=1, padx=5, pady=5)  # 2つ目のボタンを配置
root.mainloop()  # メインループの開始

このコードを実行すると、2つの画像付きボタンが横に並んで表示されます。

padxやpadyオプションを使ってボタン間のスペースを調整することもできます。

応用例：画像付きボタンを使ったGUIアプリケーション

画像付きボタンを使った簡単な電卓アプリ

以下のコードは、画像付きボタンを使った簡単な電卓アプリの例です。

このアプリでは、数字と演算子のボタンを画像で表示し、計算結果を表示します。

import tkinter as tk
def button_click(value):
    current = entry.get()
    entry.delete(0, tk.END)
    entry.insert(0, current + str(value))
def calculate():
    try:
        result = eval(entry.get())  # 入力された式を計算
        entry.delete(0, tk.END)
        entry.insert(0, result)
    except Exception as e:
        entry.delete(0, tk.END)
        entry.insert(0, "エラー")
root = tk.Tk()  # メインウィンドウの作成
entry = tk.Entry(root)  # 入力フィールドの作成
entry.pack()
# 数字ボタンの作成
for i in range(1, 10):
    button = tk.Button(root, text=str(i), command=lambda i=i: button_click(i))
    button.pack(side=tk.LEFT)
# 演算子ボタンの作成
operators = ['+', '-', '*', '/']
for op in operators:
    button = tk.Button(root, text=op, command=lambda op=op: button_click(op))
    button.pack(side=tk.LEFT)
# 計算ボタンの作成
calc_button = tk.Button(root, text="=", command=calculate)
calc_button.pack(side=tk.LEFT)
root.mainloop()  # メインループの開始

このコードを実行すると、数字と演算子のボタンが表示され、計算が可能な電卓アプリが作成されます。

画像付きボタンを使ったゲームメニューの作成

以下のコードは、画像付きボタンを使ったシンプルなゲームメニューの例です。

このメニューでは、ゲームの開始や終了のボタンを画像で表示します。

import tkinter as tk
def start_game():
    print("ゲームを開始します！")  # ゲーム開始の処理
def exit_game():
    root.quit()  # アプリケーションを終了
root = tk.Tk()  # メインウィンドウの作成
# ゲーム開始ボタンの作成
start_image = tk.PhotoImage(file="start.png")  # 開始ボタンの画像
start_button = tk.Button(root, image=start_image, command=start_game)
start_button.pack()
# ゲーム終了ボタンの作成
exit_image = tk.PhotoImage(file="exit.png")  # 終了ボタンの画像
exit_button = tk.Button(root, image=exit_image, command=exit_game)
exit_button.pack()
root.mainloop()  # メインループの開始

このコードを実行すると、ゲームの開始と終了のボタンが表示され、クリックすることでそれぞれの処理が実行されます。

画像付きボタンを使ったツールバーの作成

以下のコードは、画像付きボタンを使ったツールバーの例です。

このツールバーでは、ファイルの新規作成や保存、印刷などの機能を画像ボタンで提供します。

import tkinter as tk
def new_file():
    print("新しいファイルを作成します。")  # 新規作成の処理
def save_file():
    print("ファイルを保存します。")  # 保存の処理
def print_file():
    print("ファイルを印刷します。")  # 印刷の処理
root = tk.Tk()  # メインウィンドウの作成
# ツールバーの作成
toolbar = tk.Frame(root)
toolbar.pack()
# 新規作成ボタンの作成
new_image = tk.PhotoImage(file="new.png")  # 新規作成ボタンの画像
new_button = tk.Button(toolbar, image=new_image, command=new_file)
new_button.pack(side=tk.LEFT)
# 保存ボタンの作成
save_image = tk.PhotoImage(file="save.png")  # 保存ボタンの画像
save_button = tk.Button(toolbar, image=save_image, command=save_file)
save_button.pack(side=tk.LEFT)
# 印刷ボタンの作成
print_image = tk.PhotoImage(file="print.png")  # 印刷ボタンの画像
print_button = tk.Button(toolbar, image=print_image, command=print_file)
print_button.pack(side=tk.LEFT)
root.mainloop()  # メインループの開始

このコードを実行すると、ツールバーに新規作成、保存、印刷のボタンが表示され、それぞれの機能が実行されます。

画像付きボタンを使ったナビゲーションメニューの作成

以下のコードは、画像付きボタンを使ったナビゲーションメニューの例です。

このメニューでは、異なるセクションへの移動を画像ボタンで提供します。

import tkinter as tk
def go_to_section1():
    print("セクション1に移動します。")  # セクション1への移動処理
def go_to_section2():
    print("セクション2に移動します。")  # セクション2への移動処理
root = tk.Tk()  # メインウィンドウの作成
# ナビゲーションメニューの作成
nav_frame = tk.Frame(root)
nav_frame.pack()
# セクション1ボタンの作成
section1_image = tk.PhotoImage(file="section1.png")  # セクション1ボタンの画像
section1_button = tk.Button(nav_frame, image=section1_image, command=go_to_section1)
section1_button.pack(side=tk.LEFT)
# セクション2ボタンの作成
section2_image = tk.PhotoImage(file="section2.png")  # セクション2ボタンの画像
section2_button = tk.Button(nav_frame, image=section2_image, command=go_to_section2)
section2_button.pack(side=tk.LEFT)
root.mainloop()  # メインループの開始

このコードを実行すると、ナビゲーションメニューにセクション1とセクション2へのボタンが表示され、それぞれのセクションに移動する処理が実行されます。