GRUG Stackの開発環境を設定する方法

GRUGスタックは Hypermedia-Driven Applicationsの構築に使用される開発環境です。以下の要素から構成されています：

  1. ウェブフレームワークのバックエンド、例えば Django
  2. HTMX
  3. _hyperscript
  4. TailwindCSS

一部の人々は、_hyperscriptの代わりに Alpine.jsを好むことがあります。これらは技術的に異なりますが、GRUGスタック内の位置は同じです。両方のインストール方法を教説します。

最速の方法

もし、すぐにスタック全体を試したいと思ったら、Django（または他のバックエンドフレームワーク）をインストールし、以下のようなbase.htmlテンプレートを作ります：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <title>The GRUG Stack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- HTMXライブラリ -->
    <script src="https://unpkg.com/htmx.org@1.8.0"
            integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc"
            crossorigin="anonymous"></script>

    <!-- _hyperscriptまたはAlpine.jsを選択 -->
    <!-- _hyperscript ライブラリ -->
    <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
    <!-- Alpine.js ライブラリ -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- TailwindCSSのスタイル -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>

   <body>
        {% block content %} {% endblock %}
   </body>
</html>

これで、最新のHypermedia-Driven Applicationsの開発を始める準備ができました。

しかし、後で本番環境で使える環境を作りたい場合は、このチュートリアルの残りの部分に従ってください。

概要

忙しい開発者のための手順：

  1. ソフトウェアをインストール pip install ...
  2. それらのインストールおよび設定手順に従う。
  3. django-tailwindがbase.htmlテンプレートを提供します。HTMLのhead部分に_hyperscriptまたはAlpine.jsのスクリプトを追加します。

完成したら、base.htmlファイルは次のようになるべきです：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% load static tailwind_tags %}
{% load static %}
{% load django_htmx %}
<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Django Tailwind</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">

       {% tailwind_css %}
       <!-- _hyperscriptまたはAlpine.jsを選択 -->
       <!-- _hyperscript ライブラリ -->
       <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
       <!-- Alpine.js ライブラリ -->
       <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
       <script src="{% static 'core/htmx.min.js' %}" defer></script>
   </head>

   <body class="bg-gray-50 font-serif leading-normal tracking-normal">
      <div class="container mx-auto">
          <section class="flex items-center justify-center h-screen">
              <h1 class="text-5xl">Django + Tailwind = ❤️</h1>
          </section>
      </div>
   </body>
</html>

詳細な指示

pipを介してすべてをインストールした後、以下の内容を引き続き行います：

新しいアプリケーションの作成

python manage.py startapp core

スタティックディレクトリの作成

coreアプリディレクトリにstaticという名前のディレクトリを作成します。 staticアプリディレクトリにcoreという名前のディレクトリを作成します（本当にです）。

このディレクトリは後ほど使用します。まだ設定が必要です。

テンプレートディレクトリの作成

coreアプリにtemplatesという名前のディレクトリを作成します。 templatesフォルダのなかにcoreという名前のディレクトリを作成します（さらに質問せずに進めてください）。

このディレクトリは後ほど使用します。まだ設定が必要です。

INSTALLED_APPSに追加する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+    'core',
+    'django_htmx',
+    'tailwind',
+    'widget_tweaks',
]

HTMX: Middlewareを追加する

1
2
3
4
5
6
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    ...
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django_htmx.middleware.HtmxMiddleware',
]

HTMX: ダウンロードし、staticフォルダに追加する

  1. HTMXをここからダウンロードします。
  2. それをcoreアプリのstaticディレクトリに置きます（core/static/core/htmx.min.jsに配置します）。

当面、HTMXの設定は以上です。

Tailwind: Tailwind CSSアプリを作る

django-tailwindの初期化スクリプトを実行します。

python manage.py tailwind init

指示に従ってください。アプリのデフォルト名はthemeを使います。

Tailwind: settings.pyを変更する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
INSTALLED_APPS = [
    ...,
    'core',
    'django_htmx',
    'tailwind',
    'widget_tweaks',
+    'theme',
+    'django_browser_reload',
]

+ TAILWIND_APP_NAME = 'theme'


+ INTERNAL_IPS = [ '127.0.0.1' ]


MIDDLEWARE = [
    ...,
    'django_htmx.middleware.HtmxMiddleware',
+    'django_browser_reload.middleware.BrowserReloadMiddleware',
]

Tailwind: TailwindCSSの依存関係をインストールする

python manage.py tailwind install

Tailwind: django_browser_reloadをurls.pyに追加する

1
2
3
4
5
6
7
8
9
## contact/contact/urls.py

# 'include'をインポート追加
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path("__reload__/", include("django_browser_reload.urls")),
]

python manage.py tailwind initでthemeアプリを作ったとき、django-tailwindは親切にもtheme/templatesフォルダ内にbase.htmlファイルを提供してくれました。これを編集しましょう。

最終設定

django-tailwindから提供されたデフォルトのbase.htmlファイルは次のようになっています：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Django Tailwind</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       {% tailwind_css %}
   </head>

   <body class="bg-gray-50 font-serif leading-normal tracking-normal">
      <div class="container mx-auto">
         <section class="flex items-center justify-center h-screen">
             <h1 class="text-5xl">Django + Tailwind = ❤️</h1>
         </section>
      </div>
   </body>
</html>

このファイルにHTMXと_hyperscript（またはAlpine.js）を追加する必要があります。{% load static tailwind_tags %}の下に、さらに2行追加します：

1
2
{% load static %}
{% load django_htmx %}

<head>の中に、{% tailwind_css %}の下に以下を追加します：

1
2
<script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
<script src="{% static 'htmx.min.js' %}" defer></script>

これが_hyperscript（またはAlpine.js）の唯一のインストール手順です。

base.htmlファイルは次のようになるべきです：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% load static tailwind_tags %}
{% load static %}
{% load django_htmx %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Django Tailwind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        {% tailwind_css %}
        <!-- _hyperscriptまたはAlpine.jsを選択 -->
        <!-- _hyperscript ライブラリ -->
        <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
        <!-- Alpine.js ライブラリ -->
        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
        <script src="{% static 'core/htmx.min.js' %}" defer></script>
    </head>

   <body class="bg-gray-50 font-serif leading-normal tracking-normal">
      <div class="container mx-auto">
         <section class="flex items-center justify-center h-screen">
            <h1 class="text-5xl">Django + Tailwind = ❤️</h1>
         </section>
      </div>
   </body>
</html>

やった！設定完了です。あなたは次のHypermedia-Driven Applicationを構築する準備が整いました。

ひとつだけ最後に

django-widget-tweaksとdjango-render-blockのインストールについては触れていません。

将来のガイドでこれらがどのように使用され、なぜGRUGスタックの開発環境の一部であるのかについての実用的な例を見ることができます。簡単に説明すると：

  1. django-widget-tweaksは、forms.pyファイルではなくテンプレート内でDjangoフォームをスタイルすることを可能にします。これにより、私たちはLocality of Behaviorの原則に従うことができます。また、Tailwindを使用するのを大幅に簡略化します。
  2. django-render-blockも同様に、主要なテンプレートファイル内にテンプレートフラグメントを含めることを可能にし、Locality of Behaviorの原則に従うことができます。

Hypermedia-Driven Applicationのアクションの大部分がハイパーメディア（つまりHTML）に存在するため、これらの二つのDjango拡張をインストールして、Djangoテンプレートでの作業を容易にすることは重要です。

Profile Photo

Author

Added

2023年11月29日

Technologies
HTMX HTMX
TailwindCSS TailwindCSS
hyperscript hyperscript
Django Django