はじめに

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にアクセスすると以下のようになることを確認。

今回は、この簡単な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形式に出力できるそうなのですが……それはまたいずれ！⊂⌒~⊃｡Д｡)⊃

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