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

2018年7月21日2020年10月11日Python,開発

おはようございます。

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

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

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

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

1. 新規プロジェクトの作成
2. パッケージのインストール
3. 画面の作成
- 3.1. 画面
- 3.2. スタイル
4. プログラム
5. 起動してみる
6. まとめ

新規プロジェクトの作成

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

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" onclick="submitLogin()">
							<span class="glyphicon glyphicon-ok"></span>
						</button>
                        {% if qr_path != '' %}
                        {% end %}
					</div>
				</div>
			</div>
		</form>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>QRコード生成</title>

functionsubmitLogin(){

$("#form").submit();

}

</script>

</head>

<body>

<h2>[ Wi-Fi 用] QRコード生成</h2>

{% if qr_path == '' %}

<div class="qr-area">SSIDとパスフレーズを入力して<BR>ボタンを押してください。</div>

{% else %}

</div>

{% end %}

</button>

{% if qr_path != '' %}

{% end %}

</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;
}

body {

background:#98d3e4nonerepeatscroll00;

}

.jumbotron {

text-align:center;

width:45rem;

border-radius:0.5rem;

top:0;

bottom:0;

left:0;

right:0;

position:absolute;

margin:4remauto;

background-color:#fff;

padding:2rem;

height:60rem;

}

.container .qr-area {

height:30rem;

width:45rem;

border:1pxsolidgray;

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()

importjson

importlogging

importos

importtornado.ioloop

importqrcode

fromtornado.web importRequestHandler

fromtornado.options importoptions

classMainHandler(RequestHandler):

"""

メイン処理

"""

defget(self):

"""

画面表示

:return:

"""

logging.info("MainHandler [get]")

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

defpost(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コードが生成できました。

まとめ

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

ではでは。

2018年7月21日2020年10月11日Python,開発Pillow,Python,qrcode,QRコード生成,Tornado,プログラミング

Posted by doradora