ブラウザGUIを作ってみた - ゆるエンジニアはいろいろ遊びたい

スマホからブラウザでラズパイを動かせるようになったのですが、ページを表示したらプログラムが動作するような代物だったので、あまりアプリ感がありませんでした。
ブラウザでGUIを作ってみて、少しアプリ感がでるようにしてみました。
ファイル構成は以下の通り

project/
 ├ server.py
 └ templates/
     └ index.html

まずはpythonのコードから(server.py)

from flask import Flask, render_template, redirect, url_for
import subprocess

app = Flask(__name__)

def get_service_status():
    result = subprocess.run(
        ["systemctl", "is-active", "wakeup_app.service"],
        capture_output=True,
        text=True
    )
    return result.stdout.strip()

@app.route("/")
def index():
    status = get_service_status()
    return render_template("index.html", status=status)

@app.route("/start", methods=["POST"])
def start_service():
    subprocess.run(
        ["sudo", "systemctl", "start", "wakeup_app.service"],
        check=False
    )
    return redirect(url_for("index"))

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

続いてindex.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Wakeup Control</title>

    <!-- スマホ最重要 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            margin: 0;
            min-height: 100vh;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            background: white;
            padding: 28px 24px;
            border-radius: 16px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
            text-align: center;

            /* スマホ向け */
            width: 100%;
            max-width: 360px;
            margin: 16px;
        }

        h1 {
            margin: 0;
            font-size: 24px;
        }

        .status {
            margin: 24px 0;
            font-size: 18px;
        }

        .running {
            color: #2e7d32;
            font-weight: 600;
        }

        .stopped {
            color: #666;
            font-weight: 600;
        }

        button {
            width: 100%;
            padding: 18px;
            font-size: 18px;
            border: none;
            border-radius: 12px;
            background: #4CAF50;
            color: white;
            cursor: pointer;

            /* タップしやすく */
            touch-action: manipulation;
        }

        button:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>

<div class="card">
    <h1>Wakeup Service</h1>

    <div class="status">
        状態：
        {% if status == "active" %}
            <span class="running">● 動作中</span>
        {% else %}
            <span class="stopped">○ 停止中</span>
        {% endif %}
    </div>

    <form action="/start" method="post">
        <button type="submit">起動</button>
    </form>
</div>

</body>
</html>

サービスserver.serviceは前回作ったままでOKですが、リスタートした方がよかったです。
ブラウザで「http://ラズパイのIP:5000」でページを開くと、いい感じのボタンが表示されます。

ボタンを押すと「動作中」と表示されwakeup_app.serviceというサービスが動きます。
これは前回作ったウェイクアップアプリをサービス化したものです。
サービスファイルは通常はenableですが、disableでも他のサービスから呼ばれれば動作するみたいです。
再起動時に動作しなくても良い場合はdisableにしておいても良いですね。

正直、もうここまで来ると１つの記事だけでは解説しきれなくて大変ですが、このブログは私の備忘録なのでご了承ください。
HTMLも全くかじったことがないため意味不明です。今後勉強していかねば。
どんどんいろんな事ができるのも、生成AIのおかげです。いつもありがとう。