BETA

【Python】スマホで読み込むと Wi-Fi に繋げられるQRコードを生成してみる

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

最近、自宅の Wi-Fi が時間帯によって全然速度が出ない状況が続いていて
これはもしかしたら連日の猛暑で古い無線ルーターがやられてしまってるのかもしれないと思い、
丁度 Amazon Prime Day もあったことなので無線LANルーターを新調しました。

(ホントはプロバイダを疑っていることは内緒)
(どちらにしても使っていた無線LANルーターはだいぶ古かったので買っちゃった)

いつも思うのですが、新しいアクセスポイントなんかに接続する際にパスワードの入力なんかが結構面倒なんですよね。

ということで、Pythonの勉強ついてでに設定用のQRコードを生成できるプログラムを書いてみました。
(といってもほとんどライブラリがやってくれるのですが)

新規プロジェクトの作成


新たにサンプル用プロジェクトを作成します。

PyCharmを起動し、上部メニューの「File」>「New Project」を選択し、
ウィザードに沿ってプロジェクトを新規作成します。

フォルダ構成は次の通りとします。

QRSample  
│ Main.py  
├─static  
│    ├─css  
│        └ main.css  
└─templates

Main.html

パッケージのインストール


Tornado、QRコード生成、画像生成用のライブラリをインストールします。

「File」>「Default Settings…」メニューを選択します。

プロジェクトを選択し、右側にある「+」ボタンをクリックします。

検索欄に「qrcode」と入力、表示されたパッケージを選択し、「Install Package」ボタンをクリックします。

先ほどと同様、「Pillow」パッケージをインストールします。

スクショはありませんが、「Tornado」パッケージのインストールも実施してください。

以上で事前準備は完了です。

画面の作成


前回作成したログイン画面をちょちょいと弄って簡単な画面を作成しました。

画面


Main.html
<DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>QRコード生成</title>  
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
        <link rel="stylesheet" href="{{ static_url('css/main.css') }}"/>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
        <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
        <script type="text/javascript">  
            function submitLogin() {  
                $("#form").submit();  
            }  
        </script>  
    </head>  
    <body>  
        <form id="form" method="post" action="/">  
            <div class="jumbotron">  
                <div class="container">  
                    <h2>[ Wi-Fi 用] QRコード生成</h2>  
                    {% if qr_path == '' %}  
                        <div class="qr-area">SSIDとパスフレーズを入力して<BR>ボタンを押してください。</div>  
                    {% else %}  
                        <div class="qr-area">  
                            <img src="{{ static_url('dest/qrcode.png') }}">  
                        </div>  
                    {% end %}  

                    <div class="box">  
                        <input id="inputSsId" name="ss_id" type="text" placeholder="SSID">  
                        <input id="inputPass" name="password" type="password" placeholder="パスフレーズ">  
                        <button class="btn btn-default full-width" onclick="submitLogin()">  
                            <span class="glyphicon glyphicon-ok"></span>  
                        </button>  
                        {% if qr_path != '' %}  
                        {% end %}  
                    </div>  
                </div>  
            </div>  
        </form>  
    </body>  
</html>

ところどころ Tornado のテンプレートエンジンを使っています。

スタイル


main.css
body {  
    background: #98d3e4 none repeat scroll 0 0;  
}  

.jumbotron {  
    text-align: center;  
    width: 45rem;  
    border-radius: 0.5rem;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    position: absolute;  
    margin: 4rem auto;  
    background-color: #fff;  
    padding: 2rem;  
    height:60rem;  
}  

.container .qr-area {  
    height: 30rem;  
    width: 45rem;  
    border: 1px solid gray;  
    vertical-align: middle;  
    display: table-cell;  
}  
.container .qr-area img {  
    width: 50%;  
}  

input {  
    width: 100%;  
    margin-bottom: 1.4rem;  
    padding: 1rem;  
    background-color: #ecf2f4;  
    border-radius: 0.2rem;  
    border: none;  
}  
h2 {  
    margin-bottom: 3rem;  
    font-weight: bold;  
    color: #ababab;  
}  
.btn {  
    border-radius: 0.2rem;  
}  
.btn .glyphicon {  
    font-size: 3rem;  
    color: #fff;  
}  
.full-width {  
    background-color: #8eb5e2;  
    width: 100%;  
    -webkit-border-top-right-radius: 0;  
    -webkit-border-bottom-right-radius: 0;  
    -moz-border-radius-topright: 0;  
    -moz-border-radius-bottomright: 0;  
    border-top-right-radius: 0;  
    border-bottom-right-radius: 0;  
}  

.box {  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    margin-bottom: 3rem;  
    margin-left: 3rem;  
    margin-right: 3rem;  
}

プログラム


Main.py
import json  
import logging  
import os  
import tornado.ioloop  
import qrcode  

from tornado.web import RequestHandler  
from tornado.options import options  



class MainHandler(RequestHandler):  
    """  
    メイン処理  
    """  

    def get(self):  
        """  
        画面表示  
        :return:  
        """  

        logging.info("MainHandler [get]")  

        self.render("Main.html", qr_path="")  

    def post(self):  
        """  
        QRコード生成処理  
        :return:  
        """  
        logging.info("MainHandler [post]")  

        # 画面から送信されたパラメータの取得  
        ss_id = self.get_argument("ss_id")  
        password = self.get_argument("password")  

        # QRコード生成  
        qr = qrcode.QRCode()  
        qr.add_data('WIFI:S:{};T:WPA;P:{};;'.format(ss_id, password))  
        qr.make()  
        img = qr.make_image()  

        # サーバー上に保存  
        img.save('static/dest/qrcode.png')  

        self.render("Main.html", qr_path="dest/qrcode.png")  

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

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

起動してみる


プログラムを起動し、次のURLにアクセスします。
http://localhost:8080/

無事にQRコードが生成できました。

まとめ


ひとまず簡単に作ってみました。
色々とオプションもあるので、もう少し弄っていきたいと思います。

ではでは。

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

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

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

よく一緒に読まれる記事

0件のコメント

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