Python
 Computer >> コンピューター >  >> プログラミング >> Python

Djangoプロジェクトにdjango-materialを導入してMaterial Designのフォームを作る方法

Material Design（マテリアルデザイン）は、開発者の間で非常に人気のあるデザインテンプレートです。通常はCDN経由でフロントエンドに読み込んで使用します。本記事では、このMaterial DesignをDjangoのフォームウィジェットに適用し、ビューからフォームをレンダリングする方法を解説します。

django-materialは、CDNを使わずに、レンダリングされるHTMLファイルやフォームウィジェットへ自動的にMaterial Designを適用できるライブラリです。

1. django-materialのインストール

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

pip install django-material

続いて、プロジェクト・アプリ・URLの設定を行います。ここではアプリ名を「myapp」とします。

2. settings.py の設定

settings.pyのINSTALLED_APPSに「material」を追加します。

INSTALLED_APPS += ['material']

3. モデルの作成（models.py）

models.pyに、フォームで使用するシンプルなモデルを定義します。

from django.db import models

# Create your models here.
class Data(models.Model):
    Name = models.CharField(max_length=100)
    salary = models.CharField(max_length=20)

ここでは、名前と給与を持つシンプルなDjangoモデル「Data」を作成しました。このモデルを後ほどフォームで利用します。

4. URLの設定（urls.py）

urls.pyでビューをホームURLに紐付けます。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]

これにより、トップページにアクセスした際にhomeビューが呼び出されます。

5. ビューとフォームの作成（views.py）

views.pyにModelFormとビュー関数を記述します。

from django.shortcuts import render
from django import forms
from .models import Data

class SalaryForm(forms.ModelForm):
    class Meta:
        model = Data
        fields = "__all__"

def home(request):
    if request.method == 'POST':
        form = SalaryForm(request.POST)
        if form.is_valid():
            form.save()
    else:
        form = SalaryForm()

    return render(request, 'home.html', {'form': form})

ここではDataモデルをもとにModelFormを作成し、POSTリクエスト時にはバリデーション後にデータを保存、GETリクエスト時には空のフォームを表示しています。

6. テンプレートの作成（home.html）

忘れずにtemplatesフォルダを作成し、その中にhome.htmlを配置してください。

home.htmlの記述例：

{% include 'material/includes/material_css.html' %} {# この2つのincludeで #}
{% include 'material/includes/material_js.html' %} {# Material Designを読み込む #}
<!DOCTYPE html>
<html>
    <head>
        <title>
            TUT
        </title>
        <style>

        </style>
    </head>
    <body>

        <h2>FORM</h2>
        <form action="/" method="post">
            {% csrf_token %}
            {{ form }}
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

テンプレートの先頭でdjango-materialが提供するCSSとJSを読み込むことで、{{ form }}で出力されるフォームに自動的にMaterial Designが適用されます。

実行結果

サーバーを起動してページを開くと、Material Designが適用された美しいフォームが表示されます。

なお、デザインをカスタマイズしたい場合は、<style>タグを使ってMaterial DesignのCSSを上書きすることも可能です。

  1. Windows 10の画面をテレビやプロジェクターに投影する方法｜無線・有線どちらも解説

    お気に入りの映画を観るとき、パソコンの小さな画面では物足りないと感じたことはありませんか？PCの画面をテレビやプロジェクターにミラーリングできれば、大画面ならではの臨場感でエンターテインメントを存分に楽しめます。実は、その設定はとても簡単です。この記事では、Windows 10で画面を外部ディスプレイに投影する2つの方法——ワイヤレス接続と有線接続——をわかりやすく解説します。 方法1：Miracastを使ってWindows 10からワイヤレスディスプレイに投影する Miracastは、PCやデバイスの画面をテレビやプロジェクターにワイヤレスで表示するために開発された無線ディスプレイ技術です

  2. 【Windows 10】スマートフォンの画面をPCにワイヤレス投影する方法

    ワイヤレスでの画面共有は、スマートフォンの動画や音楽を大画面で楽しむ手段として、ますます人気が高まっています。Miracast（ミラキャスト）などのプロトコルを使えば、モバイル端末からテレビへ映像を送信できます。実は、Windows 10 PCもこの受け皿にすることが可能で、スマートフォンの画面をデスクトップのモニターにミラーリングできるのです。 Windows 10では、Anniversary Update（バージョン1607）以降、画面をPCへストリーミングするために必要な機能がすべて標準搭載されています。OS内でMiracastコンテンツの送信と受信の両方が可能です。ここからは、PCをM