![見出し画像](https://assets.st-note.com/production/uploads/images/70808683/rectangle_large_type_2_99db76072b44b03715230ae7b095ce70.jpeg?width=1200)
【85日目】Django_自作タグの作成_プログラミング学び日記
このnoteは、31歳未経験からエンジニアを目指して勉強していく記録を綴っているものです。現在はAdTechでカスタマーサクセスを担当しつつ、色んなチャンスに恵まれ、CS業務や子育てと並行しながらチャレンジしています。
これからプログラミングを始める方にとってのTipsやモチベアップに繋げられるように頑張りたいと思っています。
--------------------------------------------
今回もTodoアプリのブラッシュアップの続きです。
↓前回記事はこちら
昨日から今朝にかけて頑張りまして、自作タグを無事に動作させることができました。
まずはちゃんとブラウザに表示させることを目指した段階なので、機能自体は適当です。以下の青枠の現在時刻が自作タグになっていて、ページを読み込んだ時の時間が表示されるようにしています。
![](https://assets.st-note.com/img/1643286604034-wqGYgLld8a.png?width=1200)
自作タグを動作させるまでの手順
アプリのディレクトリ直下に【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」というファイルを作成するだけです。
![](https://assets.st-note.com/img/1643286755996-StPaEjVAcN.png)
元々は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問
ループメニュー1 20/20問
ループメニュー2 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の環境構築
この記事が気に入ったらサポートをしてみませんか?