中級者向け No.058
JSONビューアー/エディター
JSONファイルをツリー形式で表示・編集しバリデーションとフォーマットができるエディター。
📋 目次
1. アプリ概要
JSONファイルをツリー形式で表示・編集しバリデーションとフォーマットができるエディター。
このアプリはdbカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★☆ です。
Pythonの豊富なライブラリを活用することで、実用的なアプリを短いコードで実装できます。ソースコードをコピーして実行し、仕組みを理解したうえでカスタマイズに挑戦してみてください。
GUIアプリ開発はプログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。変数・関数・クラス・イベント処理などの重要な概念が自然と身につきます。
2. 機能一覧
- JSONビューアー/エディターのメイン機能
- 直感的なGUIインターフェース
- 入力値のバリデーション
- エラーハンドリング
- 結果の見やすい表示
- クリア機能付き
3. 事前準備・環境
動作確認環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
4. 完全なソースコード
コードのコピー方法
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
app058.py
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.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ビューアー/エディターのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。
クラス設計とコンストラクタ
App058クラスにアプリの全機能をまとめています。__init__でウィンドウ設定、_build_ui()でUI構築、process()でメイン処理を担当します。責任の分離により、コードが読みやすくなります。
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.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()
UIレイアウトの構築
LabelFrameで入力エリアと結果エリアを視覚的に分けています。pack()で縦に並べ、expand=Trueで結果エリアが画面いっぱいに広がるよう設定しています。
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.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()
イベント処理
ボタンのcommand引数でクリックイベントを、bind('
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.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()
Textウィジェットでの結果表示
tk.Textウィジェットをstate=DISABLED（読み取り専用）で作成し、更新時はNORMALに変更してinsert()で内容を書き込み、再びDISABLEDに戻します。
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.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()
例外処理とエラーハンドリング
try-exceptでValueErrorとExceptionを捕捉し、messagebox.showerror()でエラーメッセージを表示します。予期しないエラーも処理することで、アプリの堅牢性が向上します。
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.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()
6. ステップバイステップガイド
このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。
-
1ファイルを作成する
新しいファイルを作成して app058.py と保存します。
-
2クラスの骨格を作る
App058クラスを定義し、__init__とmainloop()の最小構成を作ります。
-
3タイトルバーを作る
Frameを使ってカラーバー付きのタイトルエリアを作ります。
-
4入力フォームを実装する
LabelFrameとEntryウィジェットで入力エリアを作ります。
-
5処理ロジックを実装する
_execute()メソッドにメインロジックを実装します。
-
6結果表示を実装する
TextウィジェットかLabelに結果を表示する_show_result()を実装します。
-
7エラー処理を追加する
try-exceptとmessageboxでエラーハンドリングを追加します。
7. カスタマイズアイデア
基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。
💡 ダークモードを追加する
bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。
💡 データの保存機能
処理結果をCSV・TXTファイルに保存する機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。
💡 設定ダイアログ
フォントサイズや色などの設定をユーザーが変更できるオプションダイアログを追加しましょう。
8. よくある問題と解決法
❌ 日本語フォントが表示されない
原因：システムに日本語フォントが見つからない場合があります。
解決法：font引数を省略するかシステムに合ったフォントを指定してください。
❌ ライブラリのインポートエラー
原因：必要なライブラリがインストールされていません。
解決法：pip install コマンドで必要なライブラリをインストールしてください。
❌ ウィンドウサイズが合わない
原因：画面解像度や表示スケールによって異なる場合があります。
解決法：root.geometry()で適切なサイズに調整してください。
9. 練習問題
アプリの理解を深めるための練習問題です。
-
課題1：機能拡張
JSONビューアー/エディターに新しい機能を1つ追加してみましょう。
-
課題2：UIの改善
色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしましょう。
-
課題3：保存機能の追加
処理結果をファイルに保存する機能を追加しましょう。