前回はとりあえずウィンドウと文字の表示だけを作ったけど、今回はアプリに動きを付けるための「ボタン」を追加してみようか
お願いします！
ボタンを追加するときは「eg.Button(文字列)」でOKだよ！前回のプログラムの「layout」を次のように書き換えてみようか
# レイアウト（画面構成）
layout = [
[eg.Text("じゃんけんの手を選ぼう！")],
[
eg.Button("グー"),
eg.Button("チョキ"),
eg.Button("パー")
],
[eg.Text("", key="result")]
]
おお！ボタンが出てきた！！押してみたら押した感じにはなるけど、まだ変化は起きないね
まだ押した時の処理は作ってないからね
とりあえずまずは、ボタンが押された時に内部ではどんな反応が起きているか確認してみよう！
「event, values = window.read()」の直後に「print(event, values)」を追加してみてね
# イベントループ（閉じるまで表示）
while True:
event, values = window.read()
print(event, values) # これを追加
if event is eg.WINDOW_CLOSED:
break追加できたら改めて実行してからボタンを押してみようか
なんかターミナルの方に表示された！
これを見た感じ、「event」にはボタンに表示されてる文字が入ってるのは分かるね！
でも、「values」に入ってるデータは何かはまだよく分からないなぁ
「values」は、オブジェクトに「key」を設定した時にそのオブジェクトに与えられた情報が入るんだ
まだピンと来ない...
まぁこの仕様については、また使う時に改めて説明するから今は気にしなくて良いよ
じゃあ「event」だけでもちゃんと覚えておく！
そしたら次は、ボタンが押された時の実行部分について作ってみよう！
今回は押したボタンがなにか表示されるようにしようか
# イベントループ（閉じるまで表示）
while True:
event, values = window.read()
if event in ["グー", "チョキ", "パー"]:
window["result"].update(f"押したボタンは「{event}」です")
if event is eg.WINDOW_CLOSED:
breakおお！ちゃんと下の空いてるところに文字が表示されるし、ボタンを押すたびに切り替わってる！
上手くいって良かった！こんな感じで、オブジェクトを更新したい時は「window[keyの名前].update(更新の内容)」とすれば良いよ！
そのためにも、各オブジェクトに「key」を事前に設定しておくと良いよ
表示が変わると動いてる感じがして一気にアプリっぽくなるね！！
アプリっぽくするってことなら、次は各ボタンの上にじゃんけんの手の画像を表示してみようか
お、いいね！
じゃあまずは画像をここからダウンロードして「janken.py」と同じ場所に用意しようか
それぞれダウンロード出来たら、下のように「layout」を変更しよう
# レイアウト（画面構成）
col1 = eg.Column([[eg.Image("janken_gu.png", size=(100, 100))], [eg.Button("グー")]])
col2 = eg.Column([[eg.Image("janken_choki.png", size=(100, 100))], [eg.Button("チョキ")]])
col3 = eg.Column([[eg.Image("janken_pa.png", size=(100, 100))], [eg.Button("パー")]])
layout = [
[eg.Text("じゃんけんの手を選ぼう！")],
[col1, col2, col3],
[eg.Text("", key="result")]
]なんか、突然「eg.Column()」てのが出てきたけど、これは何？？普通にlayoutの中で「[]」を増やして作ったらダメなの？？
layoutは基本的に縦方向の並びと横方向の並びで2次元の配列でしか配置の調整ができないんだよね
だけど、「eg.Column()」は小さなレイアウトを作ることが出来るんだ
それをlayoutに入れることで細かい配置の調整が出来るようになるんだよね
そうなんだ！じゃあデザインを調整する時にはしっかり覚えとかないとね！！
おお！一気に雰囲気出るね！
そうでしょ
そしたら、次の項目では相手のじゃんけんの手を出す仕組みを作ろうか！
この時点での全体のプログラム
import TkEasyGUI as eg
# レイアウト（画面構成）
col1 = eg.Column([[eg.Image("janken_gu.png", size=(100, 100))], [eg.Button("グー")]])
col2 = eg.Column([[eg.Image("janken_choki.png", size=(100, 100))], [eg.Button("チョキ")]])
col3 = eg.Column([[eg.Image("janken_pa.png", size=(100, 100))], [eg.Button("パー")]])
layout = [
[eg.Text("じゃんけんの手を選ぼう！")],
[col1, col2, col3],
[eg.Text("", key="result")]
]
# ウィンドウを作成
window = eg.Window("じゃんけんアプリ", layout)
# イベントループ（閉じるまで表示）
while True:
event, values = window.read()
if event in ["グー", "チョキ", "パー"]:
window["result"].update(f"押したボタンは「{event}」です")
if event is eg.WINDOW_CLOSED:
break
# ウィンドウを閉じる
window.close()