BETA

【Python】wysihtml5 を利用してメールを送信してみる

投稿日:2019-01-30
最終更新:2019-01-30
※この記事は外部サイト(https://www.doraxdora.com/blog/2018/12/01/...)からのクロス投稿です

引き続き、Gmail を利用したメール送信で、今回は予定通りHTMLメールを送る方法を試してみました。

ついでに、AdminLTEに付属している「wysihtml5」を利用して、メール本文の入力欄を wysiwyg エディターに変更しました。

プログラムは前回のものを流用します。

【Python】Gmail を利用してメールを送信してみる

wysiwyg スタイルとJSの追加


AdminLTEに付属している次のファイルをプロジェクトに追加します。

Javascript
AdminLTE-2.4.5\plugins\bootstrap-wysihtml5\bootstrap3-wysihtml5.all.min.js

css
AdminLTE-2.4.5\plugins\bootstrap-wysihtml5\bootstrap3-wysihtml5.min.css

AdminLTEをダウンロードしていない場合は、次のURLからも入手可能です。

Github

プログラムの修正

画面の変更


Main.html

追加した Javascriptファイル、cssファイルの読み込みを追記します。

<link rel="stylesheet" href="{{ static_url('css/bootstrap3-wysihtml5.min.css') }}">  

<script src="{{ static_url('js/bootstrap3-wysihtml5.all.min.js') }}"></script></pre>  
&nbsp;  

全体  
<pre class="lang:xhtml decode:true " title="Main.html"><!DOCTYPE html>  
<html lang="ja">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <title>メールサンプル</title>  
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">  
    <link rel="stylesheet" href="{{ static_url('css/AdminLTE.min.css') }}">  
    <link rel="stylesheet" href="{{ static_url('css/style.css') }}">  
    <link rel="stylesheet" href="{{ static_url('css/skins/skin-blue.min.css') }}">  
    <link rel="stylesheet" href="{{ static_url('css/bootstrap3-wysihtml5.min.css') }}">  
</head>  
<body>  
    <section class="content container-fluid">  
        <div class="row">  
            <div class="col-xs-10">  
                <div class="row">  
                    <div class="col-xs-10">  
                        <!-- quick email widget -->  
                        <div class="box box-info box-solid">  
                            <div class="box-header with-border">  
                                <i class="fa fa-envelope"></i>  

                                <h3 class="box-title">メール送信</h3>  
                                <!-- tools box -->  
                                <div class="pull-right box-tools">  
                                <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"  
                                        title="Remove">  
                                    <i class="fa fa-times"></i></button>  
                                </div>  
                                <!-- /. tools -->  
                            </div>  
                            <div class="box-body">  
                                <div class="form-group">  
                                    <input type="email" class="form-control" id="email_to" name="email_to" placeholder="送信先:">  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control" id="email_cc" name="email_cc" placeholder="CC:">  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control" id="email_bcc" name="emailb_cc" placeholder="BCC:">  
                                </div>  
                                <div class="form-group">  
                                    <input type="text" class="form-control" id="subject" name="subject" placeholder="件名">  
                                </div>  
                                <div>  
                                    <textarea id="message" class="message" placeholder="メッセージ"></textarea>  
                                </div>  
                            </div>  
                            <div class="box-footer clearfix">  
                                <button type="button" class="pull-right btn btn-default" id="sendEmail">送信  
                                <i class="fa fa-arrow-circle-right"></i></button>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </section>  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>  
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
    <script src="{{ static_url('js/bootstrap3-wysihtml5.all.min.js') }}"></script>  
    <script src="{{ static_url('js/adminlte.min.js') }}"></script>  
    <script src="{{ static_url('js/script.js') }}"></script>  
    <script>  
        $(document).ready( function () {  
            initialize();  
        } );  
    </script>  
</body>  
</html>

スタイルの変更


/static/css/style.css

少しだけ本文入力欄の高さと幅を調整しました。

.form-control {  
    ime-mode: active;  
}  

.message {  
    width: 100%;  
    height: 225px;  
    font-size: 14px;  
    line-height: 18px;  
    border: 1px solid #dddddd;  
    padding: 10px;  
}

サーバーサイド


Main.py

色々と方法はありますが、今回はヘッダーを追加するだけとしました。

# 追記部分が分かるように一部省略  

class SendMailHandler(RequestHandler):  

    def post(self):  

        # HTMLメール用にヘッダーを追加  
        msg_obj.add_header('Content-Type', 'text/html')  

    }

全体

# --- coding: utf-8 ---  
"""  
メールサンプル  
"""  
import os  
import logging  
import json  

import tornado.web  
import tornado.ioloop  
import tornado.websocket  
from tornado.web import RequestHandler  
from tornado.options import options  

import smtplib  
from email.mime.text import MIMEText  
from email.utils import formatdate  

FROM_ADDR = "[email protected]"  
PASSWORD = "sorariku0120"  

class MainHandler(RequestHandler):  
    """  
    初期表示処理  
    """  

    def initialize(self):  
        logging.info("[MainHandler] initialize")  

    def get(self):  
        logging.info("[MainHandler] get")  
        self.render("Main.html", from_addr=FROM_ADDR, password=PASSWORD)  


class SendMailHandler(RequestHandler):  
    """  
    メール送信処理  
    """  

    def initialize(self):  
        logging.info("SendMailHandler [initialize]")  

    def post(self):  
        param = json.loads(self.request.body)  

        # メール情報を設定  
        msg_obj = MIMEText(param["message"])  
        msg_obj["Subject"] = param["subject"]  
        msg_obj["From"] = FROM_ADDR  
        msg_obj["To"] = param["email_to"]  
        msg_obj["Cc"] = param["email_cc"]  
        msg_obj["Bcc"] = param["email_bcc"]  
        msg_obj["Date"] = formatdate()  

        # HTMLメール用にヘッダーを追加  
        msg_obj.add_header('Content-Type', 'text/html')  

        # 送信先のリスト  
        to_list = param["email_to"].split(",")  
        cc_list = param["email_cc"].split(",")  
        bcc_list = param["email_bcc"].split(",")  

        # SMTPの設定  
        smtp_obj = smtplib.SMTP("smtp.gmail.com", 587)  
        smtp_obj.ehlo()  
        smtp_obj.starttls()  
        smtp_obj.login(FROM_ADDR, PASSWORD)  
        smtp_obj.sendmail(FROM_ADDR, to_list+cc_list+bcc_list, msg_obj.as_string())  
        smtp_obj.close()  

        data = {  
            "result": "Success"  
        }  

        self.write(json.dumps(data, ensure_ascii=False))  


application = tornado.web.Application([  
    (r"/", MainHandler),  
    (r"/sendMail", SendMailHandler),  
],  
    template_path=os.path.join(os.getcwd(),  "templates"),  
    static_path=os.path.join(os.getcwd(),  "static"),  
)  

if __name__ == "__main__":  
    tornado.options.parse_command_line()  
    application.listen(8888)  
    logging.info("server started")  
    tornado.ioloop.IOLoop.instance().start()

起動してみる


画面には wysiwyg エディタが表示されるようになりました。

このままメールを送信すれば、受信側でHTMLとして判別されるようになります。

まとめ


ものすごい簡単に wysiwyg が導入できたことに驚きました。

HTMLメールに関しても大したことはしていないのですが、
あとは普通のメーラーのようにオプションにて本文をHTMLとして扱うかどうかを選択できるようにすればよさそうですね。

次回の予定は今のところ未定ですが、
また何かやってみたいことがあったら試してみようと思います。

ではでは。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!