Markdownエディター

1. アプリ概要

左側でMarkdown入力し右側で書式プレビューをリアルタイム表示する分割エディター。正規表現の簡易変換とHTMLエクスポート。

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

このアプリは「ユーティリティ」カテゴリです。小回りの効くユーティリティは Python の真骨頂で、汎用的なユーザー操作を組み合わせる発想が他のアプリにもそのまま流用できます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

コピー＆実行で動作確認 → コード解説で構造理解 → カスタマイズで応用、の 3 ステップで進めると、短時間で本質を押さえられます。

アプリを完成させた後は、自分の使い方に合わせて改造するのが学びを定着させる近道です。カスタマイズ章のアイデアを足がかりに、独自機能を一つ追加してみてください。

2. 機能一覧

• ループで生成するボタン群（ボタンごとに対応する処理を接続）
• キー <Control-n> から _new() を実行
• キー <Control-o> から _open() を実行
• キー <Control-s> から _save() を実行
• キー <KeyRelease> から _on_change() を実行
• filedialog.askopenfilename() によるファイル選択ダイアログ
• filedialog.asksaveasfilename() によるファイル選択ダイアログ
• messagebox.askyesno()・messagebox.showerror()・messagebox.showinfo() によるダイアログ通知
• ウィンドウはタイトル「Markdownエディター」・サイズ 1060x660 で起動

3. 事前準備・環境

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

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

追加のインストールは不要です（標準ライブラリのみ）。

4. 完全なソースコード

import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os

try:
    from PIL import Image, ImageTk
    PIL_AVAILABLE = True
except ImportError:
    PIL_AVAILABLE = False


