Djangoで作る初めてのウェブアプリケーション（番外編）お問い合わせ機能

本記事は、マガジン（『超入門』Djangoで作る初めてのウェブアプリケーション）で作成した、Djangoアプリを使用します。

今日は簡単にGmailを使用して、お問い合わせフォームを作り実際に送信します。

メールサーバーの設定

メールを送る際にはSMTPメールサーバーの設定が必要になります。

settings.pyを下のように編集します。

Django/blog/blog/settings.py

＃省略

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.googlemail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = 'あなたの@gmail.com'
EMAIL_HOST_PASSWORD = 'あなたのパスワード'

コード説明です。

EMAIL_BACKENDは、Djangoでは簡単にメール送信を行うことが可能なモジュールがあるのでこちらを使用します。

EMAIL_HOSTは、使用するメールの設定です。今回はgmailを使用するので、googlemail.comとしています。

EMAIL_USE_TLSは、送信中の文章を暗号化するようにTrueを設定します。

EMAIL_PORTは、サーバーに接続するport番号の指定です。各メールサービスによって異なります。gmailは587です。

EMAIL_HOST_USERは、使用する人のgmailアカウント（Googleアカウント）を登録したときに決めたgmailのアドレスです。

EMAIL_HOST_PASSWORDは、後ほどgoogleのセキュリティ設定で、発行します。

これでsettings.pyの設定は完了です。

お問い合わせ用のフォームを作る

お問い合わせページで使用するフォームをforms.pyに作ります。

/Users/takuya/Desktop/Django/blog/blog_app/forms.py

from django import forms

#省略

class ContactForm(forms.Form):
   name = forms.CharField(label='お名前', max_length=50)
   email = forms.EmailField(label='メールアドレス',)
   message = forms.CharField(label='メッセージ', widget=forms.Textarea)

見ての通り使用するフォームは、3つ（名前、メールアドレス、メッセージ）でシンプルです。

お問い合わせページを作ろう

作業手順は、urls.py→views.py→contact.html→done.htmlです。

Django/blog/blog_app/urls.py

