テキストアニメーション

1. アプリ概要

文字がタイプライター風に1文字ずつ表示されるアニメーション。after()の再帰呼び出し演出を学べる。

このアプリはbasicsカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★☆ です。

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

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

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

2. 機能一覧

• 「再生」ボタン（start()）・「停止」ボタン（stop()）・「クリア」ボタン（clear_output()）で操作
• messagebox.showwarning() によるダイアログ通知
• ウィンドウはタイトル「テキストアニメーション」・サイズ 700x550 で起動

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 App078:
    """テキストアニメーション: タイプライター風に1文字ずつ表示"""

    def __init__(self, root):
        self.root = root
        self.root.title("テキストアニメーション")
        self.root.geometry("700x550")
        self.root.minsize(700, 550)
        self.root.configure(bg="#f8f9fc")
        self._after_id = None  # アニメーションのスケジュール ID
        self._build_ui()

    def _build_ui(self):
        """UI を構築する"""
        # タイトル
        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 = tk.Frame(self.root, bg="#f8f9fc", padx=15, pady=15)
        main.pack(fill=tk.BOTH, expand=True)

        # 入力テキスト
        input_frame = ttk.LabelFrame(main, text="表示するテキスト", padding=6)
        input_frame.pack(fill=tk.X)
        self.input_text = tk.Text(input_frame, height=4, font=("Noto Sans JP", 11))
        self.input_text.pack(fill=tk.X)
        self.input_text.insert("1.0", "こんにちは、Python の世界へようこそ!\nこのアプリではタイプライター風のアニメーションで文字を表示します。")

        # 速度コントロール
        speed_frame = ttk.LabelFrame(main, text="表示速度 (ミリ秒/文字)", padding=6)
        speed_frame.pack(fill=tk.X, pady=8)
        self.speed_var = tk.IntVar(value=80)
        ttk.Scale(
            speed_frame, from_=10, to=300, orient=tk.HORIZONTAL,
            variable=self.speed_var
        ).pack(fill=tk.X, side=tk.LEFT, expand=True)
        self.speed_label = ttk.Label(speed_frame, text="80 ms")
        self.speed_label.pack(side=tk.RIGHT, padx=8)
        self.speed_var.trace_add("write", lambda *a: self.speed_label.config(text=f"{self.speed_var.get()} ms"))

        # 操作ボタン
        btn = tk.Frame(main, bg="#f8f9fc")
        btn.pack(pady=8)
        ttk.Button(btn, text="再生", command=self.start).pack(side=tk.LEFT, padx=4)
        ttk.Button(btn, text="停止", command=self.stop).pack(side=tk.LEFT, padx=4)
        ttk.Button(btn, text="クリア", command=self.clear_output).pack(side=tk.LEFT, padx=4)

        # 出力エリア
        out_frame = ttk.LabelFrame(main, text="出力", padding=6)
        out_frame.pack(fill=tk.BOTH, expand=True)
        self.output = tk.Text(
            out_frame, font=("Noto Sans JP", 14), bg="#1e1e1e",
            fg="#a8e6a8", insertbackground="#a8e6a8", wrap=tk.WORD
        )
        self.output.pack(fill=tk.BOTH, expand=True)

    def start(self):
        """アニメーション再生を開始する"""
        self.stop()
        text = self.input_text.get("1.0", tk.END).rstrip("\n")
        if not text:
            messagebox.showwarning("警告", "表示するテキストを入力してください")
            return
        self.output.delete("1.0", tk.END)
        self._chars = list(text)
        self._index = 0
        self._tick()

    def _tick(self):
        """1文字ずつ追加して再帰スケジュール"""
        if self._index >= len(self._chars):
            self._after_id = None
            return
        ch = self._chars[self._index]
        self.output.insert(tk.END, ch)
        self.output.see(tk.END)
        self._index += 1
        delay = max(10, int(self.speed_var.get()))
        self._after_id = self.root.after(delay, self._tick)

    def stop(self):
        """アニメーション再生を停止する"""
        if self._after_id is not None:
            self.root.after_cancel(self._after_id)
            self._after_id = None

    def clear_output(self):
        """出力エリアをクリアする"""
        self.stop()
        self.output.delete("1.0", tk.END)


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

5. コード解説

テキストアニメーション: タイプライター風に1文字ずつ表示のコードを、実際に書かれている実装に沿って解説します。

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

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

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

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

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

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

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

   title("テキストアニメーション")・geometry("700x550")・configure(bg="#f8f9fc")・minsize(700, 550) をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（start()・stop()・clear_output()）につなぎます。

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

   アプリの本体である _tick()（11行）・start()（11行）・stop()（5行）・clear_output()（4行） を実装します。

7. 7
   動作確認する

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

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は全アプリ共通の定型課題です）。

1. 課題1：速度表示に「1秒あたり何文字か」を併記する

   いまは「80 ms」とだけ出ています。ここを「80 ms（約12.5文字/秒）」のように、1秒あたりの文字数も一緒に出します。

   期待結果：起動直後の表示が「80 ms（約12.5文字/秒）」になる。スライダーを 100 ms に動かすと「100 ms（約10.0文字/秒）」に変わる。

   合格条件

   • スライダーを左端（10 ms）にすると「約100.0文字/秒」になる
   • スライダーを一度も動かしていない起動直後でも併記が出ている
   • 文字数は小数第1位まで表示する

   ヒント①（どこを触るか）: 速度を文字列にしているのは2か所です。1つ目は _build_ui() の ttk.Label(speed_frame, text="80 ms") で、起動直後に出る初期値になります。2つ目はその下の self.speed_var.trace_add("write", ...) のラムダです。
   ヒント②（使うもの）: 1秒あたりの文字数は 1000 / ミリ秒 です。整形は f"{ms} ms（約{1000 / ms:.1f}文字/秒）" の形になります。
   つまずきやすい点: 片方だけ直すと、起動直後と動かしたあとで表記が食い違います。同じ式を2か所に書くことになるので、小さなメソッドに切り出して両方から呼ぶと直し忘れを防げます。

2. 課題2：停止したところから続きを再生する

   いまの「停止」は予約を取り消すだけで、「再生」を押すと先頭からやり直しになります。「続きから」ボタンを足し、止めた位置の次の文字から再開できるようにします。

   期待結果：20文字ほど表示された時点で「停止」を押し、「続きから」を押すと 21 文字目から続きが出る（先頭には戻らない）。

   合格条件

   • 再生中に「続きから」を押しても、表示が二重に速くならない
   • 最後まで表示し終わったあとに押してもエラーにならない
   • 「クリア」のあとに押してもエラーにならない

   ヒント①（どこを触るか）: ボタンは _build_ui() の btn フレームに、既存の3つと同じ書き方で足します。再開の処理は self._tick() を呼ぶだけの新しいメソッドです。
   ヒント②（使うもの）: 二重再生を防ぐには if self._after_id is not None: return を先頭に置きます。_after_id は __init__() で None になり、_tick() の最後で予約 ID に更新されます。
   つまずきやすい点: self._chars と self._index は start() の中で初めて作られる属性です。一度も「再生」を押さずに「続きから」を押すと AttributeError になります。hasattr(self, "_chars") などで先に確かめてください。

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

   処理結果をファイルに保存する機能を追加しましょう。