DjangoテンプレートエンジンのDjango Cottonを試す

Python Django django-cotton TailwindCSS

Djangoフレームワークにはテンプレートエンジンを別のものに切り替える機能があります。 Django Cottonというテンプレートエンジンを試してみたので、メモを残しておきます。 django-cotton.com GitHub - wrabit/django-cotton: Enabling Modern UI Composition in Django

Django Cottonは、コンポーネント(部品)となるテンプレートを作って組み合わせていく、コンポーネント指向のテンプレート設計を実現するテンプレートエンジンです。

ドキュメントの説明には、 TailwindCSS (コンポーネント指向のCSSフレームワーク)とあわせて使いやすい、とも書かれています。

ドキュメントの Quickstart が参考になります。

以下、 django-admin startproject myproject で作成したDjangoプロジェクトにセットアップして試していきます。

セットアップ

PyPI上のパッケージ名は django-cotton です。pipでインストールできます。

pip install django-cotton

デフォルトの設定で使うだけなら、 settings.INSTALLED_APPS へ django_cotton を追加します。

myproject/settings.py:

INSTALLED_APPS = [
    # ...
    'django_cotton',
]

※デフォルト設定の場合、django_cottonのAppConfigがロードされる際に、Djangoのsettingsのテンプレート設定を変更する処理が実行されます。テンプレート設定を自分で変更している場合には、不具合が出ていないか、チェックしておいたほうがよさそうです。

参考: django_cotton/apps.py

もし、デフォルト設定以外を使いたい場合は、 djanog_cotton.apps.SimpleAppConfig のほうを INSTALLED_APPS に設定できます。

お試し用にDjangoアプリを準備する

myappという名前のDjangoアプリケーションを作成します。

python manage.py startapp myapp

INSTALLED_APPSにも追加しておきます。

myproject/settings.py:

INSTALLED_APPS = [
    # ...
    'django_cotton',
    'myapp',  # 追加
]

TailwindCSSのCDNを組み込む

TailwindCSSで定義されているCSSクラスを使用するので、CDNからロードするようにテンプレートを作っておきます。

Try Tailwind CSS using the Play CDN - Tailwind CSS

※本番環境で使う場合はTailwindはビルドして使ったほうがよいです。

myapp/templates/index.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="p-2">
    <h1 class="text-3xl font-bold underline">
      Django Cotton!
    </h1>
  </div>
</body>
</html>

Viewはindex.htmlを使うだけのシンプルな記述

myapp/views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

プロジェクトのurls.pyでindexを有効にします。

myproject/urls.py:

from django.urls import path
from myapp.views import index

urlpatterns = [
    path('', index),
]

runserverを起動して確認しておきます。

TailwindCSSの確認

TailwindCSSのCSSが適用されていることを確認できました。

コンポーネントとなるテンプレートを作る

カード表示のコンポーネントを作ってみます。

Django Cottonのデフォルト設定の場合、コンポーネントはtemplatesディレクトリ内にcottonというディレクトリを作って格納します。

myapp/templates/cotton/card.html:

<div class="max-w-sm rounded overflow-hidden shadow-lg border mb-2">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">{{ title }}</div>
    <p class="text-gray-700 text-base">{{ slot }}</p>
  </div>
  <div class="px-6 pt-2 pb-2">
    <a href="{{ url }}" class="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">Read more</a>
  </div>
</div>

{{ title }}、 {{ url }} のプレースホルダーは、コンポーネントのattribute(属性)で指定できるようにしています。

{{ slot }} の部分はCottonで予約された名称で、コンポーネント呼び出し側のタグの内側に記載した内容が差し込まれます。

コンポーネントを使用する

作成しておいた index.html を書き換えます。

templates/cotton/card.html にコンポーネントを作成したので、 <c-card></c-card> というタグで呼び出せます。

myapp/templates/index.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="p-2">
    <h1 class="text-3xl font-bold underline">
      Django Cotton!
    </h1>
    <c-card title="カードタイトル" url="http://example.com/">
      カード本文
    </c-card>
    <c-card title="カード2タイトル" url="http://example.com/">
      カード2本文
    </c-card>
  </div>
</body>
</html>

画面で確認すると、コンポーネントが使用されて、カード表示ができています。

Django Cottonを使ったテンプレートでの表示

これで、Django Cottonを組み込んだ実装ができました。

フロントエンドのコーディングで馴染みのあるようなテンプレートの書き方にできるので面白いですね。