あらすじ
Bootstrapを適用するのに「タグの指定がキレイになる方法」を探していてたどり着いた最終形です。
Djangoの公式チュートリアルを読みながら入力フォームを実装し、Bootstrapを適用してみました。
ところが、どうしても冗長で煩雑なコードになってしまうのです。
試行錯誤した結果、きれいに書く方法を見つけたのでご紹介します。
なんか思ってたのと違った方法
「Djangoのテンプレートに、Bootstrapのform-groupやform-controlを設定できないとき」
を参考にログインフォームでも試してみました。
これだとどうしても、labelにBootstrapが適用されません。
上手くいった方法
{{ form }}だけで済む箇所の中にBootstrapのためのclass指定をしたくて、{% for item in form %}～{% endfor %}のように分解しています。ここまでは上記の思ってたのと違った方法と同じです。
重要なのは、for item in formのitemには、 「充分過ぎるくらい情報が詰まっている」 ということです。
DjangoAdminのページ内で設定できる項目はすべて網羅しています。
データのIDと表示名、データ型まで、すべてです。
これをインテリセンスを駆使して、チェーンでプロパティを指定する。
それを各所に散りばめてあげましょう。そうすると、DjangoのAdminページ内で編集した後に、コードを変えずに、キレイに画面に反映されます。
Adminページで項目を増減しても、必須項目のチェックをオンオフしても、いちいちコードを書き換える必要はありません。
なんてスマートな記述なのでしょう。
といったものの、Django利用者としては、まだまだ素人です。
もっといいやり方があればコメント欄などで教えていただけると嬉しいです。
{% comment %} 以上略 {% endcomment %}
<form method="post" action="{% url 'login' %}" class="form-group">
{% csrf_token %}
{% for item in form %}
<div class="form-group">
<label for="{{item.id_for_label}}">{{item.label}}</label>
<input
type="{{item.field.widget.input_type}}"
class="form-control"
{% if item.field.required %}required{% endif %}
name="{{item.name}}"
id="{{item.id_for_label}}">
</div>
{% endfor %}
<button type="submit" class="submit btn btn-primary">Login</button>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
{% comment %} 以下略 {% endcomment %}
表示結果
工夫したところ
-
requiredを付ける付けないのところ - labelタグの関連づけに
nameではなく、id_for_labelを使ったところ - input type にも動的指定ができた
- 結果としてすべて動的な記述ができたこと
- マジックナンバー的なハードコーディングがなくなった
どちらもリファレンスのフォントが汚くて読みたくないから見つけるのが難しく、
Vscodeのデバッガでオブジェクトの中身を調べました。その結果見つけたプロパティから文字列を取り出して利用するようにしました。
ブラウザのフォント設定を変更すれば済む話だということに気づいたのは、この記事を書いている今です。
とはいえUXの観点からみればフォントの設定を自力で変更するのは、ユーザーにとっての負担になるので、早急に変更すべきと思いますね。
本来はライブラリの公式ドキュメントをよく読んで実装するべきですが、
今回は逆で、デバッガで機能を発見し、機能毎のリファレンスを読みに行くという流れにしました。
Bootstrapの適用方法
BootstrapのCDNを組み込む
ここを参考にして秒で終わらせました。
１行書くだけだし、早いのでオススメです。
他の方法
django-extentionを使用すると他にも方法があるみたいです。
出来るだけシンプルな構成を保ちたい人は避け、
複雑な構成でも完全にコントロールできる人はチャレンジすると良さそうです。
- Django フォームにて CSS クラスを設定する方法
- Python Django入門 (4)
- Djangoのフォームデザインを簡単かつ自由にカスタマイズする方法
- django-bootstrap4 | ライブラリ
- DjangoでBootstrap4を使う方法
ログインページ本体
個人的に機能の実装をするときに以下が一番わかりやすかったです。参考になりました。
Django2 でユーザー認証（ログイン認証）を実装するチュートリアル -2- サインアップとログイン・ログアウト
環境
Django 2.2
python 3.8
たぶん最新の環境なら通用します。
Excelsior!