Flask と Electron で作るデスクトップアプリ ②「デザイン編」 #Python

はじめに

Flask と Electron で作るデスクトップアプリ第2章です。

前回の導入編を見てない人はこちらから
Flask と Electron で作るデスクトップアプリ ①「導入編」

さて、本題に入りまして、今回導入するのがデザインを簡易的にそれっぽくデザインを見せるため、Bootstrap5のサンプルを使っていきます。
Bootstrapの使い方なんて分からねーよって人は他の人の紹介している記事かその内、使い方も説明しようかと思います。
公式ドキュメントを見る練習として自分で考えるのもありです。

Bootstrap5

ここではBootstrapとは何ぞやという説明は省きます。何を使っているかだけ説明します。
今回はBootstrap5 の公式サイトにあるドキュメントからサンプルのソースコード一部を参照してデザインとして使っています。
もともと用意されているサンプルページもありますが、ドキュメントのサンプルから少しずつ組み立てることで構成を理解しやすいと思うので興味がある人は用意されているものではなく一部抜粋のみで構成していきます。

デザイン

メニューをデフォルトから自作へ

「setMenuBarVisibility」を js に追加することで上にあるメニューを非表示にします。

index.js

app.on('ready', function() {
  PythonShell.run('./app.py');
  const openWindow = function() {
    mainWindow = new BrowserWindow({width: 800, height: 600 });
    mainWindow.setMenuBarVisibility(false); // 追加
    mainWindow.loadURL('http://localhost:5000');
  };
  openWindow();
});

Bootstrap の公式のNavbarから以下のサンプルコードをbodyタグの下に挿入します。

index.html

    <div class="collapse" id="navbarToggleExternalContent">
      <div class="bg-dark p-4">
        <h5 class="text-white h4">Collapsed content</h5>
        <span class="text-muted">Toggleable via the navbar brand.</span>
      </div>
    </div>
    <nav class="navbar navbar-dark bg-dark">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

結果はドーン

左上を押すことで下記のようになります。
iタグを入れれば遷移できるようにもなります。

全画面表示

こちらはElectronの設定のみです。
kioskモード、全画面表示、フレームOFFの設定を追加。

index.js

app.on('ready', function() {
  PythonShell.run('./app.py');
  const openWindow = function() {
    mainWindow = new BrowserWindow({width: 800, height: 600, kiosk: true, 'fullscreen': true, 'frame': false}); // 更新
    mainWindow.setMenuBarVisibility(false);
    mainWindow.loadURL('http://localhost:5000');
  };
  openWindow();
});

おまけ
常に最前線に表示

index.js

mainWindow.setAlwaysOnTop(true, "screen-saver")

ワークスペース（デスクトップ）を移動しても表示

index.js

mainWindow.setVisibleOnAllWorkspaces(true)

メインの画面から遷移

flask を記載している app.py にルートを追加します。
後はその遷移先を指定してあげればよし。

app.py (追記)

@app.route("/dashbord", methods=("GET", "POST"))
def dashboard():
    return render_template("dashboard.html")

index.html (追記)

   <div class="collapse" id="navbarToggleExternalContent">
      <div class="bg-dark p-4">
        <h5 class="text-white h4">Collapsed content</h5>
        <span class="text-muted">Toggleable via the navbar brand.</span>
        <div><a href="/"  class="btn btn-outline-danger">Home</a></div> // 追加
        <div><a href="/dashboard" class="btn btn-outline-danger">dashboard</a></div> // 追加
      </div>
    </div>

ボタンを用意したので「dashboard」ボタンを押下すると次の画像へ
この通りPage2に遷移しました。このようにして複数の画面を使って遷移していきましょう。

ダークモード

Electronの公式からダークモードのサンプルです。
構成を割と変えてしまったので、Githubに起動できるソースコードを載せているのでそちらを参考にしてください。
ちなみに実行したらこんな感じです。

デフォルト
ダークモード

まとめ

Bootstrap5 と言いつつ Electron の機能使いまくりでした。。
ちょろっと公式ドキュメントから引っ張てくるだけでもこれくらいの機能はあるので、他の機能も興味がある人は調べてみてください！！
どちらの特性も使えることもある意味でいい点ではあると思います。
なぜ、ElectronやFlaskだけの構成だけにせず、ElectronとFlaskの構成にしているのか説明をしていなかったので、説明すると長いので今回は省きますが次回がその次くらいに説明します。
次回はElectronとFlask構成で実際に何か作ってみようかと思います。お楽しみください！！