【85日目】Django_自作タグの作成_プログラミング学び日記

モリユウキ|YM202110

2022年1月27日 21:53

　このnoteは、31歳未経験からエンジニアを目指して勉強していく記録を綴っているものです。現在はAdTechでカスタマーサクセスを担当しつつ、色んなチャンスに恵まれ、CS業務や子育てと並行しながらチャレンジしています。

　これからプログラミングを始める方にとってのTipsやモチベアップに繋げられるように頑張りたいと思っています。
--------------------------------------------

今回もTodoアプリのブラッシュアップの続きです。
↓前回記事はこちら

昨日から今朝にかけて頑張りまして、自作タグを無事に動作させることができました。

まずはちゃんとブラウザに表示させることを目指した段階なので、機能自体は適当です。以下の青枠の現在時刻が自作タグになっていて、ページを読み込んだ時の時間が表示されるようにしています。

自作タグを動作させるまでの手順

アプリのディレクトリ直下に【templatetags】ディレクトリを作成
templatetagsディレクトリに load 呼出し名.pyのファイルを作成
　　※ここにコードを記載していきます。
html側で自作タブを呼び出すコードを記載
templatetagsディレクトリに__init__.pyを配置
　　※ 何も書かなくてもOKな様です。
settings.pyのTEMPLATESセクションにbuiltinsとして自作タグを設定
templatetags内を設定したらDjangoを再起動

自作タグのコードのお作法

呼出し名.pyというファイルに記載していきます。呼出し名は任意ですが、このあと色々設定するのでわかりやすい名前がいいと思います。今回はextra_tagsという名前で作りました。このファイルはアプリ直下に作成したtemplatetagsディレクトリに格納します（ディレクトリ名は指定されています）。

自作タグのコードは具体的には以下のように書きます。関数より上の部分が自作タグ用で、関数自体は普通に記載してOKです。

[extra_tags.py]

from django import template
import datetime

register = template.Library() # Djangoテンプレートタグライブラリ


@register.simple_tag
def time_stamping():
        now = datetime.datetime.now()
        d = now.strftime('%Y/%m/%d %H:%M')
        return d

単純に現在時刻を返すだけの関数です。この機能自体は組み込み関数で存在するので、本当はわざわざ作る必要はありません。今回は練習と、このあとやりたいことに時刻情報が必要だったので自作してみました。

デコレーターは「simple_tag」を使っていますが、他にも「filter」を使うケースもあるみたいで、違いについては今後学んでいきたいと思います。

html側での呼出し方法

「simple_tag」デコレーターで作った関数は{% 関数名 %}を呼び出したい場所に記載すればOKです。その前に{% load 呼出し名 %}を記載するのを忘れずに。

[after_create.html]
 
{% extends 'todo/base.html' %}
{% load extra_tags %}

{% block header %}
<h1><div class="mt-5">Todo List</div></h1>
<p class="p-3 mb-4 bg-info text-white fw-bold h5" align="center">タスクが新たに追加されました<br>{% time_stamping %}</p>

<a class="btn btn-primary" href="{% url 'create' %}">新規作成</a>
{% endblock header %}

templatetagsディレクトリにinit.pyを配置

ただ「__init__.py」というファイルを作成するだけです。

元々はPythonの仕様で、あるフォルダにあるPythonプログラムをPythonモジュールとしてインポートさせたい場合に「__init__.py」ファイルが必要だったことによるものみたいです。

Python3.3以降は必須でなくなったみたいですが、Djangoにおいては手順として示されているようで、予期せぬエラーを踏まないためにきちんと踏襲しています。

settings.pyのTEMPLATESセクションにbuiltinsとして自作タグを設定

これも忘れてはならない設定です。全体設定のsettings.pyに自作タグを記載しておく必要があります。

TEMPLATESというセクションがあるので、そこにbuiltinsとして「アプリ名.templatetags.呼出し名」を記載します（呼出し名は自作タグを書いたファイル名です）。

[settings.py]
 
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins':[
                'todo.templatetags.extra_tags'
            ],
        },
    },
]

templatetags内を設定したらDjangoを再起動

ここまででようやく準備完了です。一度サーバーを停止して、再びpython manage.py runserverで立ち上げればタグが機能します。

明日からはもう少し複雑なタグを作ってみて、ちゃんとテンプレートで表示できるかチャレンジしてみたいと思います…！

参考

これまで修了したコース等

【YouTube_Django関係】
Pythonでウェブサービスを作ろう！ #1
テンプレートをマスターしよう！ #2
静的ファイルを配信しよう！#3
本番公開しよう！ #4
データベースと接続しよう！ #5
ブログを作って学ぶモデル入門！ #6
これが汎用ビューの力！ #7
Djangoフォームを自由自在に操ろう！ #8
djagoを最大限使って効率よくログインを作ろう！ #9
ログイン完成！サインアップ & メール認証 #10
データベースマイグレーション前編 #15
データベースマイグレーション後編 #16

【Paiza】
JavaScript体験篇　　　　　　　7/15講座
Aランクレベルアップメニュー　24/49問
データセット選択メニュー　　　4/17問
配列メニュー　　　　　　　　61/64問
ループメニュー１　　　　　　20/20問
ループメニュー２　　　　　　12/20問
条件分岐メニュー　　　　　　25/25問
二重ループメニュー　　　　　19/19問
配列活用メニュー　　　　　　26/26問
文字列処理メニュー　　　　　30/30問
Bランクレベルアップメニュー　62/62問
Cランクレベルアップメニュー　30/30問
ランクB合格
ランクC合格

【書籍／ブログ】
Django入門 | 初心者でも1時間でWebアプリ(Todoアプリ)を作成するコース
基礎からのMySQL　　　　 514/514頁
Web技術の基本　　　　　 189/189頁　※2周目中
京大のPython教科書　　　 116/201頁
Pythonデータベースプログラミング　194/194頁
Pythonエンジニアファーストブック読了

【Progate】
Python Ⅰ~Ⅴ
Python アプリ版　コースⅠ~Ⅴ
SQL Ⅰ~ Ⅳ
SQL アプリ版　コースⅢ
HTML&CSS 初級編

【その他】
Pythonの環境構築
VSCodeの環境構築
MySQLの環境構築（MAMP）
Git / GitHubの環境構築
HEROKUの環境構築

この記事が気に入ったらサポートをしてみませんか？