まえがき

　こんにちは。kakkoです。
　今回は、GUIをつくりたいと思い、ボタンを押す操作を使って簡単なゲームをつくりました。ゲーム名は「10カウントチャレンジ」です。
どんなゲームかというと、ボタンを長押しすると数字がカウントアップするので、数字がぴったし10になるタイミングでボタンを離そう！というゲームです。つまりは、10秒チャレンジみたいなものです。

　今回、GUIの作成にはtkinterを使いました。

tkinterとは

　tkinterはPythonの標準モジュールであり、それを使うことで簡単にGUIを作成することができます。

　tkinterでのGUI画面の作成は、基本的に以下の3つの手順に沿って行うことができます。

1. ウィンドウの作成
2. フレームの設定・配置
3. ウェジェットの設定・配置

フレームとは、ウェジェットを入れる箱のことです。
ウェジェットとは、ボタンやラベルなどのオブジェクトのことです。

「10カウントチャレンジ」の概要

スタート画面は以下のようになります。

このゲームの動作は次のような流れになります。

1. 「カウント」ボタンを長押しする
2. 「0.00」のカウントが0.01ずつ増える
3. 数字が5.0になると表示が「----」となり、数字が見えなくなる
4. 10カウントになったと思ったらボタンを離す
5. 「けっか」ボタンを押して結果を表示する

数字が増えていく様子は以下のようになります。

結果の表示は以下のようになります。

ソースコードについて

tkinterのインポート

まず、tkinterをインポートします。
以下のコードでtkinterをインポートすることができます。

import tkinter as tk

つづいて、tkinterでのGUI画面の作成の手順に沿ってソースコードを書いていきます。

ウィンドウの作成

ウィンドウの作成と設定のコードは以下のようになります。

root = tk.Tk()

# ウィンドウ作成
root.title('10カウントチャレンジ')
root.geometry('300x300')
root.resizable(False, False)
    #ここに他のコードを書いていく
root.mainloop()

rootというメインウィンドウを作成し、ウィンドウのタイトル、サイズの設定とサイズ変更ができないように設定しています。
そして、root.mainloop()でイベントループを開始して、ユーザからの要求を処理します。

フレームの設定・配置

フレームの設定と配置は以下のようになります。
このソースコードはウィンドウ作成のコードとroot.mainloop()の間に記述します。

# フレームの設定
frame1 = tk.Frame(root, width=300, height=200, bd=5, relief='solid')
frame2 = tk.Frame(root, width=300, height=100, bd=5, relief='solid')

# Frameサイズを固定
frame1.grid_propagate(False)
frame2.grid_propagate(False)

# フレーム設置
frame1.grid(row=0, column=0)
frame2.grid(row=1, column=0)

ウェジェットの設定

今回は、ウェジェットとして、ラベルとボタンを使っています。
このコードはフレームの設定・配置のコードとroot.mainloop()の間に記述します。

ラベルの設定

ラベルは、文字を表示するためのウェジェットです。
今回、コメントを表示するラベルと数字を表示するラベルの2つを設定しています。

コメントのラベル

コメントを表示するラベルは以下のように設定します。

# コメントのラベル
cmnt_text = tk.StringVar()
cmnt_text.set('10カウントぴったりで\nボタンを離そう！')
cmnt_label = tk.Label(frame1, textvariable=cmnt_text, font=('MS UI Gothic', 20))

このラベルは「10カウントぴったりでボタンを離そう！」という文字の部分を設定しています。
コメントのラベルは、tk.Label(ラベルを設置するフレーム, テキストの設定, フォントの設定)をしています。

数字のラベル

数字を表示するラベルは以下のように設定します。

# カウンタ設定
cnt = 0.00
# 数字の表示
text = tk.StringVar()
text.set(f"{cnt:.2f}")
label = tk.Label(frame1, textvariable=text, font=('MS UI Gothic', 40))

数字のラベルはスタート画面における「0.00」の部分になります。
数字はカウントされるのでその管理をcntで行います。cntは0.01ずつ増えるので数字を小数点第2位まで表示させるようにテキストの設定をtext.set(f"{cnt:.2f}")としています。
ラベルの設定はテキストのラベルと同じです。

