#初めに
この記事は、PYTHON3.6.5、DJANGO2.0の環境で
YubinBango (https://github.com/yubinbango/yubinbango) APIを使用して
郵便番号⇒住所自動入力を実現するためのプラクティスです。
YubinBango apiは、HTML内で特定のCLASS定義を設定するだけで
郵便番号⇒住所自動入力が実現できるAPIです。
今回は、自分が使いやすいように
・都道府県（p-postal-code）
・市区町村番地（p-locality p-street-address p-extended-address）
・建物名（自由入力）
の区分で住所を入力するようにします。
#基礎環境の用意
CREATE VIEWで検証しました。
models.py
from django.db import models
class Address(models.Model):
#modelsは、入力に必要な郵便番号と住所を用意
zip_code = models.CharField(
verbose_name='郵便番号',max_length=8,blank=True,
)
address1 = models.CharField(
verbose_name='都道府県',max_length=40,blank=True,
)
address2 = models.CharField(
verbose_name='市区町村番地',max_length=40,blank=True,
)
address3 = models.CharField(
verbose_name='建物名',max_length=40,blank=True,
)
forms.py
#CLASS定義をattrsに追加
from django import forms
from .models import Person
class AddressForm(forms.ModelForm):
class Meta:
model = Address
fields = ("zip_code", "address1", "address2", "address3")
widgets = {
'zip_code':
forms.TextInput(
#attrsでp-postal-codeを指定
attrs={'class': 'p-postal-code','placeholder': '記入例：8900053',},
),
'address1': forms.TextInput(
#attrsでp-regionを指定
attrs={'class': 'p-region','placeholder': '記入例：鹿児島県'},
),
'address2': forms.TextInput(
#attrsでp-locality p-street-address p-extended-addressを指定
attrs={'class': 'p-locality p-street-address p-extended-address',
'placeholder': '記入例：鹿児島市中央町１０'},
),
'address3': forms.TextInput(
attrs={'class': '','placeholder': '記入例：キャンセビル'},
),
}
base.html
#特別な対応は必要なし
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Address</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
views.py
#特別な対応は必要なし
class AddressCreateView(LoginRequiredMixin, CreateView):
""" 登録画面（顧客情報） """
model = Address
form_class = AddressForm
success_url = reverse_lazy('index')
URLを指定
urls.py （特別な対応は必要なし）
from django.urls import path
from django.conf.urls import include
from django.contrib.auth import views
from .views import (
AddressCreateView,
)
urlpatterns = [
path('', CustomerInfoFilterView.as_view(), name='index'),
]
テンプレートはDB名+_form
address_form.html
#FORMで定義しないCLASS定義を追加
{% extends "base.html" %}
{% block content %}
#CLASSにh-adrを追加
<form method="post" class="h-adr">
{% csrf_token %}
#CLASSにp-country-nameを追加
<span class="p-country-name" style="display:none;">Japan</span>
{{ form }}
<button type="submit">save</button>
</form>
{% endblock %}
以上、templateとformにCLASS定義を追加するだけで
郵便番号→住所の自動入力が実現できました。
すごく簡単です。