Python
JavaScript
Flask
Electron

Pythonでデスクトップアプリを作る with Electron

More than 1 year has passed since last update.


はじめに

logo_horizontal.png

PythonのGUI環境が微妙だなぁと思っていると、Electronと連携することが簡単にでき、綺麗なGUI環境が作れそうだったので、簡単なアプリケーションを作ってみました。

参考:Electron as GUI of Python Applications


ご協力お願いします!

こちらの記事が参考になった方は、こちらの記事に『いいね』をしていただけると嬉しいです。


著者紹介

02.jpg

私は株式会社キカガク代表取締役の吉崎亮介と申します。

現在は『機械学習・人工知能 脱ブラックボックスセミナー』や『機械学習のオンライン家庭教師』を運営しております。


略歴

所属
学科・部署
研究内容
賞罰

舞鶴高専
電子制御工学科
画像処理(AR)を研究

舞鶴高専
電気・制御システム工学専攻
ロボット工学・システム制御・最適化を研究

京都大学大学院
情報学研究科(加納研
製造業に向けた機械学習の応用研究
ADCHEM2016最優秀論文賞、化学工学会技術賞

株式会社SHIFT
社長室
人工知能によるソフトウェアテスト自動化の研究
CEDEC2016登壇

株式会社Carat
取締役兼COO
最適な旅程提案アプリ(自然言語処理・最適化)

株式会社キカガク
代表取締役社長

機械学習・人工知能セミナーオンライン家庭教師


株式会社キカガク

logo_horizontal.png

機械学習や人工知能の教育サービスを提供


フォローお待ちしております

ビジネス目線の機械学習・人工知能の情報やオススメの参考書について発信しています。

代表取締役社長 吉崎 亮介

Twitter:@yoshizaki_kkgk

Facebook:@ryosuke.yoshizaki

Blog:キカガク代表のブログ

それでは、前置きが長くなりましたが、環境構築をはじめていきましょう!


開発環境

・OS: Mac OS X EI Capitan (10.11.5)


環境構築

今回はPythonの軽量なWebフレームワークであるFlaskを使用します。


Flash(python)とElectronのインストール

$ 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 を編集します。


package.json

{

"name": "PythonApp",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"request-promise": "*",
"electron-prebuilt": "*"
}
}


アプリ制御部分のmain.jsを作成

ディレクトリ内にElectronを制御する main.js を作成します。


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を作成します。


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を実行

$ electron .


スクリーンショット 2016-08-07 2.01.18.png

うまく動作しました。

これで完成です。

お疲れ様でした。


フォローお待ちしております

ビジネス目線の機械学習・人工知能の情報やオススメの参考書について発信しています。

代表取締役社長 吉崎 亮介

Twitter:@yoshizaki_kkgk

Facebook:@ryosuke.yoshizaki

Blog:キカガク代表のブログ

最後までお読みいただき、ありがとうございました。