tk.Label と tk.Button で画像を表示する

Python3 マスターへの道:その4


 第4回ということで、ウィジェットについて学んでいきたいと思います。これで、ただの真っ白なウィンドウからは、おさらばです!(前回はあくまで、位置指定のメソッドの学習のためでしたからね。)

 今回学ぶウィジェットでは、かなり私の目指している非公式『どうぶつしょうぎ』の盤面作成に近づくと思います!!

 1   import tkinter as tk
 2   
 3   root = tk.Tk()
 4     
 5   # 今回の新要素
 6   widget_name = tk.Widget(root)
 7   widget_name["option"] = "Choice"
 8   
 9   widget_name.pack()
10
11   root.mainloop()


Tkinter: ウィジェットの使い方


 前回は、配置位置の紹介として、あるウィジェットを使用していました。ウィジェッそうでは、tk.Label() メソッドでしたよね? しかし、ウィジェットは tk.Label() だけではありません。そのウィジェットの作成は、一般的には下記のように表示させます。

 6   widget_name = tk.Widget(root)

新ウィジェット:tk.Label メソッド


 ちなみに、前回の tk.Label() メソッドはこのように、使用されていましたね。
 6'  label = tk.Label(root)
このように、文字を表示していました。しかし、これだけでは、label という名前のウィジェットを作成しただけです。実際に文字を表示させる、文字の色を変える、画像を表示させる。そういったことを行うためには、オプションを使って、カスタマイズする必要があるのです。

 7   widget["option"] = "Choice"
上のように、オプションをウィジェットに加えることができます。オプションは、ウィジェットごとに様々あって、文字列のウィジェットなので、文字列の指定や、文字の色、背景の色などを変えることができます。例えば、下のように書くことができます。

 8   # 例
 9   widget["text"] = "String"   # 文字列の指定
10   widget["fg"] = "Color"   # 文字の色
11   widget["bg"] = "Color"   # 背景の色

 試しに、出力して見ましょう。黒い背景に白い文字で、"Suzuki Gakuto" なんてどうでしょうか?


うまくいきましたね。しかし、4行に分けて書くのは面倒ですね。実は、もっと短く、1文で、オプションを使いすることもできます。

 6'  widget = tk.Label(root, text = "String", fg = "Color", bg = "Color")

 簡単に短くなりましたね。また、特別読みにくかったりするわけでもないです。これからは、この書き方で書いていった方が良さそうですね。他のウィジェットも試してみましょうか?


新ウィジェット:tk.Button メソッド


 次のウィジェットは、ボタンです。よくクリックすると何かが起こる正体ですね。これが使えるようになれば、将棋盤への道へとまた一歩進むことになりそうです。しかし、使い方は、至ってシンプル。先ほどのウィジェットと同じです。
 6'  button = tk.Button(root)
 本当に同じですよね。そして、オプションの使い方ももちろん同じです。しかし、ウィジェットごとに、使えるウィジ ェットと使えないものがあるようです。

 例えば、ボタンに関しては、state というオプションを "disable" と下のように指定すればいいだけのようです。
 6'  button = tk.Button(root, state="disable")

 それでは、今回も使えるボタンと使えないボタンを並べて表示させてみます。



 使えないボタンは、薄くなって見えにくくなりましたね。実は、ボタンには、他にも、command というオプションがあります。そして、これは、ボタンを押した際に何が起こるか指定するもののようです。今後も使っていきたいですね。


新オプション:画像を表示させる


 これまで、文字とボタンのウィジェットを学びましたが、『どうぶつしょうぎ』の駒を表示するには、画像を使いたいですよね。なので、画像を表示できるようになる必要になりそうです。しかし、これが意外とシンプル……というわけには、いかなかったです。

 コードを書いてしまうと……

 1   import tkinter as tk
 2   from PIL import Image, ImageTk
 3   
 4   root=tk.Tk()
 5   
 6   img = Image.open('path')
 7   photo = ImageTk.PhotoImage(img, master=root)
 8   pieces = tk.Button(root, image=photo)
 9   pieces.image = photo
10   
11   pieces.pack()
12   
13   root.mainloop()

 まずは、Image.open() で画像を収得、そして ImageTk.PhotoImage で画像を tkinter の理解できる形にして、pieces にボタンのウィジェットとして入れる。ということでしょうか……

 ですが、master = root とpieces.image = photo の二つが何か引っかかりますね。しかし、それがないとうまく画像が表示されなかったので、入れておきます。よかったらコメントで、説明してもらえると嬉しいです。

 ちなみに、画像は、こちらから拝借しました。それでは、表示させてみましょう。


 ちゃんと、表示できましたね。ボタンとして表示したので、もちろんクリックすることもできます。ですが、command は設定していないので、何も起こるわけはないですね。しかし、これも第一歩です!


非公式『どうぶつしょうぎ』最初の盤面


 それでは、command 関係なくなら、最初の盤面を表示させることができそうだということには気がつきましたか? 前回学んだ .grid() を使うことで、盤面のマス目のように、位置を指定すれば良さそうです。画像たちは、それぞれ駒ごとにサイズを変更してっと。

 1   import tkinter as tk
 2   from PIL import Image, ImageTk
 3   
 4   root=tk.Tk()
 5   root.title("animal_chess")
 6   
 7   ''' 省略 piece: BH(ヒヨコ下), BL(ライオン下), BG(キリン下), BE(ゾウ下)
 8    TH(ヒヨコ上), TL(ライオン上), TG(キリン上), TE(ゾウ上)'''
 9   img = Image.open('path')
10   photo = ImageTk.PhotoImage(img, master=root)
11   piece = tk.Button(root, image=photo)
12   piece.image = photo
13   
14   #駒の配置
15   BH.grid(row=2,column=1)
16   BL.grid(row=3,column=1)
17   BG.grid(row=3,column=2)
18   BE.grid(row=3,column=0)
19   TH.grid(row=1,column=1)
20   TL.grid(row=0,column=1)
21   TG.grid(row=0,column=0)
22   TE.grid(row=0,column=2)
23   
24   root.mainloop()

 出力してみましょう。



 表示できました! まだ何も動かすことは、できませんが、あのノロノロと進んでいたのが、嘘みたいです。ちょっと突っ走ってしまいましたかね……


最後に


 このように、今回は、最初の盤面を表示させるまでに至りました。凄い進歩だと自分でも思ってしまいます。しかし、何も動かせなければ意味がありませんよね。次は、どのような構図にしていくかを考えながら、ウィジェットのまとまりであるフレーム(Frame)について学びたいと思います。

 意外と、このフレームがどこにも使われていることがあって、わからなくて困っていました。しかし、今度は私が学んで使う番ですね。次回をお待ちください!

前回:Tkinter の配置用メソッド .pack() .gird() .place()
次回:Tkinter フレームの使い方のウィジェットの構図を考える