FlaskでQRコード生成アプリを作ろう！

IT・プログラミング

今回は初心者向けに簡単なメモアプリを作成していきます。
GoogleColabを使うので、だれでも簡単に実行できます！

QRコード生成完成

アプリのメイン部分

まずはメイン部分のapp.pyの中身を作っていきます。
最後にコードをまとめて実行もできるようにGoogleColabのリンクを記載しています。

app.pyは以下のように記入します。

from flask import Flask, render_template, request, send_file
import qrcode

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate_qr_code', methods=['POST'])
def generate_qr_code():
    data = request.form.get('data')

    if data:
        qr = qrcode.QRCode(
            version=1,
            error_correction=qrcode.constants.ERROR_CORRECT_L,
            box_size=10,
            border=4,
        )
        qr.add_data(data)
        qr.make(fit=True)
        img = qr.make_image(fill_color="black", back_color="white")

        img.save('/content/qrcode_app/static/qr_code.png')

        return render_template('index.html', qr_code=True)
    else:
        return "QRコードを生成するためのデータを入力してください。"
@app.route('/download_qr_code')
def download_qr_code():
    try:
        # 保存されたQRコード画像のファイルパス
        qr_code_path = '/content/qrcode_app/static/qr_code.png'

        # ダウンロードファイル名を設定
        download_filename = 'qr_code.png'

        return send_file(
            qr_code_path,
            as_attachment=True,
            download_name=download_filename
        )
    except Exception as e:
        return str(e)

if __name__ == "__main__":
    import sys
    args = sys.argv
    app.run(debug=True, port=args[1])

また、対応するHTMLとしてtemplates/index.htmlに以下のように記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRコード生成アプリ</title>
</head>
<body>
    <h1>QRコード生成アプリ</h1>
    <form method="POST" action="/generate_qr_code">
        <label for="data">QRコードに変換するデータ:</label>
        <input type="text" name="data" id="data" required>
        <button type="submit">QRコードを生成</button>
    </form>
    <br>
    {% if qr_code %}
    <h2>生成されたQRコード:</h2>
    <!-- qr_code変数をbase64エンコードした画像を表示 -->
    <img src="{{ url_for('static', filename='qr_code.png') }}" alt="QRコード">
    <br>
    <!-- QRコードをダウンロードするリンク -->
    <a href="/download_qr_code">ダウンロード</a>
    {% endif %}
</body>
</html>

コードの解説

このコードは、Flaskを使用してQRコードを生成し、それをダウンロードできるシンプルなWebアプリケーションを作成するものです。以下に、コードの主要な部分を説明します。

ライブラリのインポート:

from flask import Flask, render_template, request, send_file
import qrcode
  • FlaskはWebアプリケーションのフレームワークです。
  • render_templateはHTMLテンプレートをレンダリングするために使用されます。
  • requestはHTTPリクエストデータを取得するために使用されます。
  • send_fileはファイルをダウンロードするために使用されます。
  • qrcodeはQRコードを生成するためのライブラリです。

Flaskアプリケーションの設定:

app = Flask(__name__)
  • Flaskアプリケーションを作成します。

ルートURL(‘/’)の処理:

@app.route('/')
def index():
    return render_template('index.html')
  • ルートURLにアクセスしたときに、’index.html’テンプレートを表示します。

QRコードを生成するルート(‘/generate_qr_code’)の処理:

@app.route('/generate_qr_code', methods=['POST'])
def generate_qr_code():
    data = request.form.get('data')

    if data:
        # QRコードを生成する処理
        # ...
        return render_template('index.html', qr_code=True)
    else:
        return "QRコードを生成するためのデータを入力してください。"
  • POSTメソッドで’/generate_qr_code’にアクセスしたとき、フォームからデータを取得します。
  • データが提供された場合、QRコードを生成し、それを ‘qr_code.png’ として保存します。その後、’index.html’テンプレートを表示してQRコードを表示します。
  • データが提供されない場合、エラーメッセージを表示します。

QRコードをダウンロードするルート(‘/download_qr_code’)の処理:

   @app.route('/download_qr_code')
   def download_qr_code():
       try:
           # 保存されたQRコード画像のファイルパス
           qr_code_path = '/content/qrcode_app/static/qr_code.png'

           # ダウンロードファイル名を設定
           download_filename = 'qr_code.png'

           return send_file(
               qr_code_path,
               as_attachment=True,
               download_name=download_filename
           )
       except Exception as e:
           return str(e)
  • ‘/download_qr_code’にアクセスしたとき、QRコード画像をダウンロード可能な形式で送信します。

HTMLの詳細

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRコード生成アプリ</title>
</head>
<body>
  • この部分はHTML文書の基本的な設定を行っています。
  • <!DOCTYPE html>: HTMLドキュメントの種類を指定します。
  • <html lang="en">: HTML文書の言語を設定します。
  • <head>セクション: ページのメタデータを含むセクションです。
    • <meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定します。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: レスポンシブデザインをサポートし、画面幅に合わせてスケーリングするためのビューポート設定を行います。
    • <title>QRコード生成アプリ</title>: ページのタイトルを設定します。
    <h1>QRコード生成アプリ</h1>
    <form method="POST" action="/generate_qr_code">
        <label for="data">QRコードに変換するデータ:</label>
        <input type="text" name="data" id="data" required>
        <button type="submit">QRコードを生成</button>
    </form>
    <br>
  • この部分はアプリケーションのユーザーインターフェースを定義しています。
  • <h1>QRコード生成アプリ</h1>: ページの大見出しを表示します。
  • <form>要素: データ入力フォームを表示します。
    • method="POST": フォームの送信方法をPOSTに設定します。
    • action="/generate_qr_code": フォームデータが送信されるURLを指定します。
    • <label>要素: フォームフィールドのラベルを表示します。
    • <input>要素: ユーザーからのテキスト入力を受け付けます。name属性はデータの識別子です。required属性は必須フィールドであることを示します。
    • <button>要素: フォームの送信をトリガーするボタンを表示します。
    {% if qr_code %}
    <h2>生成されたQRコード:</h2>
    <!-- qr_code変数をbase64エンコードした画像を表示 -->
    <img src="{{ url_for('static', filename='qr_code.png') }}" alt="QRコード">
    <br>
    <!-- QRコードをダウンロードするリンク -->
    <a href="/download_qr_code">ダウンロード</a>
    {% endif %}
</body>
</html>
  • この部分はQRコードの表示とダウンロード用の要素を制御します。
  • {% if qr_code %}: 条件文で、qr_code変数が存在する場合に以下の要素を表示します。
  • <h2>生成されたQRコード:</h2>: 生成されたQRコードのセクションの見出しを表示します。
  • <img>要素: QRコード画像を表示します。src属性はQRコード画像のファイルパスを指定します。
  • <a>要素: QRコードをダウンロードするためのリンクを提供します。href属性はダウンロードURLを指定します。

このHTMLテンプレートは、QRコード生成アプリのユーザーインターフェースを定義し、ユーザーがデータを入力し、QRコードを生成して表示またはダウンロードできるようにします。

タイトルとURLをコピーしました