ログインフォーム

1. アプリ概要

ユーザー名・パスワード入力フォームのサンプル。Entryのshow属性でパスワードを隠す方法を学びます。

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

このアプリは「入門」カテゴリです。ウィンドウ・ウィジェット・イベントの基本構造を反復することで、後から複雑なアプリを作るときの骨格が身につきます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

コードを読む前に実行することをおすすめします。動いている挙動を先に把握しておくと、解説で出てくる関数や処理がどこに対応するかが頭に入りやすくなります。

応用のヒントは、機能を 1 つ増やす・見た目を整える・例外を一つでも丁寧に扱う、のいずれかから始めるのがおすすめです。

2. 機能一覧

• 「ログイン」ボタン（login()）・「ログアウト」ボタン（_logout()）で操作
• キー <Return> から login() を実行
• ウィンドウはタイトル「ログインフォーム」・サイズ 407x484 で起動

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 App33:
    """ログインフォーム"""

    # サンプルユーザー（実際のアプリではDBなどで管理）
    USERS = {
        "admin": "password123",
        "user1": "hello",
        "python": "guido",
    }

    def __init__(self, root):
        self.root = root
        self.root.title("ログインフォーム")
        self.root.geometry("407x484")
        self.root.minsize(407, 484)
        self.root.configure(bg="#f8f9fc")
        self.attempts = 0
        self.max_attempts = 3
        self._build_ui()

    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=40, pady=24)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # アイコン
        tk.Label(main_frame, text="🔐", font=("Segoe UI Emoji", 36),
                 bg="#f8f9fc").pack(pady=(0, 16))

        # フォーム
        form_frame = ttk.LabelFrame(main_frame, text="アカウント情報を入力", padding=14)
        form_frame.pack(fill=tk.X)

        tk.Label(form_frame, text="ユーザー名:").grid(row=0, column=0, sticky="w", pady=6)
        self.username_entry = ttk.Entry(form_frame, width=20, font=("Arial", 12))
        self.username_entry.grid(row=0, column=1, padx=8, sticky="ew")

        tk.Label(form_frame, text="パスワード:").grid(row=1, column=0, sticky="w", pady=6)
        self.password_entry = ttk.Entry(form_frame, width=20, font=("Arial", 12), show="●")
        self.password_entry.grid(row=1, column=1, padx=8, sticky="ew")
        self.password_entry.bind("<Return>", lambda e: self.login())

        # パスワード表示切替
        self.show_pw = tk.BooleanVar(value=False)
        ttk.Checkbutton(form_frame, text="パスワードを表示",
                        variable=self.show_pw,
                        command=self.toggle_pw).grid(row=2, column=1, sticky="w")
        form_frame.columnconfigure(1, weight=1)

        # ログインボタン
        tk.Button(main_frame, text="ログイン",
                  font=("Noto Sans JP", 13, "bold"),
                  bg="#3776ab", fg="white", activebackground="#2a5a8a",
                  relief=tk.FLAT, padx=20, pady=8,
                  command=self.login).pack(pady=14)

        self.status_label = tk.Label(main_frame, text="",
                                     bg="#f8f9fc", font=("Noto Sans JP", 11))
        self.status_label.pack()

        # ヒント
        tk.Label(main_frame, text="ヒント: ユーザー名「admin」パスワード「password123」",
                 bg="#f8f9fc", fg="#aaa", font=("Noto Sans JP", 9)).pack(pady=(8, 0))

    def toggle_pw(self):
        self.password_entry.config(show="" if self.show_pw.get() else "●")

    def login(self):
        username = self.username_entry.get().strip()
        password = self.password_entry.get()

        if not username or not password:
            self.status_label.config(text="❗ ユーザー名とパスワードを入力してください", fg="#e67e22")
            return

        self.attempts += 1

        if username in self.USERS and self.USERS[username] == password:
            self.status_label.config(text=f"✅ ログイン成功！ようこそ、{username} さん！", fg="#27ae60")
            self.root.after(1500, self._show_welcome, username)
        else:
            remaining = self.max_attempts - self.attempts
            if remaining <= 0:
                self.status_label.config(text="🔒 試行回数オーバー。ロックされました", fg="#e74c3c")
                self.username_entry.config(state=tk.DISABLED)
                self.password_entry.config(state=tk.DISABLED)
            else:
                self.status_label.config(
                    text=f"❌ ユーザー名またはパスワードが違います（残り{remaining}回）", fg="#e74c3c")
            self.password_entry.delete(0, tk.END)

    def _show_welcome(self, username):
        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)
        tk.Label(frame, text="✅ ログイン成功",
                 font=("Noto Sans JP", 18, "bold"), bg="#f8f9fc", fg="#27ae60").pack(pady=(0, 12))
        tk.Label(frame, text=f"ようこそ、{username} さん！",
                 font=("Noto Sans JP", 14), bg="#f8f9fc").pack()
        ttk.Button(frame, text="ログアウト", command=self._logout).pack(pady=20)

    def _logout(self):
        for w in self.root.winfo_children():
            w.destroy()
        self.attempts = 0
        self._build_ui()


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

