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

# はじめに


[![logo_horizontal.png](https://qiita-image-store.s3.amazonaws.com/0/130181/be63b003-0dfa-e1c1-9282-ca12b02f00a4.png)](http://www.kikagaku.co.jp/)

PythonのGUI環境が微妙だなぁと思っていると、Electronと連携することが簡単にでき、綺麗なGUI環境が作れそうだったので、簡単なアプリケーションを作ってみました。
参考：[Electron as GUI of Python Applications](https://www.fyears.org/2015/06/electron-as-gui-of-python-apps.html)

#### ご協力お願いします！

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

## 著者紹介

![02.jpg](https://qiita-image-store.s3.amazonaws.com/0/130181/32a1e616-fe1c-6ffa-fa7f-430138c52b3d.jpeg)

私は[**株式会社キカガク**](http://www.kikagaku.co.jp/)代表取締役の[**吉崎亮介**](http://blog.kikagaku.co.jp/)と申します。
現在は『[**機械学習・人工知能 脱ブラックボックスセミナー**](http://www.kikagaku.co.jp/services/seminar/)』や『[**機械学習のオンライン家庭教師**](http://www.kikagaku.co.jp/services/online-tutor/)』を運営しております。

#### 略歴

|所属|学科・部署|研究内容|賞罰|
|:--|:--|:--|:--|
|舞鶴高専|電子制御工学科|画像処理（AR）を研究||
|舞鶴高専|電気・制御システム工学専攻|ロボット工学・システム制御・最適化を研究|
|京都大学大学院|情報学研究科（[加納研](http://human.sys.i.kyoto-u.ac.jp/)）|製造業に向けた機械学習の応用研究|ADCHEM2016最優秀論文賞、[化学工学会技術賞](http://www2.scej.org/sis/awards/)|
|株式会社SHIFT|社長室|人工知能によるソフトウェアテスト自動化の研究|[CEDEC2016登壇](http://cedec.cesa.or.jp/2016/session/PRD/12366.html)|
|株式会社Carat|取締役兼COO|最適な旅程提案アプリ（自然言語処理・最適化）||
|[株式会社キカガク](http://www.kikagaku.co.jp/)|代表取締役社長|[機械学習・人工知能セミナー](http://www.kikagaku.co.jp/services/seminar/)や[オンライン家庭教師](http://www.kikagaku.co.jp/services/online-tutor/)||

#### 株式会社キカガク

[![logo_horizontal.png](https://qiita-image-store.s3.amazonaws.com/0/130181/be63b003-0dfa-e1c1-9282-ca12b02f00a4.png)](http://www.kikagaku.co.jp/)

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


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

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

代表取締役社長　吉崎 亮介
Twitter：[@yoshizaki_kkgk](https://twitter.com/yoshizaki_kkgk)
Facebook：[@ryosuke.yoshizaki](https://www.facebook.com/ryosuke.yoshizaki)
Blog：[キカガク代表のブログ](http://blog.kikagaku.co.jp/)

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

## 開発環境
・OS: Mac OS X EI Capitan (10.11.5)

## 環境構築

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

```bash:Flash(python)とElectronのインストール
$ pip install Flask
$ npm install -g electron-prebuilt
```

Electronのインストールで躓いた場合は、node.js側を最新版にするとうまくいく可能性が高いです。
詳しくは過去の記事の[こちら（Electron入門（インストールからHello Worldまで）](http://qiita.com/Carat/items/8917fc4350d17a44773d)でどうぞ。

# ElectronでPythonのデスクトップアプリを作成

## 新規プロジェクト作成

```bash:ディレクトリ構成
PythonApp
├── node_modules
├── hello.py
├── main.js
└── package.json
```

Electron用の新規プロジェクトを作成します。

```bash:新規プロジェクト作成
$ mkdir PythonApp
$ cd PythonApp
$ npm init -y
```

ここで、node.js側に必要なモジュールがあるので、インストールします。

```bash:必要なモジュールのインストール
$ npm install --save request
$ npm install --save request-promise 
```

```npm init -y``` で作成された ```package.json``` を編集します。

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

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

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

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

```python: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を実行

サンプルのアプリケーションを実行します。

```bash:Electronを実行
$ electron .
```

<img width="415" alt="スクリーンショット 2016-08-07 2.01.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/0587afd1-edec-227b-069e-619d29999f19.png">

うまく動作しました。
これで完成です。

お疲れ様でした。


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

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

代表取締役社長　吉崎 亮介
Twitter：[@yoshizaki_kkgk](https://twitter.com/yoshizaki_kkgk)
Facebook：[@ryosuke.yoshizaki](https://www.facebook.com/ryosuke.yoshizaki)
Blog：[キカガク代表のブログ](http://blog.kikagaku.co.jp/)


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