class App091:
    """Markdownエディター"""

    # 簡易Markdown → HTML変換
    def __init__(self, root):
        self.root = root
        self.root.title("Markdownエディター")
        self.root.geometry("1060x660")
        self.root.minsize(1060, 660)
        self.root.configure(bg="#0d1117")
        self._current_path = None
        self._modified = False
        self._build_ui()
        self._load_sample()

    def _build_ui(self):
        # メニューバー
        menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
                           activebackground="#1f6feb")
        file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
        file_menu.add_command(label="新規", accelerator="Ctrl+N",
                               command=self._new)
        file_menu.add_command(label="開く", accelerator="Ctrl+O",
                               command=self._open)
        file_menu.add_command(label="保存", accelerator="Ctrl+S",
                               command=self._save)
        file_menu.add_command(label="名前を付けて保存",
                               command=self._save_as)
        file_menu.add_separator()
        file_menu.add_command(label="HTMLエクスポート",
                               command=self._export_html)
        menubar.add_cascade(label="ファイル", menu=file_menu)
        self.root.configure(menu=menubar)

        # キーバインド
        self.root.bind("<Control-n>", lambda e: self._new())
        self.root.bind("<Control-o>", lambda e: self._open())
        self.root.bind("<Control-s>", lambda e: self._save())

        header = tk.Frame(self.root, bg="#161b22", pady=6)
        header.pack(fill=tk.X)
        tk.Label(header, text="📝 Markdownエディター",
                 font=("Noto Sans JP", 12, "bold"),
                 bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        # ツールバー (Markdown ショートカット)
        tb = tk.Frame(self.root, bg="#161b22", pady=2)
        tb.pack(fill=tk.X)
        buttons = [
            ("B", self._insert_bold,      "太字"),
            ("I", self._insert_italic,    "斜体"),
            ("H1", self._insert_h1,       "見出し1"),
            ("H2", self._insert_h2,       "見出し2"),
            ("H3", self._insert_h3,       "見出し3"),
            ("―", self._insert_hr,        "水平線"),
            ("○", self._insert_ul,        "箇条書き"),
            ("1.", self._insert_ol,       "番号付きリスト"),
            ("[]", self._insert_checkbox, "チェックボックス"),
            ("```", self._insert_code,    "コードブロック"),
            ("🔗", self._insert_link,     "リンク"),
        ]
        for label, cmd, tip in buttons:
            btn = tk.Button(tb, text=label, command=cmd,
                             bg="#21262d", fg="#c9d1d9",
                             relief=tk.FLAT, font=("Arial", 9),
                             padx=8, pady=3,
                             activebackground="#30363d", bd=0)
            btn.pack(side=tk.LEFT, padx=1)

        # 分割ビュー
        paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: Markdown入力
        left = tk.Frame(paned, bg="#0d1117")
        paned.add(left, weight=1)
        tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
                 font=("Arial", 8)).pack(anchor="w")
        self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
                                font=("Courier New", 10), relief=tk.FLAT,
                                insertbackground="white", wrap=tk.WORD,
                                tabs="4c", undo=True)
        lsb = ttk.Scrollbar(left, command=self.md_text.yview)
        self.md_text.configure(yscrollcommand=lsb.set)
        lsb.pack(side=tk.RIGHT, fill=tk.Y)
        self.md_text.pack(fill=tk.BOTH, expand=True)
        self.md_text.bind("<KeyRelease>", self._on_change)

        # シンタックスハイライトタグ
        self.md_text.tag_configure("heading",   foreground="#4fc3f7",
                                    font=("Courier New", 11, "bold"))
        self.md_text.tag_configure("bold",      foreground="#ffa726",
                                    font=("Courier New", 10, "bold"))
        self.md_text.tag_configure("italic",    foreground="#ab47bc",
                                    font=("Courier New", 10, "italic"))
        self.md_text.tag_configure("code",      foreground="#b5e853",
                                    background="#1e1e1e")
        self.md_text.tag_configure("link",      foreground="#26a69a",
                                    underline=True)
        self.md_text.tag_configure("hr",        foreground="#555")
        self.md_text.tag_configure("list",      foreground="#ef5350")

        # 右: プレビュー
        right = tk.Frame(paned, bg="#1e1e1e")
        paned.add(right, weight=1)
        tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
                 font=("Arial", 8)).pack(anchor="w")
        self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
                                font=("Arial", 10), relief=tk.FLAT,
                                state=tk.DISABLED, wrap=tk.WORD,
                                padx=8, pady=4)
        psb = ttk.Scrollbar(right, command=self.preview.yview)
        self.preview.configure(yscrollcommand=psb.set)
        psb.pack(side=tk.RIGHT, fill=tk.Y)
        self.preview.pack(fill=tk.BOTH, expand=True)

        # プレビュータグ
        self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
                                    foreground="#58a6ff")
        self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
                                    foreground="#79c0ff")
        self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
                                    foreground="#a5d6ff")
        self.preview.tag_configure("bold",   font=("Arial", 10, "bold"))
        self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
        self.preview.tag_configure("code",   font=("Courier New", 9),
                                    background="#161b22",
                                    foreground="#b5e853")
        self.preview.tag_configure("hr",     foreground="#30363d")
        self.preview.tag_configure("link",   foreground="#26a69a", underline=True)
        self.preview.tag_configure("blockquote", foreground="#8b949e",
                                    lmargin1=20, lmargin2=20)

        self.status_var = tk.StringVar(value="準備完了")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#21262d", fg="#8b949e", font=("Courier New", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

    def _load_sample(self):
        sample = """# Markdown エディター

## 概要

これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。

---

## 機能

- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート

## コード例

```python
def hello(name: str) -> str:
    return f"Hello, {name}!"
```

## リンク

[Python公式サイト](https://www.python.org)

> これは引用文です。

1. 項目1
2. 項目2
3. 項目3
"""
        self.md_text.insert("1.0", sample)
        self._update_preview()
        self._apply_highlight()

    def _on_change(self, _=None):
        self._modified = True
        self._update_preview()
        self._apply_highlight()
        chars = len(self.md_text.get("1.0", tk.END))
        lines = int(self.md_text.index(tk.END).split(".")[0])
        self.status_var.set(f"行: {lines}  文字: {chars}  {'*変更あり' if self._modified else ''}")

    def _apply_highlight(self):
        text = self.md_text
        for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
            text.tag_remove(tag, "1.0", tk.END)
        content = text.get("1.0", tk.END)

        def highlight(pattern, tag, flags=0):
            for m in re.finditer(pattern, content, flags | re.MULTILINE):
                start = f"1.0 + {m.start()} chars"
                end   = f"1.0 + {m.end()} chars"
                text.tag_add(tag, start, end)

        highlight(r"^#{1,6} .+$",    "heading")
        highlight(r"\*\*[^*]+\*\*",  "bold")
        highlight(r"\*[^*]+\*",      "italic")
        highlight(r"`[^`]+`",        "code")
        highlight(r"\[.+?\]\(.+?\)", "link")
        highlight(r"^---+$",         "hr")
        highlight(r"^[ \t]*[-*+] ",  "list")
        highlight(r"^\d+\. ",        "list")

    def _update_preview(self):
        md = self.md_text.get("1.0", tk.END)
        self.preview.configure(state=tk.NORMAL)
        self.preview.delete("1.0", tk.END)

        for line in md.splitlines():
            self._render_line(line)
            self.preview.insert(tk.END, "\n")

        self.preview.configure(state=tk.DISABLED)

    def _render_line(self, line):
        pv = self.preview
        # 見出し
        m = re.match(r"^(#{1,6}) (.+)$", line)
        if m:
            level = len(m.group(1))
            tag = f"h{min(level, 3)}"
            pv.insert(tk.END, m.group(2), tag)
            return
        # HR
        if re.match(r"^---+$", line):
            pv.insert(tk.END, "─" * 40, "hr")
            return
        # 引用
        m = re.match(r"^> (.+)$", line)
        if m:
            pv.insert(tk.END, "│ " + m.group(1), "blockquote")
            return
        # コードブロック
        if line.strip().startswith("```"):
            pv.insert(tk.END, line, "code")
            return
        # インライン
        parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
        for part in parts:
            if re.match(r"\*\*[^*]+\*\*", part):
                pv.insert(tk.END, part[2:-2], "bold")
            elif re.match(r"\*[^*]+\*", part):
                pv.insert(tk.END, part[1:-1], "italic")
            elif re.match(r"`[^`]+`", part):
                pv.insert(tk.END, part[1:-1], "code")
            elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
                txt = re.match(r"\[([^\]]+)\]", part).group(1)
                pv.insert(tk.END, txt, "link")
            else:
                pv.insert(tk.END, part)

    # ── ツールバーアクション ─────────────────────────────────
    def _wrap_selection(self, before, after=""):
        try:
            sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
            self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
            self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
        except tk.TclError:
            self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
        self._on_change()

    def _insert_bold(self):   self._wrap_selection("**")
    def _insert_italic(self): self._wrap_selection("*")
    def _insert_h1(self):     self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
    def _insert_h2(self):     self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
    def _insert_h3(self):     self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
    def _insert_hr(self):     self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
    def _insert_ul(self):     self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
    def _insert_ol(self):     self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
    def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
    def _insert_code(self):
        self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
        self._on_change()
    def _insert_link(self):
        self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
        self._on_change()

    # ── ファイル操作 ─────────────────────────────────────────
    def _new(self):
        if self._modified:
            if not messagebox.askyesno("確認", "変更を破棄しますか？"):
                return
        self.md_text.delete("1.0", tk.END)
        self._current_path = None
        self._modified = False
        self.status_var.set("新規ファイル")

    def _open(self):
        path = filedialog.askopenfilename(
            filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
                       ("すべて", "*.*")])
        if not path:
            return
        for enc in ("utf-8", "shift-jis", "cp932"):
            try:
                with open(path, encoding=enc) as f:
                    content = f.read()
                break
            except UnicodeDecodeError:
                continue
        self.md_text.delete("1.0", tk.END)
        self.md_text.insert("1.0", content)
        self._current_path = path
        self._modified = False
        self._on_change()
        self.status_var.set(f"開いた: {path}")

    def _save(self):
        if not self._current_path:
            self._save_as()
            return
        self._write(self._current_path)

    def _save_as(self):
        path = filedialog.asksaveasfilename(
            defaultextension=".md",
            filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
        if path:
            self._current_path = path
            self._write(path)

    def _write(self, path):
        try:
            with open(path, "w", encoding="utf-8") as f:
                f.write(self.md_text.get("1.0", tk.END).rstrip())
            self._modified = False
            self.status_var.set(f"保存: {path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))

    def _export_html(self):
        path = filedialog.asksaveasfilename(
            defaultextension=".html",
            filetypes=[("HTML", "*.html")])
        if not path:
            return
        md = self.md_text.get("1.0", tk.END)
        html_body = self._md_to_html(md)
        html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
        try:
            with open(path, "w", encoding="utf-8") as f:
                f.write(html)
            messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))

    def _md_to_html(self, md):
        lines = md.splitlines()
        html  = []
        in_code = False
        for line in lines:
            if line.strip().startswith("```"):
                in_code = not in_code
                html.append("</pre>" if not in_code else '<pre><code>')
                continue
            if in_code:
                html.append(line)
                continue
            m = re.match(r"^(#{1,6}) (.+)$", line)
            if m:
                n = len(m.group(1))
                html.append(f"<h{n}>{m.group(2)}</h{n}>")
                continue
            if re.match(r"^---+$", line):
                html.append("<hr>")
                continue
            m2 = re.match(r"^> (.+)$", line)
            if m2:
                html.append(f"<blockquote>{m2.group(1)}</blockquote>")
                continue
            line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
            line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
            line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
            line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
            if re.match(r"^[ \t]*[-*+] ", line):
                line = f"<li>{line.lstrip(' *-+').strip()}</li>"
            html.append(f"<p>{line}</p>" if line.strip() else "")
        return "\n".join(html)


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

