はじめに

内部インフラ（.home.arpa）の管理・監視ダッシュボードに効率よくアクセスするため、Vimライクな操作が可能なQuteBrowserの専用設定を行った。

設定のコンテキスト

本設定は、ローカルネットワーク上のサービス群（Edgeルーター、Grafana、Prometheus等）を素早く確認するための専用ブラウザ環境を構築するものである。画面を広く使いつつ、キーボードのみで快適にタブを切り替えられるよう、フォントサイズやスクロール量、UIの配色を調整している。

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%"

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

Vimの操作感に合わせて、H/Lで戻る/進む、J/Kでタブ移動ができるようにマッピングを変更した。また、ダッシュボードの閲覧が多いことを考慮し、1回あたりのスクロール量を大きめに調整している。

  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などのインフラ監視画面をキーボードのみで快適に巡回できるようになった。今後は、用途に応じたセッション管理や、他のダッシュボードの追加なども検討したい。