カラーピッカー

1. アプリ概要

RGBスライダーで色を作りHEXコードを表示するカラーピッカー。Scaleウィジェットとリアルタイム更新を学びます。

このアプリはツールカテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★☆☆ です。

このアプリは「ツール」カテゴリです。日々の作業を自動化する実用ツールは Python が最も得意とする領域です。短いコードで実用性のある成果物が作れる点が魅力です。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

コピー＆実行で動作確認 → コード解説で構造理解 → カスタマイズで応用、の 3 ステップで進めると、短時間で本質を押さえられます。

アプリを完成させた後は、自分の使い方に合わせて改造するのが学びを定着させる近道です。カスタマイズ章のアイデアを足がかりに、独自機能を一つ追加してみてください。

2. 機能一覧

• 「コピー」ボタン（_copy_hex()）で操作
• ウィンドウはタイトル「カラーピッカー」・サイズ 460x420 で起動
• R・G・B のスライダーを動かして色を混ぜ、HEX コードをその場で確認できます

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 ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        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="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


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

5. コード解説

カラーピッカーのコードを、実際に書かれている実装に沿って解説します。

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

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

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

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

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

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

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

   title("カラーピッカー")・geometry("460x420")・configure(bg="#f8f9fc") をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

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

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

   アプリの本体である _copy_hex()（3行）・_update()（10行） を実装します。

7. 7
   動作確認する

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

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

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

9. 練習問題

アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。

1. 課題1：RGB値をラベルに表示する

   スライダーの下に「R: 255, G: 128, B: 0」のようにRGB値を文字で表示するLabelを追加してみましょう。_update()メソッドの中で更新します。

2. 課題2：補色を自動表示する

   現在の色の補色（R=255-r, G=255-g, B=255-b）を別のプレビューエリアに並べて表示する機能を追加してみましょう。

3. 課題3：色履歴パレットを作る

   「追加」ボタンを押すと現在の色をパレットに保存し、Canvas上に小さな色見本として並べて表示する機能を実装してみましょう。