ブラウザから Python を操作する

2021-11-28

Uncategorized

1k words

誤解されないようにもう少し付け加えると、Python 操作のGUI部分をブラウザでやるって感じですかね。

こっちもよく分からない説明かもしれませんが、Python はコマンドで動くスクリプト言語なので、あのとっつきにくい真っ黒画面に文字が流れるのが主流となっています。

プログラム初心者にはちょっと取っ付きにくいと思います。

Python にもGUIで操作できるようにする事ができるんですが、見た目がダサいんですよね。Windows95かよってぐらいに。

今の時代なら、GUIにもグラデーションやアニメーションが付いてるのが一般的なので、古臭いGUIは好かれません。

簡単に美しいGUIを実装するならブラウザを頼るのが一番です。HTMLとCSSで簡単に美麗なGUIを作って、Pythonを操作してやれば気分は上々。

はじめに

前置きが長くなってしまいました。

PythonのGUIといえば、代表的なのが「Tkinter」だと思います。ですが見た目がダサいです。25年以上前のGUIなんて、いくら機能がよくても使いたいとは思いません。

なので今回は「Eel」を使ってキレイなGUIをブラウザで作ってPythonを操作しようと思います。

環境

Windows 10 Home 21H1
Python 3.8.10
Eel 0.14.0

手順

今回作るのは、実行フォルダ内のファイルを一覧表示するものです。

見た目はブラウザですが、裏でPythonが動いています。ボタンを押すと、実行フォルダ内のファイル一覧を取得して画面に表示するプログラムです。

Python側

まずPythonの処理から書いていきます。

事前に Eel をインストールして使えるようにしておきます。

1	pip install eel

main_script.py

import os
import eel

def main():

    eel.init('web')
    eel.start('index.html', port=0, size=(800, 600))

    pass

@eel.expose
def run_python():

    files = os.listdir()
    print(files)
    eel.sleep(3)
    return files

if __name__ == '__main__':
    try:
        main()
    except Exception:
        pass

GUI側

GUI側はブラウザを使うのでHTMLを作成します。

webフォルダを作って下記コードをコピペします。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Document</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

    <div class="row">
        <a class="waves-effect waves-light btn" id="runpython">Python実行</a>
        <ul class="collection" id="collection"></ul>
    </div>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">
    </div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
    <script type="text/javascript" src="/eel.js"></script>
</body>

</html>

index.js

$(document).ready(function () {
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('.modal').modal({ dismissible: false });
});

document.querySelector("#runpython").addEventListener('click', async () => {
    $("#modal1").modal('open');
    let files = await eel.run_python()();
    $("#modal1").modal('close');
    console.log(files);

    files.forEach(element => {
        let li = document.createElement('li');
        li.innerHTML = element;
        li.classList.add("collection-item");
        document.querySelector("#collection").appendChild(li);
    });
});

確認

これで完成です。

フォルダ構成はこんな感じになると思います。

実行するとブラウザが開き、ボタンを押すとPythonの関数が実行されて結果が画面に表示されます。

exe化

exe化して、簡単に配布することもできます。

下記コマンドで「PyInstaller」をインストールします。

1	pip install PyInstaller

下記コマンドでPythonをexe化します。

1	python -m eel main_script.py web --onefile --noconsole

アイコンを変えたりするとなおいい感じに仕上がるでしょう。

1	python -m eel main_script.py web --onefile --noconsole --icon=Icojam-Animals-01-horse.ico

実行するとコンソールも出ないでブラウザが起動するだけなので、PCが苦手な人にも安心して頂けると思います。

おわりに

今回のプログラムを GitHub に上げておきます。

お試ししたい方はダウンロードしてみて下さい。

exe化したファイルはこちら

広告

Archives

Tags