クイズタイマー

1. アプリ概要

残り時間をカウントダウンして問題を出すタイマークイズ。Progressbarウィジェットの活用を学びます。

このアプリはゲームカテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★★☆ です。

このアプリは「ツール」カテゴリです。日々の作業を自動化する実用ツールは Python が最も得意とする領域です。短いコードで実用性のある成果物が作れる点が魅力です。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

動かしながら読むことが理解の最短経路です。まずはコードをコピーして実行し、想定どおりに動くことを確認したうえで解説と照らし合わせてください。

カスタマイズでは「機能追加」「UI 改善」「エラー耐性」の三方向で考えると視野が広がります。練習問題にもそれぞれの方向の具体例を用意しています。

2. 機能一覧

• 「回答する」ボタン（submit()）・「スキップ」ボタン（skip()）・「もう一度」ボタン（_restart()）で操作
• キー <Return> から submit() を実行
• after(1000, ...) による1000ミリ秒間隔の _tick() 呼び出し（画面の自動更新）
• ウィンドウはタイトル「クイズタイマー」・サイズ 500x440 で起動

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import tkinter as tk
from tkinter import ttk, messagebox
import random


class App36:
    """クイズタイマー"""

    QUESTIONS = [
        {"q": "Pythonの生みの親は？", "a": "グイド・ヴァンロッサム"},
        {"q": "Python 3のprint()はメソッドか関数か？", "a": "関数"},
        {"q": "リストのソートメソッドは？", "a": "sort()"},
        {"q": "Noneの型は？", "a": "NoneType"},
        {"q": "辞書のキーと値を同時に取り出すメソッドは？", "a": "items()"},
        {"q": "文字列を整数に変換する関数は？", "a": "int()"},
        {"q": "Pythonのインデントは何のために使う？", "a": "コードブロックの区切り"},
        {"q": "例外処理に使うキーワードは？", "a": "try / except"},
        {"q": "クラスの初期化メソッドの名前は？", "a": "__init__"},
        {"q": "lambdaは何を定義する？", "a": "無名関数（ラムダ関数）"},
    ]

    def __init__(self, root):
        self.root = root
        self.root.title("クイズタイマー")
        self.root.geometry("500x440")
        self.root.configure(bg="#f8f9fc")
        self.questions = random.sample(self.QUESTIONS, len(self.QUESTIONS))
        self.current = 0
        self.score = 0
        self.time_limit = 15  # 秒
        self.remaining = self.time_limit
        self._after_id = None
        self._build_ui()
        self._load_question()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="クイズタイマー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=14)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # 進捗とタイマー
        top_row = tk.Frame(main_frame, bg="#f8f9fc")
        top_row.pack(fill=tk.X, pady=(0, 8))
        self.progress_label = tk.Label(top_row, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 11), fg="#666")
        self.progress_label.pack(side=tk.LEFT)
        self.timer_label = tk.Label(top_row, text="", bg="#f8f9fc",
                                    font=("Noto Sans JP", 14, "bold"), fg="#e74c3c")
        self.timer_label.pack(side=tk.RIGHT)

        self.timer_bar = ttk.Progressbar(main_frame, maximum=self.time_limit,
                                         mode="determinate", length=440)
        self.timer_bar.pack(fill=tk.X, pady=(0, 12))

        # 問題
        self.question_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 14, "bold"),
                                       wraplength=440, justify="left")
        self.question_label.pack(anchor="w", pady=(0, 14))

        # 回答入力
        tk.Label(main_frame, text="答え:", bg="#f8f9fc",
                 font=("Noto Sans JP", 11)).pack(anchor="w")
        self.answer_entry = ttk.Entry(main_frame, font=("Noto Sans JP", 13), width=30)
        self.answer_entry.pack(anchor="w", pady=(4, 10))
        self.answer_entry.bind("<Return>", lambda e: self.submit())

        btn_row = tk.Frame(main_frame, bg="#f8f9fc")
        btn_row.pack()
        ttk.Button(btn_row, text="回答する", command=self.submit).pack(side=tk.LEFT, padx=6)
        ttk.Button(btn_row, text="スキップ", command=self.skip).pack(side=tk.LEFT, padx=6)

        self.feedback_label = tk.Label(main_frame, text="", bg="#f8f9fc",
                                       font=("Noto Sans JP", 12, "bold"))
        self.feedback_label.pack(pady=8)

    def _load_question(self):
        if self._after_id:
            self.root.after_cancel(self._after_id)
        self.remaining = self.time_limit
        q = self.questions[self.current]
        self.question_label.config(
            text=f"Q{self.current+1}. {q['q']}")
        self.progress_label.config(
            text=f"{self.current+1} / {len(self.questions)}")
        self.answer_entry.delete(0, tk.END)
        self.answer_entry.config(state=tk.NORMAL)
        self.feedback_label.config(text="")
        self._tick()

    def _tick(self):
        self.timer_label.config(text=f"⏳ {self.remaining}秒")
        self.timer_bar["value"] = self.remaining
        if self.remaining <= 5:
            self.timer_label.config(fg="#e74c3c")
        else:
            self.timer_label.config(fg="#3776ab")

        if self.remaining <= 0:
            self.feedback_label.config(
                text=f"⏰ 時間切れ！正解: {self.questions[self.current]['a']}",
                fg="#e74c3c")
            self.answer_entry.config(state=tk.DISABLED)
            self.root.after(2000, self.next_question)
            return

        self.remaining -= 1
        self._after_id = self.root.after(1000, self._tick)

    def submit(self):
        if self.answer_entry.cget("state") == tk.DISABLED:
            return
        answer = self.answer_entry.get().strip()
        correct = self.questions[self.current]["a"]
        if self._after_id:
            self.root.after_cancel(self._after_id)
        self.answer_entry.config(state=tk.DISABLED)
        if answer == correct or answer.lower() == correct.lower():
            self.score += 1
            self.feedback_label.config(text="✅ 正解！", fg="#27ae60")
        else:
            self.feedback_label.config(
                text=f"❌ 不正解。正解: {correct}", fg="#e74c3c")
        self.root.after(1800, self.next_question)

    def skip(self):
        if self._after_id:
            self.root.after_cancel(self._after_id)
        correct = self.questions[self.current]["a"]
        self.feedback_label.config(text=f"→ スキップ。正解: {correct}", fg="#888")
        self.answer_entry.config(state=tk.DISABLED)
        self.root.after(1500, self.next_question)

    def next_question(self):
        self.current += 1
        if self.current >= len(self.questions):
            self._show_result()
        else:
            self._load_question()

    def _show_result(self):
        if self._after_id:
            self.root.after_cancel(self._after_id)
        for w in self.root.winfo_children():
            w.destroy()
        frame = tk.Frame(self.root, bg="#f8f9fc")
        frame.pack(fill=tk.BOTH, expand=True, padx=40, pady=40)
        total = len(self.questions)
        tk.Label(frame, text="クイズ終了！", font=("Noto Sans JP", 20, "bold"),
                 bg="#f8f9fc").pack(pady=(0, 16))
        tk.Label(frame, text=f"スコア: {self.score} / {total}",
                 font=("Noto Sans JP", 22, "bold"), bg="#f8f9fc",
                 fg="#3776ab").pack()
        pct = self.score / total * 100
        msg = "完璧！" if pct == 100 else "素晴らしい！" if pct >= 80 else "良い挑戦！" if pct >= 60 else "次は頑張ろう！"
        tk.Label(frame, text=msg, font=("Noto Sans JP", 13),
                 bg="#f8f9fc").pack(pady=10)
        ttk.Button(frame, text="もう一度", command=self._restart).pack(pady=16)

    def _restart(self):
        self.questions = random.sample(self.QUESTIONS, len(self.QUESTIONS))
        self.current = 0
        self.score = 0
        for w in self.root.winfo_children():
            w.destroy()
        self._build_ui()
        self._load_question()


