【Python】スマホで読み込むと Wi-Fi に繋げられるQRコードを生成してみる
おはようございます。
最近、自宅の Wi-Fi が時間帯によって全然速度が出ない状況が続いていて
これはもしかしたら連日の猛暑で古い無線ルーターがやられてしまってるのかもしれないと思い、
丁度 Amazon Prime Day もあったことなので無線LANルーターを新調しました。
（ホントはプロバイダを疑っていることは内緒）
（どちらにしても使っていた無線LANルーターはだいぶ古かったので買っちゃった）
いつも思うのですが、
新しいアクセスポイントなんかに接続する際にパスワードの入力なんかが結構面倒なんですよね。
ということで、Pythonの勉強ついてでに設定用のQRコードを生成できるプログラムを書いてみました。（といってもほとんどライブラリがやってくれるのですが）
スポンサーリンク
新規プロジェクトの作成
新たにサンプル用プロジェクトを作成します。
PyCharmを起動し、上部メニューの「File」＞「New Project」を選択し、
ウィザードに沿ってプロジェクトを新規作成します。
フォルダ構成は次の通りとします。
QRSample
│ Main.py
│
├─static
│ ├─css
│ │ main.css
│ │
│ └─dest
│
└─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">
<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()
起動してみる
プログラムを起動し、「http://localhost:8080/」にアクセスします。
無事にQRコードが生成できました。
まとめ
ひとまず簡単に作ってみました。
色々とオプションもあるので、次回以降、もう少し弄っていきたいと思います。
ではでは。