初心者向け No.39

Webブックマーカー

URLを保存してブラウザで開くブックマーク管理アプリ。webbrowserモジュールの使い方を学びます。

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

📋 目次

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

1. アプリ概要

URLを保存してブラウザで開くブックマーク管理アプリ。webbrowserモジュールの使い方を学びます。

このアプリはツールカテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★☆☆ です。

このアプリは「ツール」カテゴリです。日々の作業を自動化する実用ツールは Python が最も得意とする領域です。短いコードで実用性のある成果物が作れる点が魅力です。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

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

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

Webブックマーカー実行画面（Linux Mint） — 実行画面（Linux Mint）

2. 機能一覧

「追加」ボタン（add_bookmark()）・「🌐 開く」ボタン（open_selected()）・「削除」ボタン（delete_selected()）で操作
マウス操作 <Double-1> から open_selected() を実行
ttk.Treeview による表形式の一覧表示
JSON ファイルの保存・読み込み（起動時に自動実行）
messagebox.showinfo()・messagebox.showwarning() によるダイアログ通知
ウィンドウはタイトル「Webブックマーカー」・サイズ 531x478 で起動

3. 事前準備・環境

ℹ️

動作確認環境

Python 3.10 以上 / Windows 11（実機）で起動・基本操作を確認／ Linux Mint 22.3（仮想マシン）で起動・画面表示を確認（macOS は未検証）

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

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

4. 完全なソースコード

💡

コードのコピー方法

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

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

app39.py

import tkinter as tk
from tkinter import ttk, messagebox
import webbrowser
import json
import os


class App39:
    """Webブックマーカー"""

    SAVE_FILE = "bookmarks.json"

    def __init__(self, root):
        self.root = root
        self.root.title("Webブックマーカー")
        self.root.geometry("531x478")
        self.root.minsize(531, 478)
        self.root.configure(bg="#f8f9fc")
        self.bookmarks = self._load()
        self._build_ui()
        self._refresh()

    def _load(self):
        if os.path.exists(self.SAVE_FILE):
            with open(self.SAVE_FILE, encoding="utf-8") as f:
                return json.load(f)
        return [
            {"title": "Python公式", "url": "https://www.python.org/", "category": "開発"},
            {"title": "Python docs", "url": "https://docs.python.org/ja/3/", "category": "開発"},
            {"title": "GitHub", "url": "https://github.com/", "category": "開発"},
        ]

    def _save(self):
        with open(self.SAVE_FILE, "w", encoding="utf-8") as f:
            json.dump(self.bookmarks, f, ensure_ascii=False, indent=2)

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="Webブックマーカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=16, pady=12)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # 追加フォーム
        add_frame = ttk.LabelFrame(main_frame, text="ブックマークを追加", padding=8)
        add_frame.pack(fill=tk.X, pady=(0, 10))

        tk.Label(add_frame, text="タイトル:").grid(row=0, column=0, sticky="w", pady=2)
        self.title_entry = ttk.Entry(add_frame, font=("Noto Sans JP", 11), width=22)
        self.title_entry.grid(row=0, column=1, padx=6, sticky="ew")

        tk.Label(add_frame, text="URL:").grid(row=1, column=0, sticky="w", pady=2)
        self.url_entry = ttk.Entry(add_frame, font=("Arial", 11), width=22)
        self.url_entry.insert(0, "https://")
        self.url_entry.grid(row=1, column=1, padx=6, sticky="ew")

        tk.Label(add_frame, text="カテゴリ:").grid(row=2, column=0, sticky="w", pady=2)
        self.cat_entry = ttk.Entry(add_frame, font=("Noto Sans JP", 11), width=14)
        self.cat_entry.insert(0, "その他")
        self.cat_entry.grid(row=2, column=1, padx=6, sticky="w")

        ttk.Button(add_frame, text="追加", command=self.add_bookmark).grid(
            row=0, column=2, rowspan=3, padx=8)
        add_frame.columnconfigure(1, weight=1)

        # リスト
        list_frame = ttk.LabelFrame(main_frame, text="ブックマーク一覧", padding=8)
        list_frame.pack(fill=tk.BOTH, expand=True)

        cols = ("タイトル", "URL", "カテゴリ")
        self.tree = ttk.Treeview(list_frame, columns=cols, show="headings", height=8)
        for col, w in zip(cols, [160, 220, 80]):
            self.tree.heading(col, text=col)
            self.tree.column(col, width=w, minwidth=60)
        self.tree.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        sb = ttk.Scrollbar(list_frame, command=self.tree.yview)
        self.tree.configure(yscrollcommand=sb.set)
        sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.tree.bind("<Double-1>", lambda e: self.open_selected())

        btn_frame = tk.Frame(main_frame, bg="#f8f9fc")
        btn_frame.pack(fill=tk.X, pady=(6, 0))
        tk.Button(btn_frame, text="🌐 開く", font=("Noto Sans JP", 11),
                  bg="#3776ab", fg="white", relief=tk.FLAT, padx=8, pady=4,
                  command=self.open_selected).pack(side=tk.LEFT, padx=(0, 6))
        ttk.Button(btn_frame, text="削除", command=self.delete_selected).pack(side=tk.LEFT)

    def _refresh(self):
        for item in self.tree.get_children():
            self.tree.delete(item)
        for bm in self.bookmarks:
            self.tree.insert("", tk.END, values=(bm["title"], bm["url"], bm.get("category", "")))

    def add_bookmark(self):
        title = self.title_entry.get().strip()
        url = self.url_entry.get().strip()
        cat = self.cat_entry.get().strip()
        if not title or not url:
            messagebox.showwarning("警告", "タイトルとURLを入力してください")
            return
        self.bookmarks.append({"title": title, "url": url, "category": cat})
        self._save()
        self.title_entry.delete(0, tk.END)
        self.url_entry.delete(0, tk.END)
        self.url_entry.insert(0, "https://")
        self._refresh()

    def open_selected(self):
        sel = self.tree.selection()
        if not sel:
            messagebox.showinfo("情報", "ブックマークを選択してください")
            return
        url = self.tree.item(sel[0])["values"][1]
        webbrowser.open(url)

    def delete_selected(self):
        sel = self.tree.selection()
        if not sel:
            return
        idx = self.tree.index(sel[0])
        self.bookmarks.pop(idx)
        self._save()
        self._refresh()


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

5. コード解説

Webブックマーカーのコードを、実際に書かれている実装に沿って解説します。

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

App39 クラスにアプリの全機能をまとめています（メソッド8個・全132行）。__init__ ではタイトル「Webブックマーカー」とウィンドウサイズ 531x478 を設定します。そのあと _build_ui() → _refresh() の順に呼び出して初期状態を作ります。