初心者向け No.078

テキストアニメーション

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

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ） ⏱️ 制作時間: 30〜90分

📋 目次

1. アプリ概要
2. 機能一覧
3. 事前準備・環境
4. 完全なソースコード
5. コード解説
6. ステップバイステップガイド
7. カスタマイズアイデア
8. よくある問題と解決法
9. 練習問題

1. アプリ概要

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

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

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

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

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

2. 機能一覧

テキストアニメーションのメイン機能
直感的なGUIインターフェース
入力値のバリデーション
エラーハンドリング
結果の見やすい表示
クリア機能付き

3. 事前準備・環境

ℹ️

動作確認環境

Python 3.10 以上 / Windows・Mac・Linux すべて対応

以下の環境で動作確認しています。

Python 3.10 以上
OS: Windows 10/11・macOS 12+・Ubuntu 20.04+

4. 完全なソースコード

💡

コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

✅ 追加インストール不要（標準ライブラリのみ使用）

app078.py

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.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. コード解説

テキストアニメーションのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

クラス設計とコンストラクタ

App078クラスにアプリの全機能をまとめています。__init__でウィンドウ設定、_build_ui()でUI構築、process()でメイン処理を担当します。責任の分離により、コードが読みやすくなります。