python3.8でランダム配色ツール作成
カテゴリ：新技術開拓記
こんにちは。inglowの開発担当です。
今回は、近年超キテる「python」を使って、簡単なランダム配色ツールを作成してみようと思います。
開発環境は下記です。
- バージョン：python3.8.3
- エディタ：notepad++
また、弊社ではWebプロモーション成功事例集をまとめた限定資料を無料で配布しています。
Webマーケティングに興味がある方は、下記ページより目を通してみてください。
今回作るもの
配色理論に基づいて色コードを計算するものを作ってみても面白いかなと思っているのですが、pythonが超初心者ということもあり、今回は4色の組み合わせをランダムで表示するというシンプルなものを作成してみようと思います。
ウィンドウが開いた時にランダムで4色を表示する
ボタンによって違うランダム4色に変更する
ボタンで配色画像を画像として保存する
という機能を実装していきます。
GUIの作成
まずはGUIを生成していきます。GUIで必要なのは、「ランダム生成された4色の表示部分」、「色変更」ボタン、「画像保存」ボタンの3つです。
GUIを表現するためのライブラリはいくつかあるみたいですが、今回は一番よく目にした「tkinter」を使用しました。
まずはウィンドウを表示するところまで書いてみます。
|
1 2 3 4 5 6 |
import tkinter root = tkinter.Tk() root.title(u"color_mgr") #ウィンドウタイトルを指定 root.geometry("500x500") #ウィンドウサイズを指定 root.mainloop() |
何もないウィンドウが表示されるかと思います。ウィンドウの表示はこんな感じでできました。次にボタンを生成してみます
|
1 2 3 4 5 6 7 8 9 |
root = tkinter.Tk() btn_0 = tkinter.Button(root, text="色を変える", width=10, height=2) btn_0.grid(row=3, column=1, columnspan=2) btn_sv = tkinter.Button(root, text="画像を保存", width=10, height=2) btn_sv.grid(row=4, column=1, columnspan=2) root.mainloop() |
ここまで書いて実行すると、ボタンが２つ縦並びで表示されます。
「btn_sv.grid(row=n, column=m)」の部分は、横列のn番目、楯列のm番目に配置するという指定です。HTMLでいうと、tableタグのようなイメージが近いと思います。
次は表示部分です。表示部分は、画像出力をしたかったため、「canvas」を利用することにしました。canvasでは、描画した要素にタグをつけてあとからプロパティの変更（色変更とか）もできるようです。今回描画したい内容は、正方形を横に4つなので、動的に生成されるように記述しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
rect_size = 125 #一つの四角のサイズ canvas_keys = ["main", "second", "third", "fourth"] #色表示エリアの名前を仮で指定 max_size = rect_size*len(canvas_keys) #canvasの最大幅をあらかじめ計算 #表示するためのcanvasを生成する canvas = tkinter.Canvas(root, width=max_size, height=rect_size) #カラー表示部分の設置 for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] canvas_items[key_name] = {} tagnm = "fill_" + key_name #canvasに追加する要素のタグ名を生成 #fillで塗りつぶし色を指定します 初期値は真っ白を指定しています。 canvas.create_rectangle(rect_size * ck, 0, (rect_size * ck) + rect_size, rect_size, fill="#ffffff", tag=tagnm) #canvasをウィンドウに配置する canvas.grid(row=0, column=0, columnspan=4) |
ここまでで表示部分は出来上がってきました。ここまでのソース全文は下記のような感じです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import tkinter #ランダムに色を生成する関数 def make_hexcolor(): color_cd = ""; for i in range(0, 3): color_cd = color_cd + format(int(random.randrange(255)), 'x').zfill(2) return color_cd root = tkinter.Tk() canvas_items = {} canvas_keys = ["main", "second", "third", "fourth"] root.title(u"color_mgr") #ウィンドウタイトルを指定 rect_size = 125 #一つの四角のサイズ canvas_keys = ["main", "second", "third", "fourth"] #色表示エリアの名前を仮で指定 max_size = rect_size*len(canvas_keys) #canvasの最大幅をあらかじめ計算 root.geometry(str(max_size) + "x500") #ウィンドウサイズを指定 #表示するためのcanvasを生成する canvas = tkinter.Canvas(root, width=max_size, height=rect_size) #カラー表示部分の設置 for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] canvas_items[key_name] = {} tagnm = "fill_" + key_name #canvasに追加する要素のタグ名を生成 #fillで塗りつぶし色を指定します 初期値は真っ白を指定しています。 canvas.create_rectangle(rect_size * ck, 0, (rect_size * ck) + rect_size, rect_size, fill="#ffffff", tag=tagnm) #canvasをウィンドウに配置する canvas.grid(row=0, column=0, columnspan=4) btn_0 = tkinter.Button(root, text="色を変える", command=lambda: change_color(), width=10, height=2) btn_0.grid(row=3, column=1, columnspan=2) btn_sv = tkinter.Button(root, text="画像を保存", command=lambda: save_image(), width=10, height=2) btn_sv.grid(row=4, column=1, columnspan=2) root.mainloop() |
ここまでで実行すると、白い四角が4つとボタンが表示された状態になります。まだ押しても何もならないです。
ランダムに色を生成する処理を作成する
色を変える処理を作る前に、ランダムな色生成をするための関数を作成します。
パソコンでの色表現の基本は、「R（Red）」「G（Green）」「B（Blue）」のそれぞれに「0～255」の数値を当てはめて色を構成します。最大値が255なのは、16進数の2桁の数字の最大値（0xFF）の10進数が255のためです。（このあたりの詳しい説明は省きます…！）
そのためまずは、「0～255のランダムな数値を生成して16進数に変換」する処理を３回行い、それを文字列として結合する処理を書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import random def make_hexcolor(): color_cd = ""; for i in range(0, 3): #これらの処理を１行で書いています #random.randrange(255) 255までの数字をランダムに #int(255までの数字)) int側にします #format(intにした数字, 'x') 16進数の表記として文字列にします #16進数文字.zfill(2) 0字詰めします color_cd = color_cd + format(int(random.randrange(255)), 'x').zfill(2) return color_cd |
これで、ランダムに色を生成して、HTMLでもおなじみの16進数6桁の形式でカラーコードを返す処理ができました。
表示色を変える処理を作成する
canvs内の四角の色を変更する処理を書いていきます。タグ名を指定して色を指定していけばいいのですが、一回ボタンをおされた時に4回うごく必要があります。何回も同じ処理がうごくことになるのでこれも関数を分けて書いていきます
|
1 2 3 4 5 6 7 8 |
def change_color(): global canvas for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] tagnm = "fill_" + key_name #変更したい四角のタグ名を生成する #タグ名で色を変更する canvas.itemconfigure(tagnm, fill="#" + make_hexcolor()) |
関数が作れたら、次はボタンが押された時に処理が動くようにします
|
1 2 |
#さっき配置したbtn_0に「command」を設定する btn_0 = tkinter.Button(root, text="色を変える", command=lambda: change_color(), width=10, height=2) |
このままだと、ウィンドウを開いた時は白い四角が4つ表示された状態になってしまうため、ウィンドウが表示された時も色がつくようにするため、ボタンの記述の後に色変更の関数を呼び出すようにしますここまで書くと、ファイル全体の記述は下記のような感じになります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import tkinter import random #ランダムに色を生成する def make_hexcolor(): color_cd = ""; for i in range(0, 3): color_cd = color_cd + format(int(random.randrange(255)), 'x').zfill(2) return color_cd def change_color(): global canvas for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] tagnm = "fill_" + key_name #変更したい四角のタグ名を生成する #タグ名で色を変更する canvas.itemconfigure(tagnm, fill="#" + make_hexcolor()) root = tkinter.Tk() canvas_items = {} canvas_keys = ["main", "second", "third", "fourth"] root.title(u"color_mgr") #ウィンドウタイトルを指定 rect_size = 125 #一つの四角のサイズ canvas_keys = ["main", "second", "third", "fourth"] #色表示エリアの名前を仮で指定 max_size = rect_size*len(canvas_keys) #canvasの最大幅をあらかじめ計算 root.geometry(str(max_size) + "x500") #ウィンドウサイズを指定 #表示するためのcanvasを生成する canvas = tkinter.Canvas(root, width=max_size, height=rect_size) #カラー表示部分の設置 for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] canvas_items[key_name] = {} tagnm = "fill_" + key_name #canvasに追加する要素のタグ名を生成 #fillで塗りつぶし色を指定します 初期値は真っ白を指定しています。 canvas.create_rectangle(rect_size * ck, 0, (rect_size * ck) + rect_size, rect_size, fill="#ffffff", tag=tagnm) #canvasをウィンドウに配置する canvas.grid(row=0, column=0, columnspan=4) btn_0 = tkinter.Button(root, text="色を変える", command=lambda: change_color(), width=10, height=2) btn_0.grid(row=3, column=1, columnspan=2) btn_sv = tkinter.Button(root, text="画像を保存", command=lambda: save_image(), width=10, height=2) btn_sv.grid(row=4, column=1, columnspan=2) change_color() root.mainloop() |
画像保存処理の作成
最後に画像を保存する処理を書いていきます。画像はフォルダを選択して保存されるようにし、ファイル名に日時が入るようにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import tkinter.filedialog import datetime import os from PIL import ImageGrab def save_image(): global canvas #画像サイズをキャンバスを元に定義していく box = (canvas.winfo_rootx(),canvas.winfo_rooty(),canvas.winfo_rootx()+canvas.winfo_width(),canvas.winfo_rooty() + canvas.winfo_height()) grb = ImageGrab.grab(bbox = box) #現在時刻をファイル名に追加する now_time = datetime.datetime.now() #保存したいフォルダを選択する fldr_path = tkinter.filedialog.askdirectory(initialdir=os.path.dirname(__file__), title="保存先を指定") #フォルダが選択されていたら画像を保存する if fldr_path != "": grb.save(fldr_path + "\colors" + now_time.strftime('%Y%m%d%H%m') + ".png") |
ここまで書けたら、あとは色変更関数をボタンに組み込んだのと同じように、「画像を保存する」ボタンに画像保存の関数を組み込んだら完成です！
最終的なコード全体の内容は下記です
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import tkinter import tkinter.filedialog import random import datetime import os from PIL import ImageGrab #ランダムに色を生成する def make_hexcolor(): color_cd = ""; for i in range(0, 3): color_cd = color_cd + format(int(random.randrange(255)), 'x').zfill(2) return color_cd def change_color(): global canvas for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] tagnm = "fill_" + key_name #変更したい四角のタグ名を生成する #タグ名で色を変更する canvas.itemconfigure(tagnm, fill="#" + make_hexcolor()) def save_image(): global canvas #画像サイズをキャンバスを元に定義していく box = (canvas.winfo_rootx(),canvas.winfo_rooty(),canvas.winfo_rootx()+canvas.winfo_width(),canvas.winfo_rooty() + canvas.winfo_height()) grb = ImageGrab.grab(bbox = box) #現在時刻をファイル名に追加する now_time = datetime.datetime.now() #保存したいフォルダを選択する fldr_path = tkinter.filedialog.askdirectory(initialdir=os.path.dirname(__file__), title="保存先を指定") #フォルダが選択されていたら画像を保存する if fldr_path != "": grb.save(fldr_path + "\colors" + now_time.strftime('%Y%m%d%H%M') + ".png") root = tkinter.Tk() canvas_items = {} canvas_keys = ["main", "second", "third", "fourth"] root.title(u"color_mgr") #ウィンドウタイトルを指定 rect_size = 125 #一つの四角のサイズ canvas_keys = ["main", "second", "third", "fourth"] #色表示エリアの名前を仮で指定 max_size = rect_size*len(canvas_keys) #canvasの最大幅をあらかじめ計算 root.geometry(str(max_size) + "x500") #ウィンドウサイズを指定 #表示するためのcanvasを生成する canvas = tkinter.Canvas(root, width=max_size, height=rect_size) #カラー表示部分の設置 for ck in range(0, len(canvas_keys)): key_name = canvas_keys[ck] canvas_items[key_name] = {} tagnm = "fill_" + key_name #canvasに追加する要素のタグ名を生成 #fillで塗りつぶし色を指定します 初期値は真っ白を指定しています。 canvas.create_rectangle(rect_size * ck, 0, (rect_size * ck) + rect_size, rect_size, fill="#ffffff", tag=tagnm) #canvasをウィンドウに配置する canvas.grid(row=0, column=0, columnspan=4) btn_0 = tkinter.Button(root, text="色を変える", command=lambda: change_color(), width=10, height=2) btn_0.grid(row=3, column=1, columnspan=2) btn_sv = tkinter.Button(root, text="画像を保存", command=lambda: save_image(), width=10, height=2) btn_sv.grid(row=4, column=1, columnspan=2) change_color() root.mainloop() |
実物
webアプリケーションのように埋め込みができないので、今回は操作した感じの動画を準備しました。
このコードにさらに、色を固定する機能をつけてみました。
さいごに
普段使用しているPHPと構文は少し違いたまにシンタックスエラーが出てしまいますが…（笑）
意外と難なく処理はかけているので、もっと進んで、機械学習や画像の解析・加工等もやってみたいです。
弊社inglowでは、これから広告の運用を考えられている方、あるいはこれから広告代理店に運用をお願いされる方向けに、「業界別Web広告の成功事例」をまとめた資料を無料配布しております。
下記のフォームに入力いただくだけで、無料で資料をダウンロードしていただけます。ぜひご利用下さい。
