Django管理画面（admin）は素の状態でも十分に強力ですが、
ちょっとしたUI拡張を加えるだけで運用効率が大きく向上します。
本記事では、
- `format_html()` を使ってHTMLを安全に埋め込む方法
- JavaScriptをインラインで書いて簡易的なUI機能を追加する方法
- 実運用で役立つ「コピーボタン」などの具体例
を、実コード付きでまとめます。
前提環境
- Django 4.x / 5.x / 6.x 系（admin APIは共通）
- Django標準の管理画面
- ModelAdmin を利用
特別なライブラリやビルドは不要です。
なぜ `format_html()` を使うのか
Django admin でHTMLを直接返すと、通常は 自動エスケープされます。
これを安全にHTMLとして描画するために使うのが format_html() です。
format_html() の利点
- XSS対策済み（引数は自動エスケープ）
- mark_safe より安全
- admin拡張の定番手法
基本構造：管理画面に独自UIを表示する
ModelAdmin 側の基本形
- list_display / readonly_fields / fields に指定したメソッドは
- 返り値がHTMLならそのまま描画される
サンプル1：画像プレビュー（一覧用）
実装例
ポイント
- img タグを直接返すだけ
- 管理画面側でCSSを書く必要なし
- object-fit: contain は縦横比崩れ防止に有効
サンプル2：詳細画面用の大きなプレビュー
使い所
- readonly_fields に指定
- 編集不可・参照専用アセット管理に向いている
サンプル3：コピーボタン付きURL表示（実用例）
実装コード
実装の意図
- CDN / S3 / 画像URLを即コピー
- JSファイル不要
- 管理画面のCSS（.button）をそのまま利用
JavaScript埋め込み時の注意点
- IDの衝突を防ぐ
- obj.pk や uuid を必ず使う
- 一覧表示では 同じHTMLが複数回描画される
- adminはJSモジュール非対応前提
- ES Modules
- import / export
- bundler前提コード
👉 全部不可
そのため：
- onclick属性
- 即時実行コード
が最も安定します。
管理画面UI拡張の適切な使いどころ
| ケース | 推奨 |
|---|---|
| 画像・動画アセット管理 | ◎ |
| URL・IDコピー | ◎ |
| 内部運用ツール | ◎ |
| 複雑な状態管理UI | △（専用画面推奨） |
| 一般ユーザー向けUI | ✗ |
まとめ
- Django admin は 軽いUI拡張に非常に強い
- format_html() + インラインJS だけで十分実用になる
- 外部JS/CSSを持ち込まずに完結できるのが最大の利点
「ちょっと不便」を潰す用途には、
管理画面拡張が最もコスパの良い選択肢です。