初心者向け No.084

グラデーションメーカー

2色を指定してCanvas上にグラデーションを描画するアプリ。色の補間計算とCanvas操作を学べる。

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ） ⏱️ 制作時間: 30〜90分

📋 目次

1. アプリ概要
2. 機能一覧
3. 事前準備・環境
4. 完全なソースコード
5. コード解説
6. ステップバイステップガイド
7. カスタマイズアイデア
8. よくある問題と解決法
9. 練習問題

1. アプリ概要

2色を指定してCanvas上にグラデーションを描画するアプリ。色の補間計算とCanvas操作を学べる。

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

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

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

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

2. 機能一覧

グラデーションメーカーのメイン機能
直感的なGUIインターフェース
入力値のバリデーション
エラーハンドリング
結果の見やすい表示
クリア機能付き

3. 事前準備・環境

ℹ️

動作確認環境

Python 3.10 以上 / Windows・Mac・Linux すべて対応

以下の環境で動作確認しています。

Python 3.10 以上
OS: Windows 10/11・macOS 12+・Ubuntu 20.04+

4. 完全なソースコード

💡

コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

✅ 追加インストール不要（標準ライブラリのみ使用）

app084.py

import tkinter as tk
from tkinter import colorchooser, messagebox, ttk


def hex_to_rgb(h: str):
    """16進カラー(#rrggbb)を (r,g,b) タプルに変換する"""
    h = h.lstrip("#")
    if len(h) != 6:
        raise ValueError(f"不正なカラー: {h}")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)


def rgb_to_hex(rgb) -> str:
    """(r,g,b) を #rrggbb 文字列に変換する"""
    return "#{:02x}{:02x}{:02x}".format(*[max(0, min(255, int(v))) for v in rgb])


class App084:
    """グラデーションメーカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("グラデーションメーカー")
        self.root.geometry("700x520")
        self.root.configure(bg="#f8f9fc")
        self.color1 = "#3776ab"
        self.color2 = "#ffd43b"
        self._build_ui()
        self.draw()

    def _build_ui(self):
        """UI を構築する"""
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(
            title_frame, 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=20, pady=10)

        ttk.Label(ctrl, text="色1:").grid(row=0, column=0, padx=4, pady=4)
        self.btn1 = tk.Button(ctrl, text="     ", bg=self.color1, width=6,
                              command=lambda: self._pick(1))
        self.btn1.grid(row=0, column=1, padx=4)
        ttk.Label(ctrl, text="色2:").grid(row=0, column=2, padx=4)
        self.btn2 = tk.Button(ctrl, text="     ", bg=self.color2, width=6,
                              command=lambda: self._pick(2))
        self.btn2.grid(row=0, column=3, padx=4)
        ttk.Label(ctrl, text="方向:").grid(row=0, column=4, padx=8)
        self.dir_var = tk.StringVar(value="横")
        ttk.Combobox(ctrl, textvariable=self.dir_var, values=["横", "縦"],
                     state="readonly", width=6).grid(row=0, column=5, padx=4)
        ttk.Label(ctrl, text="ステップ:").grid(row=0, column=6, padx=8)
        self.step_var = tk.IntVar(value=200)
        ttk.Spinbox(ctrl, from_=10, to=400, textvariable=self.step_var, width=6).grid(row=0, column=7)

        ttk.Button(ctrl, text="描画", command=self.draw).grid(row=0, column=8, padx=8)

        self.canvas = tk.Canvas(self.root, width=640, height=360, bg="white",
                                highlightthickness=1, highlightbackground="#ccc")
        self.canvas.pack(padx=20, pady=10)

        self.status = tk.Label(self.root, text="", bg="#f8f9fc", fg="#555")
        self.status.pack()

    def _pick(self, idx: int):
        """カラーピッカーで色を選択する"""
        initial = self.color1 if idx == 1 else self.color2
        _rgb, hexv = colorchooser.askcolor(color=initial, title="色を選択")
        if hexv is None:
            return
        if idx == 1:
            self.color1 = hexv
            self.btn1.configure(bg=hexv)
        else:
            self.color2 = hexv
            self.btn2.configure(bg=hexv)

    def draw(self):
        """グラデーションを Canvas に描画する"""
        try:
            r1, g1, b1 = hex_to_rgb(self.color1)
            r2, g2, b2 = hex_to_rgb(self.color2)
            steps = max(2, int(self.step_var.get()))
        except (ValueError, tk.TclError) as e:
            messagebox.showerror("エラー", f"入力が不正です: {e}")
            return

        self.canvas.delete("all")
        w = int(self.canvas["width"])
        h = int(self.canvas["height"])
        direction = self.dir_var.get()

        for i in range(steps):
            t = i / (steps - 1)
            color = rgb_to_hex((r1 + (r2 - r1) * t,
                                g1 + (g2 - g1) * t,
                                b1 + (b2 - b1) * t))
            if direction == "横":
                x0 = int(w * i / steps)
                x1 = int(w * (i + 1) / steps) + 1
                self.canvas.create_rectangle(x0, 0, x1, h, outline="", fill=color)
            else:
                y0 = int(h * i / steps)
                y1 = int(h * (i + 1) / steps) + 1
                self.canvas.create_rectangle(0, y0, w, y1, outline="", fill=color)

        self.status.config(text=f"{self.color1} → {self.color2}  ({direction}, {steps} ステップ)")


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

5. コード解説

グラデーションメーカーのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

クラス設計とコンストラクタ

App084クラスにアプリの全機能をまとめています。__init__でウィンドウ設定、_build_ui()でUI構築、process()でメイン処理を担当します。責任の分離により、コードが読みやすくなります。