if __name__ == "__main__":
    root = tk.Tk()
    app = App36(root)
    root.mainloop()

5. コード解説

クイズタイマーのコードを、実際に書かれている実装に沿って解説します。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

1. 1
   ファイルを作成する

   新しいファイルを作成して app36.py と保存します。使うのは random・tkinter だけなので、追加インストールは不要です。

2. 2
   クラスの骨格を作る

   App36 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("クイズタイマー")・geometry("500x440")・configure(bg="#f8f9fc") をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×5・tk.Label×9・ttk.Progressbar・ttk.Entry・ttk.Button×3 を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（submit()・skip()・_restart()）につなぎます。bind("<Return>", ...) の登録も忘れずに。

6. 6
   中心になるメソッドを実装する

   アプリの本体である _tick()（18行）・next_question()（6行）・submit()（15行）など を実装します。定期処理は after(1000, ...) で自分自身を予約し続ける形にします。

7. 7
   動作確認する

   python app36.py で起動し、各ボタンが反応すること・表示が自動で更新されること・キー操作（<Return>）が効くことを確認します。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

8. よくある問題と解決法

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。問題は10問（9〜20行）で、起動のたびに random.sample() が並び順を入れ替えます（27行）。制限時間は全問15秒の固定で（30行）、スコアはどこにも保存されません。

