初心者向け No.38
HEXカラーコード変換
HEXカラーコード⇔RGB変換ツール。入力値の検証と色プレビュー機能の実装を学びます。
📋 目次
1. アプリ概要
HEXカラーコード⇔RGB変換ツール。入力値の検証と色プレビュー機能の実装を学びます。
このアプリは変換カテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★☆☆ です。
Pythonでは tkinter を使うことで、クロスプラットフォームなGUIアプリを簡単に作成できます。このアプリを通じて、ウィジェットの配置・イベント処理・データ管理など、GUI開発の実践的なスキルを習得できます。
ソースコードは完全な動作状態で提供しており、コピーしてそのまま実行できます。まずは実行して動作を確認し、その後コードを読んで仕組みを理解していきましょう。カスタマイズセクションでは機能拡張のアイデアも紹介しています。
GUIアプリ開発は、プログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。アプリを作ることで、変数・関数・クラス・イベント処理など、プログラミングの重要な概念が自然と身についていきます。このアプリをきっかけに、オリジナルアプリの開発にも挑戦してみてください。
2. 機能一覧
- HEXカラーコード変換のメイン機能
- 直感的なGUIインターフェース
- 入力値のバリデーション
- エラーハンドリング
- 結果の見やすい表示
- キーボードショートカット対応
3. 事前準備・環境
動作確認環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
4. 完全なソースコード
コードのコピー方法
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
app38.py
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
5. コード解説
HEXカラーコード変換のコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。
クラス設計とコンストラクタ
App38クラスにアプリの全機能をまとめています。__init__メソッドでウィンドウの基本設定を行い、_build_ui()でUI構築、process()でメイン処理を担当します。この分離により、各メソッドの責任が明確になりコードが読みやすくなります。
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
LabelFrameによるセクション分け
ttk.LabelFrame を使うことで、入力エリアと結果エリアを視覚的に分けられます。padding引数でフレーム内の余白を設定し、見やすいレイアウトを実現しています。
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
Entryウィジェットとイベントバインド
ttk.Entryで入力フィールドを作成します。bind('
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
Textウィジェットでの結果表示
結果表示にはtk.Textウィジェットを使います。state=tk.DISABLEDでユーザーが直接編集できないようにし、表示前にNORMALに切り替えてからinsert()で内容を更新します。
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
例外処理とmessagebox
try-except で ValueError と Exception を捕捉し、messagebox.showerror() でユーザーにわかりやすいエラーメッセージを表示します。入力バリデーションは必ず実装しましょう。
import tkinter as tk
from tkinter import ttk, messagebox
import re
class App38:
"""HEXカラーコード変換"""
def __init__(self, root):
self.root = root
self.root.title("HEXカラーコード変換")
self.root.geometry("440x400")
self.root.configure(bg="#f8f9fc")
self._build_ui()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="HEXカラーコード変換",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# カラープレビュー
self.preview = tk.Label(main_frame, bg="#000000", height=4,
relief=tk.SOLID, bd=1, font=("Courier", 14, "bold"),
text="#000000", fg="white")
self.preview.pack(fill=tk.X, pady=(0, 12))
# HEX → RGB
hex_frame = ttk.LabelFrame(main_frame, text="HEX → RGB", padding=10)
hex_frame.pack(fill=tk.X, pady=(0, 10))
tk.Label(hex_frame, text="HEXコード (#RRGGBB):").grid(row=0, column=0, sticky="w")
self.hex_entry = ttk.Entry(hex_frame, width=14, font=("Courier", 13))
self.hex_entry.grid(row=0, column=1, padx=8, sticky="ew")
self.hex_entry.insert(0, "#3776ab")
self.hex_entry.bind("<Return>", lambda e: self.hex_to_rgb())
self.hex_entry.bind("<KeyRelease>", lambda e: self.hex_to_rgb())
ttk.Button(hex_frame, text="変換", command=self.hex_to_rgb).grid(row=0, column=2, padx=4)
hex_frame.columnconfigure(1, weight=1)
self.rgb_result = tk.Label(hex_frame, text="", bg=hex_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.rgb_result.grid(row=1, column=0, columnspan=3, sticky="w", pady=(6, 0))
# RGB → HEX
rgb_frame = ttk.LabelFrame(main_frame, text="RGB → HEX", padding=10)
rgb_frame.pack(fill=tk.X, pady=(0, 10))
for row, (label, attr) in enumerate([("R (0-255):", "r"), ("G (0-255):", "g"), ("B (0-255):", "b")]):
tk.Label(rgb_frame, text=label).grid(row=row, column=0, sticky="w", pady=3)
entry = ttk.Entry(rgb_frame, width=8, font=("Arial", 12))
entry.grid(row=row, column=1, padx=8, sticky="w")
entry.bind("<KeyRelease>", lambda e: self.rgb_to_hex())
setattr(self, f"{attr}_entry", entry)
for e, v in [(self.r_entry, "55"), (self.g_entry, "118"), (self.b_entry, "171")]:
e.insert(0, v)
ttk.Button(rgb_frame, text="変換", command=self.rgb_to_hex).grid(row=0, column=2, padx=4, rowspan=3)
self.hex_result = tk.Label(rgb_frame, text="", bg=rgb_frame.cget("bg"),
font=("Courier", 12), fg="#333")
self.hex_result.grid(row=3, column=0, columnspan=3, sticky="w", pady=(6, 0))
self.hex_to_rgb()
def hex_to_rgb(self):
text = self.hex_entry.get().strip()
if not text.startswith("#"):
text = "#" + text
if not re.fullmatch(r"#[0-9a-fA-F]{6}", text):
self.rgb_result.config(text="⚠ 形式: #RRGGBB（例: #3776ab）", fg="#e74c3c")
return
r = int(text[1:3], 16)
g = int(text[3:5], 16)
b = int(text[5:7], 16)
self.rgb_result.config(text=f"RGB({r}, {g}, {b})", fg="#27ae60")
self._update_preview(text)
def rgb_to_hex(self):
try:
r = int(self.r_entry.get())
g = int(self.g_entry.get())
b = int(self.b_entry.get())
except ValueError:
self.hex_result.config(text="⚠ 数値を入力してください", fg="#e74c3c")
return
if not all(0 <= v <= 255 for v in [r, g, b]):
self.hex_result.config(text="⚠ 0〜255の値を入力してください", fg="#e74c3c")
return
hex_color = f"#{r:02x}{g:02x}{b:02x}".upper()
self.hex_result.config(text=hex_color, fg="#27ae60")
self._update_preview(hex_color)
def _update_preview(self, hex_color):
try:
self.preview.config(bg=hex_color, text=hex_color.upper())
r = int(hex_color[1:3], 16)
g = int(hex_color[3:5], 16)
b = int(hex_color[5:7], 16)
brightness = 0.299 * r + 0.587 * g + 0.114 * b
self.preview.config(fg="black" if brightness > 128 else "white")
except Exception:
pass
if __name__ == "__main__":
root = tk.Tk()
app = App38(root)
root.mainloop()
6. ステップバイステップガイド
このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。
-
1ファイルを作成する
新しいファイルを作成して app38.py と保存します。
-
2クラスの骨格を作る
App38クラスを定義し、__init__とmainloop()の最小構成を作ります。
-
3タイトルバーを作る
Frameを使ってカラーバー付きのタイトルエリアを作ります。
-
4入力フォームを実装する
LabelFrameとEntryウィジェットで入力エリアを作ります。
-
5処理ロジックを実装する
_calculate()メソッドに計算・処理ロジックを実装します。
-
6結果表示を実装する
TextウィジェットかLabelに結果を表示する_show_result()を実装します。
-
7エラー処理を追加する
try-exceptとmessageboxでエラーハンドリングを追加します。
7. カスタマイズアイデア
基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。
💡 ダークモードを追加する
bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。
💡 データのエクスポート機能
計算結果をCSV・TXTファイルに保存するエクスポート機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。
💡 入力履歴機能
以前の入力値を覚えておいてComboboxのドロップダウンで再選択できる履歴機能を追加しましょう。
8. よくある問題と解決法
❌ 日本語フォントが表示されない
原因：システムに日本語フォントが見つからない場合があります。
解決法：font引数を省略するかシステムに合ったフォントを指定してください。
❌ ウィンドウのサイズが変更できない
原因：resizable(False, False)が設定されています。
解決法：resizable(True, True)に変更してください。
9. 練習問題
アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。
-
課題1：機能拡張
HEXカラーコード変換に新しい機能を1つ追加してみましょう。どんな機能があると便利か考えてから実装してください。
-
課題2：UIの改善
色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしてみましょう。
-
課題3：保存機能の追加
入力値や計算結果をファイルに保存する機能を追加しましょう。jsonやcsvモジュールを使います。