Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

bottle×Electronで簡単!PythonのGUIアプリ開発

More than 1 year has passed since last update.

はじめに

PythonでGUIアプリを作ろうとすると、PyQtやkivyなどがあるわけですが……

ちょっと微妙……⊂⌒~⊃。Д。)⊃

と思ったそこのあなた!

bottle(Webフレームワーク)とElectronを使えば
簡単にマルチプラットフォームなGUIアプリの開発ができちゃうんですよ……!!

対象

  • pythonをそこそこ使える人
  • node.jsもちょこっと使える人

環境

  • Windows 10 64bit
  • python 3.6x
  • node.js 8.9

では始めましょう

Webアプリを作りましょう!

bottleの良いところは、Webアプリ初心者でも比較的低コストでモノを作れるようになるところ。
まだの方はbottleをインストールしましょう

pip install bottle

main.pyを作成し、main.pyに次のように書きこみましょう。
このmain.pyがGUIアプリの根幹となる部分です。

main.py
from bottle import route, run


@route("/")
def index():
    return "<h1>Hello world</h1><p> I'm at index</p><a href='/sample'>移動する</a>"


@route("/sample")
def sample():
    return "<h1>Hello world</h1><p> I'm at sample</p><a href='/'>移動する</a>"


run(host='localhost', port=8080, debug=True, reloader=True)

保存したらpython main.pyと起動して、ブラウザでhttp://localhost:8080にアクセスすると以下のようになることを確認。

無題.png

今回は、この簡単なWebアプリ(笑)をGUIアプリ化してみましょう!

Electronのインストール

PowerShell上で以下を実行しましょう

WindowsPowerShell
mkdir BottleApp # 作業用フォルダ
cd BottleApp
npm init -y
npm install -g electron # electronをインストール
npm install request, request-promise
ni index.js # touch index.js

そして、先ほど作ったmain.pyもBottleAppにコピーしてきましょう

この時点でのフォルダ構成は以下の通り(のはず)
BottleApp/
 ├ node_modules/
 ├ package.json
 ├ package-lock.json
 ├ main.py
 └ index.js

index.jsの書き換え

https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289 からほぼそのまま引用しています。

よくわからん\(^q^)/

index.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

app.on('window-all-closed', function () {
    app.quit();
});

app.on('ready', function () {
    var subpy = require('child_process').spawn('python', ['./main.py']);
    var rq = require('request-promise');
    var mainAddr = 'http://localhost:8080'; // ポートはmain.pyで設定された値

    var openWindow = function () {
        mainWindow = new BrowserWindow({ width: 400, height: 300 });
        mainWindow.loadURL(mainAddr);
        mainWindow.on('closed', function () {
            mainWindow = null;
            subpy.kill('SIGINT');
        });
    };

    var startUp = function () {
        rq(mainAddr)
            .then(function (htmlString) {
                console.log('server started');
                openWindow();
            })
            .catch(function (err) {
                startUp();
            });
    };
    startUp();
});

アプリ起動

PowerShellから

WindowsPowershell
electron .

としてGUIアプリを起動!

まとめ

以上で簡単なチュートリアル(?)は終わりです
Flask×Electronはちょこちょこ見かけていましたが、bottle×Electronでもできました(´◉◞౪◟◉)
簡単なGUIアプリでしたら、習得も容易なbottleを使ってみてはどうでしょう??

一応、Electron-packagerを使うとexe形式やapp形式に出力できるそうなのですが……それはまたいずれ!⊂⌒~⊃。Д。)⊃

RyuSA
紅茶をキメながらリモートワーク
iij
日本のインターネットを支えてきたIIJ。現在もその先もイニシアティブをとり続けます。
https://www.iij.ad.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away