#省略
app_name = 'blog_app'
urlpatterns = [
   path('', views.index, name='index'),
   path('detail/<int:post_id>/', views.detail, name='detail'),
   path('add/', views.add, name='add'),
   path('edit/<int:post_id>/', views.edit, name='edit'),
   path('delete/<int:post_id>/', views.delete, name='delete'),
   #追加
   path('contact/', views.contact, name='contact'),  #お問い合わせページ    
   path('contact/done/', views.done, name='done'),   #お問い合わせ後のページ ]

お問い合わせページと、送信後に遷移するページのpathの設定です。

path('contact/', views.contact, name='contact'),
path('contact/done/', views.done, name='done')

views.pyにお問い合わせ用の関数を追加

Django/blog/blog_app/views.py

#省略
#追加
from django.http import HttpResponse
from django.conf import settings
import textwrap
from django.core.mail import BadHeaderError, EmailMessage

# redirectがなくてエラーが出ると言うことがあったので一応追加しときます。
from django.shortcuts import render, get_object_or_404, redirect

#ContactFormのみ！ PostAddFormは別のフォーム用です！
from .forms import PostAddForm, ContactForm


#省略

 #お問い合わせ 
def contact(request):
  form = ContactForm(request.POST or None)
  if form.is_valid():
     name = form.cleaned_data['name']
     message = form.cleaned_data['message']
     email = form.cleaned_data['email']
     subject = 'お問い合わせありがとうございます。'
     contact = textwrap.dedent('''
        ※このメールはシステムからの自動返信です。

        {name} 様
        
        お問い合わせありがとうございます。
        以下の内容でお問い合わせを受け付けました。
        内容を確認させていただき、ご返信させていただきますので、少々お待ちください。

        ----------------------------------

        ・お名前
        {name}

        ・メールアドレス
        {email}

        ・メッセージ
        {message}
        -----------------------------------
        株式会社　〇〇
        〒000-0000
        〇〇県〇〇市〇〇区〇〇1-0-0
        TEL 123-456-7890
        営業時間 8:00~17:00（月~金）
        WEB: https://www.......com/
     ''').format(
        name=name,
        email=email,
        message=message
     )
     to_list = [email]
     bcc_list = [settings.EMAIL_HOST_USER]
     try:
        message = EmailMessage(subject=subject, body=contact, to=to_list, bcc=bcc_list)
        message.send()
     except BadHeaderError:
        return HttpResponse('無効なヘッダが検出されました。')
     return redirect('blog_app:done')

  return render(request, 'blog_app/contact.html',{'form': form})


def done(request):
   return render(request, 'blog_app/done.html')

コード説明です。

from django.core.mail import BadHeaderError は、HTTPヘッダ・インジェクションというサイバー攻撃を防ぐためのものです。

例として、お問い合わせフォームの内容に、任意の改行などを入れて誤作動を引き起こさせたりします。

textwrap.dedent は文字列中の余白、空白などを取り除いてくれます。
今回はメールの内容をviews.pyで入力しているので、textwrap.dedentで予め空白や余白を取り除いておきます。

これでviews.pyができました。

お問い合わせページを作ろう

contact.htmlとdone.htmlを作ります。

Django/blog/templates/blog_app/contact.html

{% extends 'base.html' %}
{% block content %}   

<div class="container">
<h1 class="mt-5 pt-4 text-center">お問い合わせ</h1>
<form action="{% url 'blog_app:contact' %}" method="POST">
 {% csrf_token %}
 <label for="id_name" class="sr-only">お名前</label>
 <input class="form-control mb-3" name="name" maxlength="50" required="" id="id_name" type="text" placeholder="お名前">

 <label for="id_email" class="sr-only">メールアドレス</label>
 <input type="email" name="email" required="" id="id_email" placeholder="メールアドレス" class="form-control mb-3">

 <label for="id_message" class="sr-only">メッセージ:</label>
 <textarea name="message" cols="40" rows="10" required="" id="id_message" placeholder="メッセージ" class="form-control mb-3"></textarea>

<button type="submit" class="btn btn-block btn-outline-success">送信する</button>
</form>
</div>
{% endblock %}

Bootstrapを使用して、フォームを装飾しています。

Part7（見栄えを Bootstrapで整えよう）

フォームデータの送信先はcontact関数です。（url 'blog_app:contact'）

続いてお問い合わせ後のページです。

Django/blog/templates/blog_app/done.html

{% bootstrap_css %} 
{% bootstrap_javascript jquery='full' %}
<div class="m-5 text-center">
<div class="card d-inline-block">
 <div class="card-body p-4">
   <h4 class="card-title">お問い合わせありがとうございます。</h4>
  <hr>
   <a href="{% url 'blog_app:index' %}"><button type="button" class="btn btn-primary">トップページへ</button></a>
 </div>
</div>
</div>

特にコードに新しい内容はありません。

これでDjangoでメールを送信する準備が完了しました。

しかし、このままではまだ送信できないので、googleのセキュリティ設定を変更する必要があります。

Google側の設定変更

ここからGoogleでアプリ専用のパスワードを発行します。

手順は二段階認証①の設定→パスワードの取得②です。

まずはグーグルのトップ画面の右上のアイコンをクリックします。

Googleアカウントを管理に進みます。

管理画面左のセキュリティをクリックします。

すると下のように2段階認証プロセスとアプリパスワードが確認できます。

今回は既に行っており、自身のセキュリティの関連もあるのでここからは、Googleの指示に従うだけなので２段階認証と、アプリパスワードを設定してみてください。

アプリパスワードが取得できたら、settings.pyに貼り付けましょう。

#省略
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.googlemail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = 'あなたの@gmail.com'
EMAIL_HOST_PASSWORD = 'ここに貼り付け'

実際にメールを送信してみよう

現在http://127.0.0.1:8000/contact/を確認すると下のように表示されます。

値を入力して正しく送信されるとhttp://127.0.0.1:8000/contact/done/にページ遷移します。

これでホスト（自身）と問い合わせたユーザーに同じ内容のメールが届きます。

お問い合わせページの完成です。

お疲れ様です！