5. コード解説

Markdownエディターのコードを、実際に書かれている実装に沿って解説します。

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

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

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

   新しいファイルを作成して app091.py と保存します。追加のインストールは不要です（PIL は冒頭で try-import されるだけで、現在の機能では未使用のため未インストールでも動きます）。

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

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

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

   title("Markdownエディター")・geometry("1060x660")・configure(bg="#0d1117")・minsize(1060, 660) をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

   ループ生成のボタンは、ペアで受け取った対応する処理をcommand= に渡して接続します。bind("<Control-n>", ...)・bind("<Control-o>", ...)・bind("<Control-s>", ...)・bind("<KeyRelease>", ...) の登録も忘れずに。

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

   アプリの本体である _open()（19行）・_new()（8行）・_on_change()（7行）・_save()（5行） を実装します。

7. 7
   動作確認する

   python app091.py で起動し、各ボタンが反応すること・キー操作（<Control-n>・<Control-o>・<Control-s>・<KeyRelease>）が効くことを確認します。

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。

1. 課題1：機能拡張

   Markdownエディターに新しい機能を1つ追加してみましょう。

2. 課題2：UIの改善

   色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしましょう。

3. 課題3：新しいボタンを追加する

   既存のボタンと同じ書き方で新しいボタンを1つ足し、押されたときに動くメソッドを自作してみましょう。ボタンの作成と command= の接続がセットで身に付きます。