pgAdmin 4を「自分専用の要塞」に。CSSハックで手に入れる極上のクエリ環境
こんにちは。データベースとAPIの深淵を日々探索しているエンジニアの皆さん。
PostgreSQLを扱う際、相棒となるのは間違いなく pgAdmin 4 ですよね。機能豊富で信頼できるツールですが、長時間クエリを叩いていると「もう少しだけ、視認性を上げたい」「この余白が気になる」「配色をあと少しだけ目に優しくしたい」と感じたことはありませんか？
実は、pgAdmin 4はWebテクノロジー（Flask + React）で構築されており、そのUIはCSSで制御されています。つまり、インストールディレクトリ内のCSSを直接編集すれば、自分好みの「究極のUI」を構築できるのです。
今日は、デフォルトのダークモードでは満足できない貴方のために、pgAdmin 4を自分好みにハックする禁断のテクニックを伝授します。
—
1. なぜ「ツールをカスタマイズする」ことが重要なのか
多くのエンジニアは「デフォルト設定」で作業を続けます。しかし、一流の職人は道具を自分の手に馴染ませます。
- 集中力の維持: 輝度が高すぎる白背景や、逆にコントラストが強すぎるUIは、眼精疲労の主犯です。
- 認知負荷の低減: 必要な情報（テーブル定義やクエリ結果）と、不要なUI要素の視覚的優先度を調整することで、脳が処理するノイズを減らせます。
これから行うCSSハックは、単なる見た目の変更ではなく、貴方の脳とデータベースを直結させるためのチューニングです。
—
2. 準備：pgAdmin 4の「心臓部」にアクセスする
まずは、自分の環境のCSSファイルがどこにあるかを確認しましょう。
インストールパスの目安
- Windows: `C:\Program Files\pgAdmin 4\v8\web\pgadmin\static\css`
- macOS: `/Applications/pgAdmin 4.app/Contents/Resources/web/pgadmin/static/css`
- Linux (pip install): `site-packages/pgadmin4/pgadmin/static/css`
このディレクトリの中にある `overrides.css` （存在しない場合は作成してください）が、カスタマイズの聖域となります。
—
3. 実践：極上の開発環境を作るCSSハック
では、具体的なコードを見ていきましょう。`overrides.css` に以下の記述を追加して、自分好みに微調整していきます。
/ 1. フォントの視認性向上（等幅フォントで見やすく） /
.CodeMirror, .CodeMirror-code {
font-family: ‘Fira Code’, ‘Consolas’, monospace !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/ 2. 結果セットの背景色を少しだけ柔らかく（目の疲れを軽減） /
.pg-datagrid {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
/ 3. アクティブな行の強調表示（現在地を見失わないように） /
.CodeMirror-activeline-background {
background: #2a2a2a !important;
}
/ 4. サイドバーの余白調整（画面の占有率を下げる） /
.aciTree {
padding: 5px !important;
font-size: 13px !important;
}
適用手順
1. 上記コードを `overrides.css` に保存。
2. 重要: ブラウザのキャッシュが邪魔をするため、pgAdminを開いているブラウザで `Ctrl + F5` (または `Cmd + Shift + R`) を押してスーパーリロードを行ってください。
3. これで、貴方のpgAdminが「自分専用の洗練されたUI」に生まれ変わります。
—
4. 初心者向け：pgAdmin 4の役割と「Hello World」的確認
まだpgAdminに慣れていない方のために、少しだけ基本に立ち返りましょう。
pgAdmin 4の役割
pgAdminは、単なるデータベース管理ツールではありません。データベースの構造（スキーマ）を視覚化し、複雑なSQLを最適化し、さらにバックアップ・リストアまでを一括で行う「データベースのコックピット」です。
最初の動作確認（HelloWorld）
環境構築が正しくできているかを確認するには、以下のクエリを叩くのが一番です。
— データベースのバージョンを確認する
SELECT version();
クエリを入力し、`F5` キーを押して結果が表示されれば、貴方の開発環境は完璧にセットアップされています。
—
5. 最後に：エンジニアとしての「こだわり」を持つこと
「CSSを弄るなんて非効率ではないか？」と思う方もいるかもしれません。しかし、毎日8時間向き合うツールを、1時間かけて最適化することは、年間で数千時間の生産性に直結する投資です。
今回紹介したCSSハックは、氷山の一角に過ぎません。`Inspect Element`（ブラウザの開発者ツール）を使って、クラス名を特定し、自分だけの配色を追求してみてください。
自分のツールを愛するエンジニアは、必ず良いコードを書きます。
それでは、快適なデータベースライフを。何か詰まったら、いつでも戻ってきてくださいね。