【Django】ファイルの関係性を解説しながらBMI計算アプリの作成　その５［Python］

2021年10月20日2022年12月9日

URLをコピーしました！

Django

前回、BMI計算アプリで表示されるBMIと適正体重の小数点以下の桁数を減らし、また入力した値を保持するように変更しました。

単位を記載する

最初の改善点は簡単にできるだろと思ってやり始めたら、意外とできずに困ってしまいました。

ただ何となく、こんなんできないだろうなと思ったやり方でクリアできました。

まず最初に変更するファイルですが、思っていたのは/testapp2/bmiapp/views.py 。

でも違いました。

変更するのは、/testapp2/bmiapp/templates/bmiapp/index.html です。

testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── bmiapp
│   │       └── index.html　＜ーーこれを修正
│   ├── tests.py
│   ├── urls.py
│   └── views.py　　＜ーーこれではない
├── db.sqlite3
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

/testapp2/bmiapp/templates/bmiapp/index.html の元々はこんな感じ。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        {{ forms }}
        <input type='submit' value="click">
    </form>
    <p>{{bmi}}  {{optimal}}</p>
</body>
</html>

ここでつまづいたのが、「height（身長）」「weight（体重）」のフォームが「{{ forms }}」と一つの変数で呼び出されてしまっていることです。

最初はここに「cm」と「kg」という単位を書いておしまい、だと思っていたのですが、そうはさせてくれないようです。

ということで「forms」を「height」フォームと「weight」フォームに分ける必要が出てきました。

そこで何となく試してみたのが、「{{ forms.height }}」「{{ forms.weight }}」という書き方。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        {{ forms.height }}
        {{ forms.weight }}
        <input type='submit' value="click">
    </form>
    <p>{{bmi}}  {{optimal}}</p>
</body>
</html>

これがドンピシャで当たり、こういうフォームが得られました。

ラベルが消えてしまいましたが、HTML上で分けて書くことに成功しました。

HTML上で分けて書くことができれば、あとはラベルと単位を書いておけばOKです。

ということでこんな感じ。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        Height: {{ forms.height }} cm
        Weight: {{ forms.weight }} kg
        <input type='submit' value="click">
    </form>
    <p>{{bmi}}  {{optimal}}</p>
</body>
</html>

実行してみるとこう表示されます。

おまけ１：ラベルの表示方法

先ほどのやり方でラベルも単位も表示できてめでたしめでたしなのですが、もう一つのラベルの表示方法があったのでついでに紹介しておきます。

こちらの方法では、/testapp2/bmiapp/templates/bmiapp/index.html と/testapp2/bmiapp/forms.pyを変更します。

testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py　＜ーーこれを修正
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── bmiapp
│   │       └── index.html　＜ーーこれを修正
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

まずは/testapp2/bmiapp/forms.pyを変更していきましょう。

元々はこうでした。

from django import forms

class BMIForm(forms.Form):
    height = forms.IntegerField()
    weight = forms.IntegerField()

forms.IntegerField()の括弧の中に「label=”表示したいラベル名”」を追加します。

from django import forms

class BMIForm(forms.Form):
    height = forms.IntegerField(label='Height: ')
    weight = forms.IntegerField(label='Weight: ')

次に/testapp2/bmiapp/templates/bmiapp/index.html を変更していきます。

この際、先ほど forms.pyに書いたラベルを表示したい部分に「{{ forms.XXX.label}}」を追加します。

例えばheightのラベルなら「{{ forms.height.label }}」、weightのラベルなら「{{ forms.weight.label }}」です。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <form action="{% url 'index' %}" method="post">
        {% csrf_token %}
        {{ forms.height.label }} {{ forms.height }} cm
        {{ forms.weight.label }} {{ forms.weight }} kg
        <input type='submit' value="click">
    </form>
    <p>{{bmi}}  {{optimal}}</p>
</body>
</html>

これで実行してみると、こう表示されます。

おまけ２：ラベルの表示は日本語も可能

ちなみにラベルの表示は日本語でも可能ですので、分かりやすいよう日本語で表記してみます。

/testapp2/bmiapp/forms.pyを再度開き、このように変更します。

from django import forms

class BMIForm(forms.Form):
    height = forms.IntegerField(label='身長: ')
    weight = forms.IntegerField(label='体重: ')

これを実行するとこうなります。

確かに身長と体重が日本語で表記されるようになりました。

最初に適当な例を表示しておく

次に最初から適当な例（初期値）を表示しておくようにしてみましょう。

最初から数値を入れておくには、/testapp2/bmiapp/forms.py を変更します。

testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py　＜ーーこれを修正
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── bmiapp
│   │       └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

forms.IntegerField()の括弧の中に「initial=初期値」を追加します。

ということでheightの初期値を「165」、weightの初期値を「55」としてみましょう。

from django import forms

class BMIForm(forms.Form):
    height = forms.IntegerField(label='身長: ', initial=165)
    weight = forms.IntegerField(label='体重: ', initial=55)

変更を保存した後、初期値をみるために一度ページを閉じて、再度開いてみるとこうなります。