こんにちは!ゆーや(@yuyamanm118712)です。
こちらのページでは完全独学でWebプログラマとなった私が
デスクトップアプリには必須!!Tkinterでウィンドウにユーザーが色を選択できるような画面を表示させる方法を紹介します!


こんなすごい画面が1行で作れる!
Tkinterについて学びたい方は以下の記事を見てね!
Tkinterで「ウィンドウにユーザーが色を選択できるような画面を表示を表示する」ためにはcolorchooserというライブラリを使います!
この記事を通して、colorchooserを使いこなせるようになりましょう!

Tkinterの中でも応用的な内容!
でも簡単なので学んでいこう!
colorchooserモジュールとは
Pythonの標準ライブラリであるtkinterの一部で、ユーザーに色を選択させるためのダイアログを提供するモジュールです!
GUIアプリケーションで色を選択する際に便利なツールで、ユーザーが視覚的に色を選び、その色をアプリケーションに反映させることができます!

特にインストールも不要なので早速使っていこう!
colorchooserの基本
colorchooserのサンプルコード
import tkinter as tk
from tkinter import colorchooser
# メインウィンドウの設定
root = tk.Tk()
root.title("tkinter colorchooser - 完全独学Python")
root.geometry("500x300")
# 色選択ダイアログを表示して、ウィンドウの背景色を変更する関数
def choose_color():
# askcolorを呼び出して、色選択ダイアログを表示
color_code = colorchooser.askcolor()
if color_code[1]: # color_code[1]には選択された色の16進コードが格納される
# 選択された色でウィンドウの背景色を変更
root.configure(bg=color_code[1])
print("選択された色コード:", color_code)
# ボタンを作成して、色選択ダイアログを開く
btn = tk.Button(root, text="色を選択", command=choose_color)
btn.pack(pady=20)
# メインループを開始
root.mainloop()
初期表示

色を選択ボタン押下

任意の色を選択して、OKを押下

↓↓↓↓コンソール↓↓↓↓


colorchooser.askcolor()によって、色の選択画面を表示することができるよ!
選んだ色の情報は配列で返ってくるようだね!
colorchooser.askcolor()のオプション
初期表示の色(initialcolor)
import tkinter as tk
from tkinter import colorchooser
# メインウィンドウの設定
root = tk.Tk()
root.title("tkinter colorchooser - 完全独学Python")
root.geometry("500x300")
# 色選択ダイアログを表示して、ウィンドウの背景色を変更する関数
def choose_color():
# askcolorを呼び出して、色選択ダイアログを表示
color_code = colorchooser.askcolor(initialcolor="#ff0000")
if color_code[1]: # color_code[1]には選択された色の16進コードが格納される
# 選択された色でウィンドウの背景色を変更
root.configure(bg=color_code[1])
print("選択された色コード:", color_code)
# ボタンを作成して、色選択ダイアログを開く
btn = tk.Button(root, text="色を選択", command=choose_color)
btn.pack(pady=20)
# メインループを開始
root.mainloop()


初期表示の色をinitialcolorで設定できるよ!
確かに赤色(#ff0000)が選択されているね!
タイトルの設定(title)
import tkinter as tk
from tkinter import colorchooser
# メインウィンドウの設定
root = tk.Tk()
root.title("tkinter colorchooser - 完全独学Python")
root.geometry("500x300")
# 色選択ダイアログを表示して、ウィンドウの背景色を変更する関数
def choose_color():
# askcolorを呼び出して、色選択ダイアログを表示
color_code = colorchooser.askcolor(title="完全独学Python")
if color_code[1]: # color_code[1]には選択された色の16進コードが格納される
# 選択された色でウィンドウの背景色を変更
root.configure(bg=color_code[1])
print("選択された色コード:", color_code)
# ボタンを作成して、色選択ダイアログを開く
btn = tk.Button(root, text="色を選択", command=choose_color)
btn.pack(pady=20)
# メインループを開始
root.mainloop()


左上のタイトルが変更されているね!
まとめ
本記事では、colorchooserを使って、Tkinterでユーザーが色を選択する画面を表示する方法を紹介しました!
ポイントは以下の7つです!
① Tkinterで画面にユーザーが色を選択する画面を表示するには「colorchooser」を使う
② 「initialcolor」オプションは、初期表示の色を指定!
③ 「title」オプションは、色の選択画面のタイトルを指定!

まとめの内容を見て、もう頭に浮かべば完璧!
今日もお疲れ様です!
コメント