はじめに

.home.arpa の管理・監視画面をキーボードで確認するため、QuteBrowser を設定しました。

設定のコンテキスト

対象は Edge ルーター、Grafana、Prometheus などのローカルサービスです。画面を広く使えるよう、フォント、スクロール量、タブの配置と色を調整しました。

QuteBrowser設定詳細 (config.py)

自動保存を無効にし、起動時に主要な監視ページを開きます。

  config.load_autoconfig(False)
c.auto_save.session = False
c.url.default_page = "about:blank"
c.url.start_pages = [
    "https://edge.home.arpa",
    "https://desktop.home.arpa:3000",
    "https://storage.home.arpa:9090/targets",
    "http://storage.home.arpa:9080/targets",
]

フォントおよびUIの調整

フォントは Ricty Diminished を大きめに設定しました。タブは左側に置き、幅を 18% にしています。

  c.fonts.default_family = "Ricty Diminished"
c.fonts.default_size = "21pt"
c.fonts.statusbar = "28pt"
c.fonts.web.family.standard = "Ricty Diminished"

c.tabs.title.format = "{current_title}"
c.tabs.show = "multiple"
c.tabs.position = "left"
c.tabs.width = "18%"
c.tabs.favicons.scale = 0.9
c.tabs.title.alignment = "left"
c.tabs.max_width = 250
c.tabs.min_width = 180
c.tabs.padding = {"top": 8, "bottom": 8, "left": 12, "right": 12}
c.tabs.indicator.width = 3
c.statusbar.show = "in-mode"
c.zoom.default = "145%"

キーバインドによる操作性の向上

H/L で戻る・進む、J/K でタブ移動をします。大きなダッシュボードを見やすくするため、スクロール量も増やしました。

  config.bind("H", "back")
config.bind("L", "forward")
config.bind("J", "tab-prev")
config.bind("K", "tab-next")
config.bind("d", "tab-close")
config.bind("u", "undo")
config.bind("x", "tab-close")
config.bind("X", "undo")

# j/k: 行スクロールを大きめに設定
config.bind("j", "scroll-px 0 200")
config.bind("k", "scroll-px 0 -200")

# Ctrl-F/B: 半ページスクロール
config.bind("<Ctrl-f>", "scroll-page 0 2")
config.bind("<Ctrl-b>", "scroll-page 0 -2")

Webページとタブバーのカラー設定（ダークモード）

Web ページの強制ダークモードを有効にし、タブとステータスバーを黒（#000000）にしました。自己署名証明書の警告は ask で都度確認します。

  c.content.cookies.accept = "no-3rdparty"
c.content.javascript.enabled = True
c.content.tls.certificate_errors = "ask"
c.colors.webpage.darkmode.enabled = True
c.colors.webpage.preferred_color_scheme = "dark"
c.scrolling.smooth = False
c.scrolling.bar = "always"
c.content.autoplay = True
c.statusbar.padding = {"top": 8, "bottom": 8, "left": 8, "right": 8}
c.statusbar.position = "bottom"

c.colors.tabs.bar.bg = "#000000"

c.colors.tabs.even.bg = "#000000"
c.colors.tabs.odd.bg = "#000000"
c.colors.tabs.even.fg = "#bbbbbb"
c.colors.tabs.odd.fg = "#bbbbbb"

c.colors.tabs.selected.even.bg = "#111111"
c.colors.tabs.selected.odd.bg = "#111111"
c.colors.tabs.selected.even.fg = "#ffffff"
c.colors.tabs.selected.odd.fg = "#ffffff"

c.colors.tabs.indicator.start = "#000000"
c.colors.tabs.indicator.stop = "#000000"
c.colors.tabs.indicator.error = "#550000"

今後の展望

Grafana などの監視画面を、キーボードで切り替えられる構成になりました。セッション管理やダッシュボードの追加は、今後の検討事項です。