グラデーションメーカー

1. アプリ概要

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

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

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

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

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

2. 機能一覧

• 「 」ボタン（_pick()）・「 」ボタン（_pick()）・「描画」ボタン（draw()）で操作
• messagebox.showerror() によるダイアログ通知
• ウィンドウはタイトル「グラデーションメーカー」・サイズ 700x561 で起動

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

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("700x561")
        self.root.minsize(700, 561)
        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. コード解説

グラデーションメーカーのコードを、実際に書かれている実装に沿って解説します。

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

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

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

   新しいファイルを作成して app084.py と保存します。使うのは tkinter だけなので、追加インストールは不要です。

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

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

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

   title("グラデーションメーカー")・geometry("700x561")・configure(bg="#f8f9fc")・minsize(700, 561) をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（_pick()・_pick()・draw()）につなぎます。

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

   アプリの本体である draw()（30行）・_pick()（12行） を実装します。

7. 7
   動作確認する

   python app084.py で起動し、各ボタンが反応することを確認します。

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。描き直しが起きるのは「描画」ボタンを押したときだけ（61行）なので、どちらの課題も設定を変えたあとに押して確かめます。

1. 課題1：色コードを直接入力できるようにする

   いまは色ボタン（46〜52行）からカラーピッカーで選ぶ方法しかありません。#e74c3c のような色コードを打ち込んでも使えるようにしましょう。

   期待結果：入力欄に #e74c3c と入れて「描画」を押すと赤から色2へのグラデーションになり、112行のステータスの表示も #e74c3c から始まる

   合格条件

   • 打ち込んだ色コードが色1として使われる
   • #zzzzzz のような使えない値では90行のエラーダイアログが出る
   • エラーのときは前に描いたグラデーションが残る

   ヒント①（どこを触るか）: 触るのは2か所です。操作パネル（42〜59行）に入力欄を足す部分と、draw() の先頭（85行の try: の手前）です。
   ヒント②（使うもの）: 入力欄は ttk.Entry(ctrl, textvariable=self.hex1_var) を grid で並べます（45〜59行が手本です）。読み取った文字を self.color1 に入れてから try: に進めば、86行の hex_to_rgb() が形を確かめ、使えない値は89〜90行のダイアログにつながります。
   つまずきやすい点: 入力された色をボタンの見た目にも反映したくなりますが、self.btn1.configure(bg=...) に使えない文字列を渡すとその場でエラーになります。89行の except が拾うのは86〜88行だけだからです。ボタンに反映するのは hex_to_rgb() を通ったあとにします。なお # を付け忘れても7〜10行は6文字かどうかだけを見るため、e74c3c はそのまま読めます。

2. 課題2：色1と色2を入れ替えるボタンを足す

   向きを逆にしたいだけでも、2色を選び直す必要があります。1回で入れ替えられるボタンを足しましょう。

   期待結果：「入れ替え」を押してから「描画」を押すと、左右（方向が縦なら上下）の色が反対のグラデーションになる

   合格条件

   • self.color1 と self.color2 の両方が入れ替わる
   • 2つの色ボタン（46〜52行）の見た目も入れ替わる
   • 方向（横・縦）とステップ数は変わらない

   ヒント①（どこを触るか）: 触るのは2か所です。操作パネルにボタンを足す部分（61行の「描画」ボタンの隣）と、入れ替えを行う新しいメソッドです。
   ヒント②（使うもの）: 値の入れ替えは self.color1, self.color2 = self.color2, self.color1 の1行で書けます。ボタンの見た目は _pick() の78行・81行と同じ configure(bg=...) で合わせます。
   つまずきやすい点: 値を入れ替えただけでは、46行・50行の bg= で決めた見た目が残ります。112行のステータスも draw() の最後でしか書き換わらないので、押した直後に表示までそろえたいなら draw() を呼びます。

3. 課題3：保存機能の追加

   処理結果をファイルに保存する機能を追加しましょう。