JSONビューアー/エディター

1. アプリ概要

JSONファイルをツリー形式で表示・編集しバリデーションとフォーマットができるエディター。

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

このアプリは「データベース連携」カテゴリです。データベース連携 GUI は永続化と画面更新を結びつける典型例で、トランザクション・スキーマ設計・UI 反映の三点を一度に学べます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

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

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

2. 機能一覧

• 「📂 開く」ボタン（_open()）・「💾 保存」ボタン（_save()）・「✔ 検証」ボタン（_validate()）・「🔄 フォーマット」ボタン（_format()）・「📦 圧縮」ボタン（_minify()）・「📋 コピー」ボタン（_copy()）・「次へ」ボタン（_find_next()）で操作
• キー <KeyRelease> から _on_edit() を実行
• ttk.Treeview による表形式の一覧表示
• filedialog.askopenfilename() によるファイル選択ダイアログ
• filedialog.asksaveasfilename() によるファイル選択ダイアログ
• messagebox.showerror()・messagebox.showinfo() によるダイアログ通知
• ウィンドウはタイトル「JSONビューアー/エディター」・サイズ 1100x680 で起動

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, filedialog
import json
import os
import re


class App058:
    """JSONビューアー/エディター"""

    def __init__(self, root):
        self.root = root
        self.root.title("JSONビューアー/エディター")
        self.root.geometry("1100x680")
        self.root.minsize(1100, 680)
        self.root.configure(bg="#1e1e1e")
        self._filepath = None
        self._build_ui()
        self._load_sample()

    def _build_ui(self):
        header = tk.Frame(self.root, bg="#252526", pady=6)
        header.pack(fill=tk.X)
        tk.Label(header, text="{ } JSONビューアー/エディター",
                 font=("Noto Sans JP", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
        ttk.Button(header, text="📂 開く",    command=self._open).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="💾 保存",    command=self._save).pack(side=tk.LEFT, padx=2)
        ttk.Button(header, text="✔ 検証",    command=self._validate).pack(side=tk.LEFT, padx=4)
        ttk.Button(header, text="🔄 フォーマット", command=self._format).pack(side=tk.LEFT, padx=2)
        ttk.Button(header, text="📦 圧縮",   command=self._minify).pack(side=tk.LEFT, padx=2)
        ttk.Button(header, text="📋 コピー", command=self._copy).pack(side=tk.LEFT, padx=4)

        main = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        main.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: ツリービュー
        left = tk.Frame(main, bg="#1e1e1e")
        main.add(left, weight=1)
        tk.Label(left, text="ツリービュー", bg="#1e1e1e", fg="#888",
                 font=("Arial", 9)).pack(anchor="w")
        self.jtree = ttk.Treeview(left, columns=("value",), show="tree headings")
        self.jtree.heading("#0",     text="キー")
        self.jtree.heading("value",  text="値")
        self.jtree.column("#0",    width=200, anchor="w")
        self.jtree.column("value", width=200, anchor="w")
        jtsb = ttk.Scrollbar(left, command=self.jtree.yview)
        self.jtree.configure(yscrollcommand=jtsb.set)
        jtsb.pack(side=tk.RIGHT, fill=tk.Y)
        self.jtree.pack(fill=tk.BOTH, expand=True)

        # 右: テキストエディタ
        right = tk.Frame(main, bg="#1e1e1e")
        main.add(right, weight=1)
        tk.Label(right, text="テキストエディタ", bg="#1e1e1e", fg="#888",
                 font=("Arial", 9)).pack(anchor="w")

        editor_f = tk.Frame(right, bg="#1e1e1e")
        editor_f.pack(fill=tk.BOTH, expand=True)
        self.line_canvas = tk.Canvas(editor_f, width=36, bg="#0d1117",
                                      highlightthickness=0)
        self.line_canvas.pack(side=tk.LEFT, fill=tk.Y)
        self.editor = tk.Text(editor_f, bg="#0d1117", fg="#d4d4d4",
                               font=("Courier New", 10), relief=tk.FLAT,
                               insertbackground="#fff",
                               selectbackground="#264f78",
                               undo=True, wrap=tk.NONE, tabs=("4m",))
        ysb = ttk.Scrollbar(editor_f, command=self.editor.yview)
        xsb = ttk.Scrollbar(right, orient=tk.HORIZONTAL,
                             command=self.editor.xview)
        self.editor.configure(yscrollcommand=ysb.set, xscrollcommand=xsb.set)
        ysb.pack(side=tk.RIGHT, fill=tk.Y)
        self.editor.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        xsb.pack(fill=tk.X)
        self.editor.bind("<KeyRelease>", self._on_edit)

        # 検索バー
        search_f = tk.Frame(self.root, bg="#252526", pady=4)
        search_f.pack(fill=tk.X, padx=8)
        tk.Label(search_f, text="🔍 検索:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT)
        self.search_var = tk.StringVar()
        ttk.Entry(search_f, textvariable=self.search_var,
                  width=30).pack(side=tk.LEFT, padx=4)
        ttk.Button(search_f, text="次へ",
                   command=self._find_next).pack(side=tk.LEFT)
        self.search_var.trace_add("write", lambda *a: self._highlight_search())

        self.status_var = tk.StringVar(value="JSONを読み込んでください")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#252526", fg="#858585", font=("Arial", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

        # ハイライトタグ
        self.editor.tag_configure("key",    foreground="#9cdcfe")
        self.editor.tag_configure("str_",   foreground="#ce9178")
        self.editor.tag_configure("num",    foreground="#b5cea8")
        self.editor.tag_configure("kw",     foreground="#569cd6")
        self.editor.tag_configure("punct",  foreground="#ffd700")
        self.editor.tag_configure("search_hl",
                                   background="#4d4000", foreground="#fff")

    def _load_sample(self):
        sample = {
            "app": "JSONビューアー",
            "version": "1.0.0",
            "features": ["ツリービュー", "シンタックスハイライト", "検索"],
            "config": {
                "theme": "dark",
                "fontSize": 14,
                "autoFormat": True
            },
            "data": None
        }
        text = json.dumps(sample, ensure_ascii=False, indent=2)
        self.editor.delete("1.0", tk.END)
        self.editor.insert("1.0", text)
        self._highlight_json()
        self._build_tree(sample)
        self._update_line_numbers()
        self.status_var.set("サンプルデータを表示中")

    def _open(self):
        path = filedialog.askopenfilename(
            filetypes=[("JSON", "*.json"), ("すべて", "*.*")])
        if not path:
            return
        try:
            with open(path, encoding="utf-8") as f:
                text = f.read()
            self._filepath = path
            self.editor.delete("1.0", tk.END)
            self.editor.insert("1.0", text)
            data = json.loads(text)
            self._highlight_json()
            self._build_tree(data)
            self._update_line_numbers()
            self.root.title(f"JSONビューアー — {os.path.basename(path)}")
            self.status_var.set(f"読込完了: {path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))

    def _save(self):
        path = self._filepath or filedialog.asksaveasfilename(
            defaultextension=".json",
            filetypes=[("JSON", "*.json")])
        if not path:
            return
        try:
            with open(path, "w", encoding="utf-8") as f:
                f.write(self.editor.get("1.0", tk.END))
            messagebox.showinfo("完了", f"保存しました:\n{path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))

    def _validate(self):
        text = self.editor.get("1.0", tk.END).strip()
        try:
            data = json.loads(text)
            t = type(data).__name__
            self.status_var.set(f"✔ 有効なJSON ({t})")
            messagebox.showinfo("検証結果", "有効なJSONです")
        except json.JSONDecodeError as e:
            self.status_var.set(f"✖ 無効なJSON: {e}")
            messagebox.showerror("検証結果", f"JSONエラー:\n{e}")

    def _format(self):
        text = self.editor.get("1.0", tk.END).strip()
        try:
            data = json.loads(text)
            formatted = json.dumps(data, ensure_ascii=False, indent=2)
            self.editor.delete("1.0", tk.END)
            self.editor.insert("1.0", formatted)
            self._highlight_json()
            self._build_tree(data)
            self._update_line_numbers()
            self.status_var.set("フォーマット完了")
        except json.JSONDecodeError as e:
            messagebox.showerror("エラー", f"JSONエラー: {e}")

    def _minify(self):
        text = self.editor.get("1.0", tk.END).strip()
        try:
            data = json.loads(text)
            minified = json.dumps(data, ensure_ascii=False, separators=(",", ":"))
            self.editor.delete("1.0", tk.END)
            self.editor.insert("1.0", minified)
            self._highlight_json()
            self._update_line_numbers()
            self.status_var.set(f"圧縮完了: {len(minified)} 文字")
        except json.JSONDecodeError as e:
            messagebox.showerror("エラー", f"JSONエラー: {e}")

    def _copy(self):
        text = self.editor.get("1.0", tk.END).strip()
        self.root.clipboard_clear()
        self.root.clipboard_append(text)
        self.status_var.set("クリップボードにコピーしました")

    def _on_edit(self, event=None):
        self._highlight_json()
        self._update_line_numbers()
        text = self.editor.get("1.0", tk.END).strip()
        try:
            data = json.loads(text)
            self._build_tree(data)
        except Exception:
            pass

    def _highlight_json(self):
        for tag in ("key", "str_", "num", "kw", "punct"):
            self.editor.tag_remove(tag, "1.0", tk.END)
        content = self.editor.get("1.0", tk.END)

        def apply(pattern, tag, flags=0):
            for m in re.finditer(pattern, content, flags):
                s = f"1.0 + {m.start()} chars"
                e = f"1.0 + {m.end()} chars"
                self.editor.tag_add(tag, s, e)

        apply(r'"([^"\\]|\\.)*"\s*:', "key")
        apply(r':\s*"([^"\\]|\\.)*"', "str_")
        apply(r':\s*-?\d+(\.\d+)?([eE][+-]?\d+)?', "num")
        apply(r'\b(true|false|null)\b', "kw")
        apply(r'[{}\[\],:]', "punct")

    def _update_line_numbers(self):
        self.line_canvas.delete("all")
        try:
            line_num = int(self.editor.index("@0,0").split(".")[0])
            while True:
                dline = self.editor.dlineinfo(f"{line_num}.0")
                if dline is None:
                    break
                self.line_canvas.create_text(
                    32, dline[1] + dline[3] // 2,
                    text=str(line_num), anchor="e",
                    fill="#858585", font=("Courier New", 10))
                line_num += 1
        except Exception:
            pass

    def _build_tree(self, data, parent="", key="root"):
        self.jtree.delete(*self.jtree.get_children())
        self._insert_node("", key, data)

    def _insert_node(self, parent, key, value):
        if isinstance(value, dict):
            node = self.jtree.insert(parent, tk.END,
                                      text=f"📁 {key}",
                                      values=(f"{{...}} {len(value)} keys",),
                                      open=True)
            for k, v in list(value.items())[:50]:
                self._insert_node(node, k, v)
        elif isinstance(value, list):
            node = self.jtree.insert(parent, tk.END,
                                      text=f"📋 {key}",
                                      values=(f"[...] {len(value)} items",),
                                      open=True)
            for i, v in enumerate(value[:50]):
                self._insert_node(node, f"[{i}]", v)
        else:
            val_str = "null" if value is None else str(value)
            self.jtree.insert(parent, tk.END,
                               text=str(key),
                               values=(val_str[:80],))

    def _highlight_search(self):
        self.editor.tag_remove("search_hl", "1.0", tk.END)
        query = self.search_var.get()
        if not query:
            return
        content = self.editor.get("1.0", tk.END)
        for m in re.finditer(re.escape(query), content):
            s = f"1.0 + {m.start()} chars"
            e = f"1.0 + {m.end()} chars"
            self.editor.tag_add("search_hl", s, e)

    def _find_next(self):
        query = self.search_var.get()
        if not query:
            return
        pos = self.editor.search(query, tk.INSERT, stopindex=tk.END)
        if not pos:
            pos = self.editor.search(query, "1.0", stopindex=tk.END)
        if pos:
            end = f"{pos} + {len(query)} chars"
            self.editor.mark_set(tk.INSERT, end)
            self.editor.see(pos)


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

5. コード解説

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

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

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

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

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

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

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

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

   title("JSONビューアー/エディター")・geometry("1100x680")・configure(bg="#1e1e1e")・minsize(1100, 680) をコンストラクタで設定します。

4. 4
   画面部品を並べる

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

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

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

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

   アプリの本体である _open()（19行）・_format()（13行）・_save()（12行）など を実装します。

7. 7
   動作確認する

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

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

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

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。「💾 保存」は、一度「📂 開く」で読み込んだファイルを、確認なしでその場に上書きします（144行）。練習は、消えても困らないコピーを別のフォルダに作って行ってください。開くのは自分のファイルにしてください。設定ファイルの JSON には API キーやパスワードが入っていることがあり、スクリーンショットに写ると公開してしまいます。「📋 コピー」を押すと、表示中の全文がクリップボードに入ります。追加のライブラリは要りません。

1. 課題1：壊れた JSON でも、そのまま上書き保存される

   「✔ 検証」は中身が JSON として読めるかを確かめてくれます。ですが「💾 保存」はこの検証を通しません。{ を1つ消した状態でも、確認なしで元のファイルへ書き込みます。

   期待結果：「📂 開く」で JSON を読み込み、エディタの { を1つ消してから「💾 保存」を押す。保存先も聞かれず、保存しました: ... のダイアログだけが出る。元のファイルは壊れた中身へ置き換わる。直したあとは、書き込む前に知らせて保存を中止する。

   合格条件

   • 正しい JSON のときは、今までどおり確認なしで保存できる
   • 読めない JSON のときは書き込まず、どこが悪いかを知らせる
   • 「✔ 検証」ボタンの動きは変えない

   ヒント①（どこを触るか）: 触るのは1か所です。_save() の try: の中、open(path, "w", ...)（150行）の手前。
   ヒント②（使うもの）: _validate()（156-165行）が同じ検査をしています。json.loads(self.editor.get("1.0", tk.END)) を試します。json.JSONDecodeError が出たら messagebox.showerror を出して return するだけです。この例外には行と桁が入っているので、そのまま文面に使えます。
   つまずきやすい点: _save() の保存先は self._filepath or filedialog.asksaveasfilename(...) です（144行）。一度開いたあとは、保存先を聞かずに上書きします。別名で保存する機能は用意されていません。self.editor.get("1.0", tk.END) は末尾に改行が1つ付くため、保存したファイルは読み込んだときより改行が1つ増えます。

2. 課題2：ツリーが51件目から先を黙って切り捨てている

   ツリービューは、辞書のキーと配列の要素を50件までしか作りません。親の行には全体の件数が出るため、数が合わなくなります。切り捨てた印はどこにも出ません。

   期待結果：キーを60個並べた JSON を big.json として保存し、「📂 開く」で読み込む。ファイルは python -c "import json;print(json.dumps({f'k{i}':i for i in range(60)}))" の出力で作れる。親の行は {...} 60 keys と出るのに、子の行は50個しかない。直したあとは、最後に 残り 10 件 のような行が足され、続きがあると分かる。

   合格条件

   • 50件以下の JSON の見え方は今までどおり
   • 51件以上のときは、表示していない件数が分かる
   • 辞書（{...}）と配列（[...]）の両方で同じように分かる

   ヒント①（どこを触るか）: 触るのは2か所です。_insert_node() の253行（list(value.items())[:50]）と260行（enumerate(value[:50])）の、それぞれのループの後ろ。
   ヒント②（使うもの）: len(value) > 50 のときだけ self.jtree.insert(node, tk.END, text="…", values=(...)) をもう1行足せば済みます。値には f"残り {len(value) - 50} 件" を渡します。node は、その直前の insert() が返した ID です（249行・256行）。
   つまずきやすい点: 上限の 50 は2か所に直接書かれているので、変えるときは両方そろえてください（クラス定数にすれば1か所で済みます）。値の側も val_str[:80]（266行）で80文字を超えると切れますが、こちらにも印は付きません。ツリーは _on_edit()（200-208行）からキーを離すたびに作り直されるため、大きい JSON では入力のたびに同じ処理が走ります。

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

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