PythonでEelを使ってUbuntuのGUIを開発する方法

Python3でEelを使うことでUbuntuのGUIアプリケーションを作成することができる。
画面デザインはHTML＋jQuery+BootStrapにする。アイコンはFontAwesomeを使う。

普通のサンプル通りにEelを起動させると、Blockingになる。画面側のJavaScriptからPython側のメソッドを呼び出すことはできるが、Python側で別スレッドを起動させることができる方法を見つける必要がある。

main.py

def gui_init():
  eel.init("web")
  eel.start("index.html", port=8080)

if __name__ == '__main__':
  gui_process = Process(target=gui_init)
  gui_process.start()

最終的にGUI側を別プロセスで起動させることでmain側のスレッドでGUIを気にすることなく実装することができるということが分かった。

Koichi Iida

Eelでの全画面表示については、UbuntuにインストールされているのがChromiumなので、若干Windows版Chromeと挙動が違うようだ。最終的には次のようにeel.start()へ引数を渡すことでうまく動作しているように見える。

eel.start("index.html", port=8080, cmdline_args=['--kiosk', '--disable-gpu'])

キオスクモードで動作するようになる。Ubuntuの画面上部のステータスバー等も隠れる。そのためアプリ終了時には画面側に終了ボタンなどの操作系が必要となる。
JavaScript側で、window.close();を実行し、Python側ではそのタイミングをトリガーにメインスレッドを終了させる必要がある。

Koichi Iida

Eelのフォルダ構造は公式HPを見ると以下のようになっている。

web <-- Webコンテンツのルートディレクトリ
└css <-- cssファイルのディレクトリ
└js <-- JavaScriptファイルのディレクトリ
└index.html <-- メイン画面のHTML

ここで、jQuery等のパッケージをインストールするとnode_modulesディレクトリが作成されるが、そのまま実行すると、起動中の処理時間が長く、画面が表示されるまでかなり待たされることになる。
理由は追加でインストールしたパッケージが入っているnode_modulesディレクトリ中の全てのjsファイルをロードしているためと思われる。
なので、node_modulesディレクトリ一式を移動させて起動時間を短くする。移動先は（Ubuntu自体にApacheをインストールし）Apacheのコンテンツを配置する先とし、index.htmlからは以下のように記述し参照する。

<head>
  <link href="http://localhost/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
・・・
<body>
  <script src="http://localhost/node_modules/jquery/jquery.min.js"></script>
  <script src="http://localhost/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- もちろん自分で実装したjsファイルを参照するために、以下のようにも記述可能 -->
  <script src="js/main.js"></script>
</body>

これでアプリ実行時点から画面が表示されるまでかなり早くなった。