5. コード解説

ログインフォームのコードを、実際に書かれている実装に沿って解説します。

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

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

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

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

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

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

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

   title("ログインフォーム")・geometry("407x484")・configure(bg="#f8f9fc")・minsize(407, 484) をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

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

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

   アプリの本体である _show_welcome()（10行）・login()（23行）・_logout()（5行） を実装します。

7. 7
   動作確認する

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

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は全アプリ共通の定型課題です）。このアプリの USERS はパスワードを平文で持つ学習用のサンプルです。課題を試すときも、課題3でファイルに保存するときも、実際に使っているパスワードは書かないでください。

1. 課題1：ユーザー名欄でも Enter を効かせて、起動直後にカーソルを合わせる

   いま <Return> を登録しているのはパスワード欄だけです。ユーザー名欄でも Enter でログインできるようにし、起動直後はユーザー名欄にカーソルが入るようにします。

   期待結果：起動したらすぐユーザー名を打ち始められる。ユーザー名欄で Enter を押すとログインが実行される。

   合格条件

   • 起動直後のカーソルがユーザー名欄にある
   • ユーザー名欄の Enter で login() が動く（パスワード欄の Enter も今までどおり）
   • ログアウトしてフォームに戻ったときも同じ動きになる

   ヒント①（どこを触るか）: 触るのは2か所です。self.username_entry.grid(...) の直後に bind() を1行、_build_ui() の最後にカーソル移動を1行足します。手本はパスワード欄の self.password_entry.bind("<Return>", lambda e: self.login()) です。
   ヒント②（使うもの）: カーソル移動は self.username_entry.focus_set() です。_logout() は _build_ui() を呼び直す作りなので、この1行だけでログアウト後にも効きます。
   つまずきやすい点: bind("<Return>", self.login) と書くとイベント引数が余り、TypeError になります。command= と違って bind() のコールバックは引数を1つ受け取るため、lambda e: を挟んでください。

2. 課題2：ロックしたらログインボタンも押せなくする

   3回失敗するとロックのメッセージが出て、ユーザー名欄とパスワード欄が無効になります。ただしログインボタンはそのまま押せる状態なので、ボタンも一緒に無効にしましょう。

   期待結果：ユーザー名とパスワードを入れて3回続けて失敗すると「🔒 試行回数オーバー」の表示になり、ログインボタンも押せなくなる。

   合格条件

   • ロック後にボタンを押しても表示が変わらない
   • ロックまでの残り回数のメッセージは今までどおり出る
   • ログイン成功後にログアウトすると、ボタンはまた押せる状態に戻る

   ヒント①（どこを触るか）: 触るのは2か所です。ボタンは tk.Button(...).pack(pady=14) と1文なので、生成と pack() に分けて self.login_btn へ入れます。無効化は login() の中で入力欄を state=tk.DISABLED にしている分岐に1行足します。
   ヒント②（使うもの）: 無効化は self.login_btn.config(state=tk.DISABLED) です。戻す処理は要りません。_logout() が _build_ui() を呼び、ボタンごと作り直すためです。
   つまずきやすい点: self.login_btn = tk.Button(...).pack(...) と1文で書くと None が入ります。pack() が返すのは None だからです。あとで config() を呼んだ時点で AttributeError になるので、生成と配置は必ず2文に分けてください。

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

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