はじめに

前回の記事では、Django Admin に Markdown ファイルの取り込み機能を追加し、記事を効率的に管理する方法を解説しました。
今回は、その基盤となる Post モデルの詳細設計について掘り下げ、Markdownx を適用したリッチな編集環境の構築 について説明します。

1. Post モデルの設計

Markdown 記事を Django Admin で管理するために、以下の項目を持つ Post モデルを設計します。

1.1 モデルの基本構成

Post モデルは、記事のタイトル、作成日、カテゴリ、内容（Markdown）、スラグ（URL 用識別子）などのフィールドを持ちます。

models.py

PYTHON
import uuid
from django.db import models
from markdownx.models import MarkdownxField

class Category(models.Model):
    COLOR_CHOICES = [
        ("primary", "Primary"),
        ("secondary", "Secondary"),
        ("success", "Success"),
        ("danger", "Danger"),
        ("warning", "Warning"),
        ("info", "Info"),
        ("light", "Light"),
        ("dark", "Dark"),
    ]

    name = models.CharField(max_length=100, unique=True, verbose_name="カテゴリ名")
    order = models.PositiveIntegerField(default=0, verbose_name="表示順")
    description = models.TextField(blank=True, verbose_name="説明")
    color = models.CharField(
        max_length=15,
        choices=COLOR_CHOICES,
        default="primary",
        verbose_name="カラー (Bootstrap)",
    )

    def __str__(self):
        return self.name

class Theme(models.Model):
    name = models.CharField(max_length=100, unique=True, verbose_name="テーマ名")
    
    def __str__(self):
        return self.name

class Post(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    custom_id = models.IntegerField(unique=True, db_index=True, verbose_name="カスタムID")
    title = models.CharField(max_length=255, verbose_name="タイトル")
    date = models.DateField(null=True, verbose_name="日付")
    category = models.ForeignKey(Category, null=True, blank=True, on_delete=models.SET_NULL)
    content = MarkdownxField(verbose_name="本文")
    is_pinned = models.BooleanField(default=False, verbose_name="ピン留め")
    slug = models.SlugField(max_length=255, unique=True, null=True, verbose_name="スラグ")
    embedding = models.JSONField(blank=True, null=True, verbose_name="埋め込み")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="作成日")
    updated_at = models.DateTimeField(auto_now=True, verbose_name="更新日")

    def __str__(self):
        return f"{self.title} ({self.date})"

この設計により、Markdown 形式で記事を保存し、カテゴリと紐付けることができます。

2. Markdownx の適用

Markdownx を導入すると、Django Admin で Markdown をリアルタイムプレビューしながら編集できるようになります。

2.1 インストール

まず、markdownx パッケージをインストールします。

BASH
pip install django-markdownx

次に、settings.py に markdownx を追加します。

PYTHON
INSTALLED_APPS = [
    ...
    'markdownx',
]

また、urls.py に以下の設定を追加します。

PYTHON
from django.urls import path, include

urlpatterns = [
    path("markdownx/", include("markdownx.urls")),
]

2.2 Django Admin での適用

Markdownx を Django Admin に適用するため、Post モデルの管理画面をカスタマイズします。

admin.py

PYTHON
from django.contrib import admin
from markdownx.admin import MarkdownxModelAdmin
from base.models import Post

@admin.register(Post)
class PostAdmin(MarkdownxModelAdmin):
    list_display = ("title", "category", "created_at")
    search_fields = ("title", "content")
    list_filter = ("category", "created_at")

2.3 カスタムフォームの適用

Markdownx のエディタサイズを調整するため、カスタムフォームを適用します。
PostForm を作成し、Markdown エディタの縦幅を広げ、より編集しやすい環境を整えます。

base/admin/_markdown_form.py

PYTHON
from django import forms
from markdownx.widgets import MarkdownxWidget
from base.models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'content': MarkdownxWidget(attrs={
                'rows': 25,  # 行数を増やして縦幅を広くする
                'style': 'min-height:500px;',  # 必要に応じて高さを調整
            }),
        }

    class Media:
        css = {
            'all': (
                '/static/markdownx/admin/css/markdownx.css',
                '/static/css/custom_markdownx.css',
            )
        }

このカスタムフォームを PostAdmin に適用します。

admin.py

PYTHON
from base.forms import PostForm

@admin.register(Post)
class PostAdmin(MarkdownxModelAdmin):
    form = PostForm

この設定により、Django Admin のエディタが広くなり、Markdown の編集がより快適になります。
Markdownx のエディタサイズを調整するため、forms.py にカスタムフォームを作成します。

forms.py

PYTHON
from django import forms
from markdownx.widgets import MarkdownxWidget
from base.models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'content': MarkdownxWidget(attrs={'rows': 25, 'style': 'min-height:500px;'}),
        }

このカスタムフォームを PostAdmin に適用します。

admin.py

PYTHON
from base.forms import PostForm

@admin.register(Post)
class PostAdmin(MarkdownxModelAdmin):
    form = PostForm

これにより、Django Admin のエディタが広くなり、Markdown の編集がしやすくなります。

3. まとめ

今回は、Django Admin で Markdown 記事を管理するための Post モデルの詳細設計と、Markdownx を適用する方法について解説しました。

• Post モデルに MarkdownxField を適用し、Markdown 記事を管理できるようにした
• PostAdmin で MarkdownxModelAdmin を利用し、Django Admin でリアルタイムプレビューを可能にした
• カスタムフォームを作成し、エディタのサイズを調整した