ボタンの設定

ボタンとは、クリック時の動作を設定できるウェジェットです。
今回、長押しで数字をカウントする「カウント」ボタンと結果を表示する「けっか」ボタンの2つを設定しています。

「カウント」ボタンの設定

「カウント」ボタンの設定は以下のようになります。

# 「カウント」ボタンの設定
button = tk.Button(frame2, text='カウント', command=btn_click, repeatdelay=8, repeatinterval=10)

　ボタンの設定では、基本的に、ボタンを配置するフレーム、ボタンの文字、ボタンを押したときに実行される関数を設定します。

　このボタンは、長押しをするボタンなので、長押しができるオプションのrepeatdelayとrepeatintervalを使っています。
repeatdelayは長押しとして判定する秒数を設定しています。そして、repeatintervalはイベント処理の動作間隔の秒数をミリ秒で設定します。
今回の場合では、ボタンを8ミリ秒以上長押しするとbtn_click関数が動作して、そのあと長押しを続けると10ミリ秒間隔で関数が動作します。

　ここで、btn_click関数は以下のようになります。

  # クリック時に動作させる関数
def btn_click():
    global cnt
    cnt += 0.01
    if(cnt <= 5):
        text.set(f"{cnt:.2f}")
    else:
        text.set('----')

btn_click関数では、cntに0.01を足して、それを数字を表示するラベルのテキストに設定します。そして、cntが5以上になると「----」をテキストに設定することで、5カウントしたあとは、数字が見えなくなるようにしています。

「けっか」ボタンの設定

「けっか」ボタンの設定は以下のようになります。

# 「けっか」のボタン設定
re_button = tk.Button(frame2, text='けっか', command=result)

このボタンでは、ボタンの基本的な設定をしていて、押したらresult関数が動作します。

result関数は以下のようになります。

  # 結果を表示する関数
def result():
    text.set(f"{cnt:.2f}")
    if(cnt > 11):
        cmnt_text.set('おそい！')
    elif(cnt > 10):
        cmnt_text.set('おしい！')
    elif(cnt == 10):
        cmnt_text.set('おめでとう！！')
    elif(cnt >= 9):
        cmnt_text.set('おしい！')
    else:
        cmnt_text.set('はやい！')

　数字を表示するラベルのテキストをcntとして、数字が表示されるようにします。
　そして、cntの値によってコメントのラベルのテキストを変更して、コメントが変化するようにしています。10カウントぴったりだった時は「おめでとう！！」、10から±1の時は「おしい！」、それ以上の時は「おそい！」や「はやい！」というコメントを表示するようにしています。

ウェジェットの配置

ウェジェットの配置は以下のようになります。

 # フレーム設置
frame1.grid(row=0, column=0)
frame2.grid(row=1, column=0)
# ラベル配置
cmnt_label.grid(row=0, column=0)
label.grid(row=1, column=0)
# ボタンを配置
button.grid(row=0, column=0)
re_button.grid(row=0, column=1)

gridというメソッドを使ってウェジェットを配置しています。
row、columnは格子状の縦方向の座標、横方向の座標を表しています。rowは縦方向を表していて、下に行くほど数字が大きくなります。columnは横方向を表していて、右に行くほど数字が大きくなります。rowはy軸、columnはx軸と考えてみると分かりやすいかもしれません。

おわりに

今回はtkinterを使ってGUIを作成しました。
本記事では、ウェジェットとして、ボタンとラベルのみを使用しましたが、tkinterには、他にもチェックボックスやテキストボックスなどいろいろなウェジェットがあります。
GUIの作成に興味のある人はぜひtkinterを使って見てはいかがでしょうか？
最後まで読んでいただきありがとうございました。

参考文献

• PythonでGUIアプリを作成する（tkinter）
• 【Python/tkinter】Button（ボタン）の使い方
• 【Python/tkinter】Label（ラベル）の使い方
• 【Python/tkinter】Widgetの配置（grid）
• Pythonで手軽に桁数指定！初心者でも5分で理解できる10の方法 – Japanシーモア