九九表ジェネレーター

1. アプリ概要

任意の数の掛け算表をグリッド表示するアプリ。動的なウィジェット生成の仕組みを学びます。

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

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

完成形を見てから細部の解説に進む流れが効果的です。実行→気になる箇所を解説で確認→自分の手で改造、というサイクルで定着が早まります。

カスタマイズ章では具体的な拡張アイデアを示しています。一つ実装するごとに動作確認することで、変更が予期せぬ副作用を起こさないかも体感できます。

2. 機能一覧

• 「生成」ボタン（generate()）で操作
• <Configure> イベント（ウィンドウ側からの通知）で lambda e: self.canvas.configure(scrollregion=self.canvas.bbox('all')) を自動実行
• ウィンドウはタイトル「九九表ジェネレーター」・サイズ 560x480 で起動

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


class App30:
    """九九表ジェネレーター"""

    def __init__(self, root):
        self.root = root
        self.root.title("九九表ジェネレーター")
        self.root.geometry("560x480")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()
        self.generate()

    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()

        control_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=10)
        control_frame.pack(fill=tk.X)
        tk.Label(control_frame, text="段数 (最大まで):", bg="#f8f9fc",
                 font=("Noto Sans JP", 11)).pack(side=tk.LEFT)
        self.max_var = tk.IntVar(value=9)
        ttk.Spinbox(control_frame, from_=2, to=20, textvariable=self.max_var,
                    width=5, font=("Arial", 12)).pack(side=tk.LEFT, padx=8)
        ttk.Button(control_frame, text="生成", command=self.generate).pack(side=tk.LEFT)

        # グリッドを表示するフレーム (スクロール付き)
        frame = tk.Frame(self.root, bg="#f8f9fc")
        frame.pack(fill=tk.BOTH, expand=True, padx=8, pady=(0, 8))

        self.canvas = tk.Canvas(frame, bg="#f8f9fc")
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

        v_sb = ttk.Scrollbar(frame, orient=tk.VERTICAL, command=self.canvas.yview)
        v_sb.pack(side=tk.RIGHT, fill=tk.Y)
        h_sb = ttk.Scrollbar(self.root, orient=tk.HORIZONTAL, command=self.canvas.xview)
        h_sb.pack(fill=tk.X)
        self.canvas.configure(xscrollcommand=h_sb.set, yscrollcommand=v_sb.set)

        self.inner_frame = tk.Frame(self.canvas, bg="#f8f9fc")
        self.canvas_window = self.canvas.create_window(0, 0, anchor="nw", window=self.inner_frame)
        self.inner_frame.bind("<Configure>",
                              lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")))

    def generate(self):
        for w in self.inner_frame.winfo_children():
            w.destroy()

        n = self.max_var.get()
        cell_w = 5

        # ヘッダ行
        tk.Label(self.inner_frame, text="×", width=cell_w,
                 bg="#3776ab", fg="white", font=("Arial", 10, "bold"),
                 relief=tk.FLAT).grid(row=0, column=0, padx=1, pady=1)
        for j in range(1, n + 1):
            tk.Label(self.inner_frame, text=str(j), width=cell_w,
                     bg="#3776ab", fg="white", font=("Arial", 10, "bold"),
                     relief=tk.FLAT).grid(row=0, column=j, padx=1, pady=1)

        for i in range(1, n + 1):
            # ヘッダ列
            tk.Label(self.inner_frame, text=str(i), width=cell_w,
                     bg="#3776ab", fg="white", font=("Arial", 10, "bold"),
                     relief=tk.FLAT).grid(row=i, column=0, padx=1, pady=1)
            for j in range(1, n + 1):
                val = i * j
                # 対角線は強調
                is_diag = (i == j)
                bg = "#fff3cd" if is_diag else "#ffffff"
                fg = "#e67e22" if is_diag else "#222"
                tk.Label(self.inner_frame, text=str(val), width=cell_w,
                         bg=bg, fg=fg, font=("Arial", 10, "bold" if is_diag else "normal"),
                         relief=tk.FLAT).grid(row=i, column=j, padx=1, pady=1)


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

5. コード解説

九九表ジェネレーターのコードを、実際に書かれている実装に沿って解説します。

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

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

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

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

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

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

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

   title("九九表ジェネレーター")・geometry("560x480")・configure(bg="#f8f9fc") をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×4・tk.Label×3（ほかにループでも生成）・ttk.Spinbox・ttk.Button・tk.Canvas・ttk.Scrollbar×2 を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

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

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

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

   アプリの本体である generate()（30行） を実装します。

7. 7
   動作確認する

   python app30.py で起動し、各ボタンが反応することを確認します。

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。起動すると9段までの表が自動で作られ（14行・27行）、「生成」を押すたびに今の表を消してから作り直します（51〜52行）。表はウィンドウの中だけのもので、どこにも保存されません。

1. 課題1：答えが偶数のマスに色を付ける

   いまは対角線（i == j）だけが黄色で強調されます（74〜76行）。答えが偶数のマスにも薄い色を付けて、九九の並びを見やすくしましょう。

   期待結果：9段で生成すると 2 6 8 のような偶数のマスが薄い色になり、対角線の 1 4 9 は今までどおり黄色（#fff3cd）のまま

   合格条件

   • 答えが偶数のマスだけ背景色が変わる
   • 対角線のマスは偶数（4・16・36・64）でも黄色のまま
   • 見出しの行と列（58〜70行）の青色は変わらない

   ヒント①（どこを触るか）: 触るのは1か所です。背景色を決める75行です。
   ヒント②（使うもの）: bg = "#fff3cd" if is_diag else ("#eef5fb" if val % 2 == 0 else "#ffffff") のように条件を入れ子にすると、3通りに分けられます。答えの値は72行の val にもう入っています。
   つまずきやすい点: 偶数の判定を先に書くと、4 や 16 のような偶数の対角線から黄色が消えます。75行は三項演算子で色を1つしか選ばないため、対角線の判定を必ず先に置いてください。文字色を決める76行は別の行なので、背景だけ変えたいときは触らなくてかまいません。

2. 課題2：段数の入力が空や範囲外でも落ちないようにする

   段数の欄はキーボードで直接書き換えられます（28行）。空のまま「生成」を押すと表が消えて何も出なくなり、50 と打つと 2,601 個のラベルが作られます。

   期待結果：段数を空にして「生成」を押しても表が消えず、「2〜20の数字を入れてください」と知らせが出る

   合格条件

   • 空欄や 50 のような範囲外では表が作り直されず、知らせが出る
   • 2〜20 の数字なら今までどおり表が作られる
   • 知らせが出たあとも、直前に表示していた表がそのまま残る

   ヒント①（どこを触るか）: 触るのは1か所です。段数を読む54行を、表を消す51行の手前へ動かし、そこで try と範囲の確認をします。
   ヒント②（使うもの）: try: n = self.max_var.get() と except tk.TclError: で受け、messagebox.showwarning("警告", "2〜20の数字を入れてください") のあと return で抜けます。messagebox は2行目で読み込み済みですが、このコードではまだ一度も使っていません。
   つまずきやすい点: self.max_var は IntVar（27行）なので、欄が空のときは get() そのものが tk.TclError を出します。if not ... の形では守れません。54行に try を付けるだけだと、51〜52行が先に動いて表を消したあとなので、画面が空のまま何も出ない状態になります。ttk.Spinbox の from_=2, to=20（28行）は上下ボタンの範囲で、キーボード入力までは止めません。

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

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