MENU
  1. ホーム
  2. プログラミング言語
  3. python
  4. Django
  5. 【初めてのDjango】（入門編 #05）お問い合わせ送信後にメッセージを表示させる

【初めてのDjango】（入門編 #05）お問い合わせ送信後にメッセージを表示させる

python Django 初心者向け

本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーションを作成しながら基本的な知識をご紹介していきます。

こんな人におすすめ！

・とりあえず手を動かしてWebアプリケーションを作成してみたい！
・pythonはある程度知識ある

本記事は連作になっております。

  1. （入門編 #01）単一ページのアプリケーション作成まで
  2. （入門編 #02）CSSの適用からベーステンプレートの作成まで
  3. （入門編 #03）コンテキスト情報とテンプレートタグの活用
  4. （入門編 #04）お問い合わせフォームの設置、メール送信処理まで
  5. （入門編 #05）お問い合わせ送信後にメッセージを表示させる ←イマココ
  6. （入門編 #06）アプリケーションをGAEにデプロイ
  7. （発展編 #01）データベースの設定を行う
  8. （発展編 #02）カスタムユーザーモデルの定義、マイグレーション
  9. （発展編 #03）django-allauthで認証機能を実装する
  10. （発展編 #04）ListViewを用いてモデル情報を描写する
  11. （発展編 #05）CreateViewを使用してデータベースを更新
  12. （発展編 #06）DetailViewを用いて詳細表示
  13. （発展編 #07）UpdateViewを用いてデータベース編集
  14. （発展編 #08）DeleteViewを用いてデータベースのレコード削除

もし本記事のみご覧になる方は、こちらからファイル群をダウンロードすることで、実際に手を動かしながら学ぶことができるかと思います。

目次

振り返り

前回記事ではお問合せフォームを設置し、さらに実際にメールを送信する処理まで実装しました。

しかし現状のままですと、メールを送信した後に何も変化がないので、ユーザーは「ちゃんとメールが送信されたのか、、、？」と不安になってしまいます。

本記事ではまず、メールを送信した後にメッセージが表示されるようにしたいと思います。

メール送信後のメッセージが表示されるようにする

メール送信後のメッセージをこのように表示させます。

新米エンジニア

ちゃんと送信できたか分かりやすいですね！

ビューの編集

まずはメッセージを出力したいビュー（ContactView）に対して、下記のようにコードを編集してください。

# ... 略 ...

from django.contrib import messages

# ... 略 ...

class ContactView(generic.FormView):
    template_name = "contact.html"
    form_class = ContactForm
    success_url = reverse_lazy('cafe_app:contact')

    # ... 略 ...
    
    def form_valid(self, form):
        form.send_email()
        messages.success(self.request, 'お問い合わせありがとうございます。')
        logger.info('Contact sent by {}'.format(form.cleaned_data['name']))
        return super().form_valid(form)

ハイライト部分を追加してください。

16行目のように、messages.successメソッドを用いることでメッセージをテンプレートに渡すことができます。テンプレート側では messages という変数でこの渡したメッセージを扱うことができます。

またメッセージはレベルを分けて吐き出すことができ、「SUCCESS」「INFO」「WARNING」「ERROR」というレベルがあります。

処理が失敗した場合は messages.error() を用いるなど、適宜レベルを分けてメッセージを吐き出すことができます。今回はメール送信処理が正常に処理できた場合のメッセージなので messages.success() を用いています。

テンプレートの編集

続いて、各ページで共通利用する base.html を次のように編集しましょう。

<body>
    <!-- messages -->

    {% if messages %}
    <div class="wrapperMessages">
        <div class="messagesInner">
            <ul>
                {% for message in messages %}
                <li class="message">{{ message }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}

    {% block contents %}{% endblock contents %}

    <!-- 略 -->
</body>

先ほどもちょろっと触れました、テンプレート側に messages という変数でメッセージのリストが渡されます。なので、まずは {% if message %} で messages が空かどうかのチェックを行なっています。

{% if messages %}
    <!-- messagesが空じゃなかった時の処理 -->
{% endif %}

またforを用いて messages の中身を順に取り出しています。

<!-- messagesの中身を順に取り出し -->
{% for message in messages %}
    <li class="message">{{ message }}</li>
{% endfor %}

この状態でお問い合わせを送信すると、ページ上部に「お問い合わせありがとうございます。」と表示されます！

ついでにCSSも下記を追加し、見た目を整えましょう！

/* messages */