1. 課題1：問題ごとに制限時間を変える

   いまは self.time_limit = 15 が __init__ に書かれていて（30行）、10問とも同じ15秒です。難しい問題だけ長く、やさしい問題は短く設定できるようにしましょう。

   期待結果：20秒に決めた問題では「⏳ 20秒」から、10秒に決めた問題では「⏳ 10秒」から数え始める（97行の表示）

   合格条件

   • 問題が切り替わるたびに、その問題へ決めた秒数から数え始める
   • どの問題でも、開始時の進捗バーが右端まで満ちている
   • 秒数を書いていない問題は今までどおり15秒で動く

   ヒント①（どこを触るか）: 触るのは3か所です。①問題データ QUESTIONS（9〜20行）②_load_question() の85行 ③同じ _load_question() の中へ進捗バーの上限を直す1行。
   ヒント②（使うもの）: 各問題に {"q": ..., "a": ..., "t": 20} のようにキーを足します。q を取り出している86行を85行より前へ移し、そのうえで self.remaining = self.time_limit（もとの85行）の直前に self.time_limit = q.get("t", 15) を1行足します。self.remaining を入れ直す行は消さずに残してください。あわせて self.timer_bar["maximum"] = self.time_limit を足します。
   つまずきやすい点: 順番を入れ替えずに85行で q を使うと UnboundLocalError になります（q を作るのは86行のためです）。もとの85行（self.remaining = self.time_limit）を消すと、残り秒数が前の問題の値のまま残り、2問目からすぐ時間切れになります。進捗バーの上限は56行で作るときに一度渡すだけです。更新しないと10秒の問題でも上限が15のままになり、開始時のバーは 10÷15＝約67% までしか満ちません。

2. 課題2：答えが空のまま「回答する」を押しても判定しない

   何も書かずに「回答する」を押すと、submit() が空の文字列と正解を比べて「❌ 不正解」にします（118〜128行）。押し間違いで1問失うのはもったいないので、空のときは何もしないようにしましょう。

   期待結果：答えの欄が空のまま「回答する」を押しても「❌ 不正解」が出ず、そのまま答えを入力できる

   合格条件

   • 空のまま押しても、正誤の判定（123〜128行）が動かない
   • 空のまま押しても、タイマーが止まらず残り秒数が減り続ける
   • 何か書いてから押したときは、今までどおり正誤が出る

   ヒント①（どこを触るか）: 触るのは1か所です。答えを読み取っている118行の下です。
   ヒント②（使うもの）: if not answer: return を119行の前に足してください。118行の .strip() が前後の空白を落とすため、空白だけを打った場合もこの1行で止まります。71行の Enter キーからも同じ submit() が呼ばれるので、1か所直せば両方に効きます。
   つまずきやすい点: 120〜122行より下へ置くと、after_cancel() でタイマーの予約が消え、入力欄も DISABLED になった状態で止まります。この状態では116〜117行の判定ですぐ抜けるようになり、次の問題へ進む予約（129行）も入らないため、画面が固まったままになります。判定は120行より前です。

3. 課題3：保存機能の追加

   入力値や計算結果をファイルに保存する機能を追加しましょう。jsonやcsvモジュールを使います。