Flask（Part.65）｜【QRコードアプリケーションのカスタマイズ（２）】｜プログラミング学習おすすめ書籍情報発信パソコン初心者エンジニア希望者新人エンジニア IT業界への就職・転職希望者サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site

python｜まとめ　| 現役エンジニア&プログラミングスクール講師「python」のまとめページです。pythonに関して抑えておきたい知識や文法やにについて記事をまとめています。まとめページの下部には「おすすめの学習書籍」「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中...

目標
QRコードアプリケーションのカスタマイズ
ブックマークのすすめ

目標

QRコードの印刷ボタンを追加する
QRコード生成のページから管理業務一覧へ戻るボタンを追加する

QRコードアプリケーションのカスタマイズ

ここでは、前回同様「feature-qrcode-securityブランチ」で作業を行います。

QRコードの印刷ボタンを追加する

QRコードを印刷するためのボタンと管理業務一覧へ戻るボタンを設置します。QRコード印刷用のボタンはJavaScriptで実装します。

apps/qrcodeapp/tempates/qrcode_generate.html

apps/qrcodeapp/tempates/qrcode_generate.htmlファイルを次のように編集します。

{% extends "qrcode_base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block header %}
<ul>
    <li><a href="{{ url_for('common.admin_dashboard') }}" class="button-link">管理業務一覧</a></li>
</ul>
{% endblock %}

{% block content %}
<div class="qr-container">
    <h1 class="qr-title">QRコードを作成</h1>

    <form method="POST" class="qr-form">
        <label for="table_id">テーブル番号:</label>
        <select name="table_id" required>
            {% for table in table_options %}
            <option value="{{ table.id }}" {% if not table.selectable %}style="color: gray;" {% endif %}>
                テーブル {{ table.id }}{% if not table.selectable %}（利用中）{% endif %}
            </option>
            {% endfor %}
        </select>
        <button type="submit">QRコード生成／生成済みQRコードの再表示</button>
    </form>
</div>
<div class="qr-container">
    {% if qr_image_url %}
    <div id="qr-print-area" class="qr-display">
        <h2>QRコード（テーブル {{ selected_table_id }}）</h2>
        <img src="{{ url_for('qrcode.static', filename='qrcodes/table_' ~ selected_table_id ~ '.png') }}" alt="QRコード">
    </div>
    <!-- 印刷ボタン -->
    <div class="printout">
        <button onclick="printQRCode()">QRコードを印刷</button>
    </div>
    {% endif %}
</div>

<!-- 印刷用JavaScript -->
<script>
    function printQRCode() {
        const printContent = document.getElementById("qr-print-area").innerHTML;
        const win = window.open("", "", "width=600,height=400");
        win.document.write(`
        <html>
        <head>
            <title>QRコード印刷</title>
            <style>
                body { font-family: sans-serif; text-align: center; padding: 20px; }
                img { max-width: 100%; height: auto; }
            </style>
        </head>
        <body>
            ${printContent}
            <script>
                window.onload = function() {
                    window.print();
                    window.onafterprint = window.close;
                };
            <\/script>
        </body>
        </html>
    `);
        win.document.close();
    }
</script>
{% endblock %}