.wrapperMessages {
    background-color: var(--base-color);
    padding: 20px 0;
}

.message {
    background-color: var(--semi-dark-color);
    width: fit-content;
    padding: 10px 20px;
    margin: .2rem auto;
    color: var(--base-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

再度になりますが、このように表示されるはずです。

メッセージ内容や見た目はお好きなように編集していただいて構いません。

メッセージレベルによって見た目を変更する

ここまでで、お問い合わせが送信されたらメッセージが表示されるようになりました。

しかし現在のままだと、どのメッセージレベルにおいても同じ見た目で出力されてしまいます。ユーザー視点で考えると、「正常に処理された場合のメッセージ」よりも「エラー内容を表すメッセージ」の方を目立たせた方が良いと思います。

これを実現させるために、まずは「cafe」ディレクトリ直下にある settings.py に下記を追加します。

# ... 略 ...

from django.contrib.messages import constants as messages

# ... 略 ...

MESSAGE_TAGS = {
    messages.ERROR: 'message-danger', 
    messages.WARNING: 'message-warning', 
    messages.SUCCESS: 'message-success', 
    messages.INFO: 'message-info', 
}

この MESSAGE_TAGS リストにて、各レベルに応じたタグを設定することができます。またテンプレート側で {{ message.tags }} と記述して取り出すことができます。

これによって、各メッセージレベルに応じたクラス名を与えることができます！

試しに、ビューにて全てのメッセージレベルで出力するようにしてみます。

def form_valid(self, form):
    form.send_email()
    # messages.success(self.request, 'お問い合わせありがとうございます。')
    messages.error(self.request, 'errorです。')
    messages.warning(self.request, 'warningです。')
    messages.success(self.request, 'successです。')
    messages.info(self.request, 'infoです。')
    logger.info('Contact sent by {}'.format(form.cleaned_data['name']))
    return super().form_valid(form)

さらに base.html の一部を次のように編集します。

{% for message in messages %}
<li class="message {{ message.tags }}">{{ message }}</li>
{% endfor %}

この状態でお問い合わせを送信してみましょう！

４つのメッセージが表示されております。見た目は同じですが、html構造はどのようになっているでしょうか、、。開発者ツールで覗いてみます。

このように、先ほど settings.py の MESSAGE_TAGS にて設定したタグが {{ message.tags }} で取り出せており、class名として適用されているのが確認できます。

したがって、下記のようにCSSを適用させることでメッセージレベルに応じて見た目を変更することができます。

.message-danger {
    background-color: red;
    color: white;
}

CSSが効かない時は、ブラウザのキャッシュを削除すると解決する場合があります。

無事メッセージレベルごとに見た目を変化させることができました！

このままでと、ただお問い合わせを送信しただけで４つもメッセージが表示されてしまうので、views.py は元に戻しておきましょう。

この時点でのコード全体をGithubに載せております。確認用としてお使いいただければと思います。

まとめ

本セクションでは、お問い合わせ送信後のメッセージを表示させ、さらにメッセージレベルに応じて見た目を変更するまでをご紹介させていただきました。

次回はいよいよアプリケーションをデプロイし、通常のサイトとして使用できるようにするまでをご紹介いたします！

あわせて読みたい
【初めてのDjango】（入門編 #06）アプリケーションをGAEにデプロイ 本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーシ…

案件、ありますか？

「メインの仕事があるけれど、週1、2日だけできる仕事ないかな、、、」

「ある程度スキルが身に付いてはきたけど、そのスキルを活用できる場が欲しい」

なんて悩みが以前はありました。

自分で仕事を探しに行くのも大事ですが、蛇の道は蛇。その道の人に頼むことで、自分だけでは見つからないような案件に携わることができます。

IT PRO パートナーズでは、簡単に無料でアカウントを登録でき、さらにはエージェントさんに希望の働き方・案件の種類を提示することでお仕事を紹介してくれます！

登録自体も非常に簡単で、「エージェントさんとの面談を希望する」という欄にチェックをするだけで、エージェントさんから直接連絡をいただくことができます。

驚くほど簡単で正直拍子抜けしてしまいました笑

もしお仕事探しに困っておりましたら、一度登録し案件を眺めてみることをおすすめします！

python Django 初心者向け
django python
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

yamama72のアバター yamama72

勤めていた設計会社を退社し、フリーランスとして活動しています
また、趣味で主にpyhonを用いて機械学習を行なっています！
現在競艇の予測モデルの開発中です。

関連記事

コメント

コメント一覧 （11件）

コメントする

目次