230917 知識ゼロで始めるアプリ開発 #6
前回は不甲斐ない結果でしたね。
知識がゼロなので仕方がないと思いつつも、知識がゼロとは言っていないので、もう少し基本的なところに立ち返ってなんとか自力で解決できなかったのかと思うばかりです。
ということで今日は軽微な修正でなんとかしていきます。
次の目標としては
単語を表示する
↓
「わかる」「わからない」ボタンから単語を覚えたかどうかをユーザーが入力
↓
「わかる」単語はもう表示せず、「わからない」単語については再度表示を続ける
という機能を追加していきたいです。そうするとやることは以下の2つ
①「わかる」「わからない」ボタンの追加
②ボタン操作後の単語のふるい分け
とりあえず、①から解決していきましょう。
まずはソースコードのおさらい
import tkinter as tk
import random
class WordApp:
def __init__(self, root):
self.root = root
self.root.title("英単語ランダム表示アプリ")
self.word_label = tk.Label(root, text="", font=("Helvetica", 24))
self.word_label.pack(padx=20, pady=20, expand=True, fill="both")
self.load_words()
self.show_random_word()
self.next_button = tk.Button(root, text="次の単語", command=self.show_random_word)
self.next_button.pack()
def load_words(self):
try:
with open("words.txt", "r") as file:
self.words = [line.strip() for line in file.readlines()]
except FileNotFoundError:
self.words = ["No words found"]
def show_random_word(self):
random_word = random.choice(self.words)
font_size = max(20, min(48, 400 // len(random_word)))
self.word_label.config(text=random_word, font=("Helvetica", font_size))
if __name__ == "__main__":
root = tk.Tk()
app = WordApp(root)
root.geometry("400x200")
root.mainloop()
まぁ多分、self.next_buttonのところで定義がされているんでしょうね。
単純にボタンを2つにする(とりあえずどちらを押しても次の単語が表示されるような設定)なら、これでどうでしょう。
self.wakaru_button = tk.Button(root, text="わかる", command=self.show_random_word)
self.wakaru_button.pack()self.wakaranai_button = tk.Button(root, text="わからない", command=self.show_random_word)
self.wakaranai_button.pack()
まぁ単純すぎましたがうまくいきました。
でも想像してたのは、縦並びじゃなくて横並びなんだよな。
ということでもうひと手間加えます。
元のコードはpack()で記載されていることがわかります。
今回はウィンドウサイズが400(横)×200(縦)なので、横は100と300の位置に、縦は150の位置に来るようにplace()メゾットで改良してみましょう。
self.wakaru_button = tk.Button(root, text="わかる", command=self.show_random_word)
self.wakaru_button.place(x=100,y=150)self.wakaranai_button = tk.Button(root, text="わからない", command=self.show_random_word)
self.wakaranai_button.place(x=300,y=150)
ありゃー。この座標ってボタンの中心位置ではなく、左端だったんですね。
ということは、ボタンサイズおよびボタンの中心がどこに来るかからボタンの左端の位置を定義すれば良いですね。でもボタンサイズが定義されている感じではないので、定義してあげましょう。
とりあえず、20×20の正方形にしてみますか。
self.wakaru_button = tk.Button(root, text="わかる", command=self.show_random_word, width= 20, height = 20)
self.wakaru_button.place(x=100,y=150)self.wakaranai_button = tk.Button(root, text="わからない", command=self.show_random_word, width= 20, height = 20)
self.wakaranai_button.place(x=300,y=150)
なんかイヤな予感…
やっぱり。20×20は大きすぎましたね。
いやでも、ウィンドウサイズは400×200だしこんなにはみ出さなくても良いのでは?
もしかしてボタンのサイズ定義はピクセルとは違うのか?
違うのね。(余談だけどこういう時こそChatGPTの正しい使い方だと思うわ)
とりあえず、ちょうどいいサイズ感を探してヨコタテ5×2で指定しました。
でもよく考えたら、ボタンを自然な位置に配置するためには、ピクセルサイズでボタンサイズを指定してやらないと、中心位置がどこかとかそういうのがわかんないですね。
次はそこを改良しなければ。
