Python3 マスターへの道:その5
前回はウィジェットについて学びましたね。そうすることで、ついに、非公式『どうぶつしょうぎ』盤面の表示に成功しました。ですが、まだまだ、将棋を指すのには、程遠いですね。ですが、一緒に頑張っていきましょう!
プレイ画面の構図
将棋を動かせるようにする前に、今現在私が考えている画面の構図を考えていきます。これによって、どうやって動かすのか、なども重要になってきますね。
現在、私が考えている操作方法として、将棋の駒(ボタン)をクリックすると、下画面の矢印が可能な移動方向のみ、表示されます。そして、その移動方向の矢印(ボタン)を押すことで、移動ができるようにする、という仕組みです。


画面は、上のようにしてみてはどうでしょうか? 持ち駒を置く場所も必要ですし、投了やプレイ終了などのボタンも必要になってきますよね。
ですが、ここでわかるのが、ウィジェットごとに分かれていることです。これは、.place() を使ってしまえば、容易に配置できますが、実際に pixel 数を数えるのは面倒です。ウィジェットごとにまとまりが作れたら便利ですよね。

多少違いはありますが、似たようにできました。しかし、実はこのコードは紹介することができません。そして、それが次のお知らせに繋がっています……
実は、薄々気が付いていたのですが、私のやり方が悪いのか、システム上なのか、私の MacBook 上では、様々な Tkinter 機能が制限されています。ボタンの配色を変えたり、フレームの背景色を変えるなど、重要にも思えることが、どうにも調べてもわかりませんでした。
なので、実は、上に表示した画像は、フレームごとに背景の配色がしてあるわけではなく、.place() で座標で色分けしています。実際、フレームは機能しているようで、色がなくても、しっかりと、ボタンなどは分かれて表示されているのですが、この不自由さが、たまらなく、辛く、これからもこの Tkinter を続けていくのが、億劫になってしまいました。
そうして、調べた結果、今後は、Tkinter ではなく、Kivy を学んでいきたいと思っています。ちなみに、Kivy の場合だと(Tkinter でもできるかもしれないが)、スマホの画面にアプリのように表示させることなどもできるようなので、期待が大きいです。
一様、一通り GUI の使い方は学んでいるので、今まで学んだことを無駄にせず、次のステップに向かっていきたいと思っています。これからも、非公式『どうぶつしょうぎ』は扱っていきます。今後ども、応援お願いします。
前回:tk.Label と tk.Button で画像を表示する
次回:Kivy のチュートリアルコードから初心者が理解してみる
ですが、ここでわかるのが、ウィジェットごとに分かれていることです。これは、.place() を使ってしまえば、容易に配置できますが、実際に pixel 数を数えるのは面倒です。ウィジェットごとにまとまりが作れたら便利ですよね。
Tkinter:フレーム(Frame)の使い方
しかし、まさに、そのために、tkinter にはフレーム(Frame)が存在します。今言ったように、これはウィジェットのまとまりです。なので、ウィンドウ上に、フレームを配置すること。そして、フレーム上に、ウィジェットを配置することで、上のような画面は可能になってくるのでは、ないでしょうか。それでは、早速、学んでいきましょう!
意外にも、フレームの使い方はシンプルです。まずは、コードをみてみましょう。
意外にも、フレームの使い方はシンプルです。まずは、コードをみてみましょう。
1 import tkinter as tk 2 from PIL import Image, ImageTk 3 4 root=tk.Tk() 5 6 #今回の新要素 7 frame=tk.Frame() 8 widget_name = tk.Widget(frame) 9 10 root.mainloop()
かなりシンプルですよね。フレームを作る際には、tk.Frame() を用いて、フレームの中に、ウィジェットを配置する際には、今まで、root と書いていた、Widget() の一番最初に、frame を書けばいいのです。
そして、フレームは表示する際にも、その3で学んだ位置指定のメソッドを使えばいいのです。ちなみに、フレーム内に、ウィジェットを配置する際には、ウィジェットの左上の角が基準点になっているので、あくまで、今までのウィンドウの役割を、小さなフレームが補っているという考え方で正しいのです。
それでは、上の画像のようなウィンドウを作成してみましょう。
そして、フレームは表示する際にも、その3で学んだ位置指定のメソッドを使えばいいのです。ちなみに、フレーム内に、ウィジェットを配置する際には、ウィジェットの左上の角が基準点になっているので、あくまで、今までのウィンドウの役割を、小さなフレームが補っているという考え方で正しいのです。
それでは、上の画像のようなウィンドウを作成してみましょう。

多少違いはありますが、似たようにできました。しかし、実はこのコードは紹介することができません。そして、それが次のお知らせに繋がっています……
重大なお知らせ
実は、薄々気が付いていたのですが、私のやり方が悪いのか、システム上なのか、私の MacBook 上では、様々な Tkinter 機能が制限されています。ボタンの配色を変えたり、フレームの背景色を変えるなど、重要にも思えることが、どうにも調べてもわかりませんでした。
なので、実は、上に表示した画像は、フレームごとに背景の配色がしてあるわけではなく、.place() で座標で色分けしています。実際、フレームは機能しているようで、色がなくても、しっかりと、ボタンなどは分かれて表示されているのですが、この不自由さが、たまらなく、辛く、これからもこの Tkinter を続けていくのが、億劫になってしまいました。
そうして、調べた結果、今後は、Tkinter ではなく、Kivy を学んでいきたいと思っています。ちなみに、Kivy の場合だと(Tkinter でもできるかもしれないが)、スマホの画面にアプリのように表示させることなどもできるようなので、期待が大きいです。
一様、一通り GUI の使い方は学んでいるので、今まで学んだことを無駄にせず、次のステップに向かっていきたいと思っています。これからも、非公式『どうぶつしょうぎ』は扱っていきます。今後ども、応援お願いします。
前回:tk.Label と tk.Button で画像を表示する
次回:Kivy のチュートリアルコードから初心者が理解してみる