はじめに
PythonのGUI環境が微妙だなぁと思っていると、Electronと連携することが簡単にでき、綺麗なGUI環境が作れそうだったので、簡単なアプリケーションを作ってみました。
参考：Electron as GUI of Python Applications
ご協力お願いします！
こちらの記事が参考になった方は、こちらの記事に『いいね』をしていただけると嬉しいです。
著者紹介
私は株式会社キカガク代表取締役の吉崎亮介と申します。
現在は『機械学習・人工知能 脱ブラックボックスセミナー』や『機械学習のオンライン家庭教師』を運営しております。
略歴
| 所属 | 学科・部署 | 研究内容 | 賞罰 |
|---|---|---|---|
| 舞鶴高専 | 電子制御工学科 | 画像処理（AR）を研究 | |
| 舞鶴高専 | 電気・制御システム工学専攻 | ロボット工学・システム制御・最適化を研究 | |
| 京都大学大学院 | 情報学研究科（加納研） | 製造業に向けた機械学習の応用研究 | ADCHEM2016最優秀論文賞、化学工学会技術賞 |
| 株式会社SHIFT | 社長室 | 人工知能によるソフトウェアテスト自動化の研究 | CEDEC2016登壇 |
| 株式会社Carat | 取締役兼COO | 最適な旅程提案アプリ（自然言語処理・最適化） | |
| 株式会社キカガク | 代表取締役社長 | 機械学習・人工知能セミナーやオンライン家庭教師 |
株式会社キカガク
機械学習や人工知能の教育サービスを提供
フォローお待ちしております
ビジネス目線の機械学習・人工知能の情報やオススメの参考書について発信しています。
代表取締役社長 吉崎 亮介
Twitter：@yoshizaki_kkgk
Facebook：@ryosuke.yoshizaki
Blog：キカガク代表のブログ
それでは、前置きが長くなりましたが、環境構築をはじめていきましょう！
開発環境
・OS: Mac OS X EI Capitan (10.11.5)
環境構築
今回はPythonの軽量なWebフレームワークであるFlaskを使用します。
$ pip install Flask
$ npm install -g electron-prebuilt
Electronのインストールで躓いた場合は、node.js側を最新版にするとうまくいく可能性が高いです。
詳しくは過去の記事のこちら（Electron入門（インストールからHello Worldまで）でどうぞ。
ElectronでPythonのデスクトップアプリを作成
新規プロジェクト作成
PythonApp
├── node_modules
├── hello.py
├── main.js
└── package.json
Electron用の新規プロジェクトを作成します。
$ mkdir PythonApp
$ cd PythonApp
$ npm init -y
ここで、node.js側に必要なモジュールがあるので、インストールします。
$ npm install --save request
$ npm install --save request-promise
npm init -y で作成された package.json を編集します。
{
"name": "PythonApp",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"request-promise": "*",
"electron-prebuilt": "*"
}
}
アプリ制御部分のmain.jsを作成
ディレクトリ内にElectronを制御する main.js を作成します。
// Electron側の初期設定
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
// アプリを閉じた時にquit
app.on('window-all-closed', function() {
app.quit();
});
// アプリ起動後の処理
app.on('ready', function() {
var subpy = require('child_process').spawn('python',['./hello.py']);
var rq = require('request-promise');
var mainAddr = 'http://localhost:5000';
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();
});
アプリ表示部分のhello.pyを作成
hello.pyを作成します。
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from __future__ import print_function
import time
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!<br>This is powered by Python backend."
if __name__ == "__main__":
print('on hello')
app.run(host="127.0.0.1", port=5000)
Electronを実行
サンプルのアプリケーションを実行します。
$ electron .
うまく動作しました。
これで完成です。
お疲れ様でした。
フォローお待ちしております
ビジネス目線の機械学習・人工知能の情報やオススメの参考書について発信しています。
代表取締役社長 吉崎 亮介
Twitter：@yoshizaki_kkgk
Facebook：@ryosuke.yoshizaki
Blog：キカガク代表のブログ
最後までお読みいただき、ありがとうございました。