Djangoアプリを作る(html, css,カスタムフィルタ)

2021.01.10
Python

前回の記事でDjangoアプリの最低限の設定を行いました。今回はもう少し踏み込んだ設定をします。なお、前回はアプリ名をpollsにしていましたが、今回はmainというアプリが設定済みという前提で進めています。

1. HTML
2. CSS
3. カスタムテンプレートフィルタ

HTML

まずhtmlを使用する準備をします。htmlファイルはアプリフォルダの中にtemplateフォルダを作り更にその中にアプリ名のフォルダを作成します。templateフォルダの中のフォルダ名は何でもいけるようですが、他アプリのhtmlファイルとの競合を避けるために別名にしたほうが良いようです。今回はindex.htmlという名前で保存します。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <link rel="stylesheet" href="{% static "css/style.css" %}"
    <meta chartset="UTF-8">
    <title>Main Page</title>
</head>
<body>
    <p>{{msg}}</p>
</body>
</html>

<!DOCTYPE html>

{% load static %}

<head>

</head>

<body>

</body>

</html>

bodyタグの中に{{msg}}という文字列がありますが、これがデータの受け渡しに必要となります。

アプリフォルダの中のviews.pyを下記のように書き換えます。アプリ名によってmain/index.htmlのmainは変更します。このコードのindex関数でrenderに渡されているcontentがhtmlで表示できるデータとなります。

from django.shortcuts import render

def index(request):
    content={
        "msg":"Test Message"
    }

    return render(request, "main/index.html", content)

from django.shortcuts import render

def index(request):

content={

"msg":"Test Message"

}

return render(request, "main/index.html", content)

ここまで設定して、python manage.py runserverでサーバーを起動後、http://127.0.0.1:8000/mainにアクセスすると、Test Messageと表示されます。これでとりあえずhtmlファイルが使えるようになりました。次はcssが使えるようにします。

CSS

まずプロジェクトフォルダにstaticフォルダを作成します(mainフォルダと同列)。更にその中にcssフォルダを作成して下記をstyle.cssという名前で保存します。

body{
    background-color: lightblue;
}

body{

background-color: lightblue;

}

更にsettings.pyの末尾に下記を追加します。

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_DIRS = (

os.path.join(BASE_DIR, 'static'),

)

最後に、htmlを少し変更して、load staticとスタイルシートの読み込みを行います。

<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static "css/style.css" %}"
    <title>Main Page</title>
</head>
<body>
    <p>{{msg}}</p>
</body>
</html>

<!DOCTYPE html>

{% load static %}

<head>

</head>

<body>

</body>

</html>

ここまで準備して、http://127.0.0.1:8000/mainにアクセスすると、背景色が変更されているかと思います。これで、cssでデザインができるようになりました。

カスタムテンプレートフィルタ

Djangoでは自分で関数を定義してそれを呼び出すことが出来ます。試しにそれを設定してみます。

最初にアプリフォルダの中にtemplatetagsフォルダを作成します。そして、__init__.pyという名前の空のファイルを作成して保存します。

そして、同じフォルダに下記のコードをcustom_filter.pyという名前で保存します(名前は任意)。今回はcubeという名前で値の3乗を返す関数を登録します。

from django import template

register=template.Library()

@register.filter
def cube(num):
    return num**3

from django import template

@register.filter

def cube(num):

return num**3

そしてhtmlファイルの任意の位置で{% load custom_filter %}の後に{{5|cube}}という感じで関数を呼び出すと125という文字が表示されます。当然、数字は任意に変更できます。

以上で、一通りの設定が終わり、アプリを作ることが出来るようになりました。とりあえず今はデータベースを使う予定はないので、必要になったら覚えようと思います。

前の記事

Djangoアプリを作る (初期設定) 2021.01.10
次の記事

DjangoでJSON受け渡し 2021.01.13

Djangoアプリを作る(html, css,カスタムフィルタ)

HTML

CSS

カスタムテンプレートフィルタ

Djangoアプリを作る (初期設定) 2021.01.10

DjangoでJSON受け渡し 2021.01.13