PythonとElectronを使ってアプリケーションを作成する方法を現役エンジニアが解説【初心者向け】
初心者向けにPythonとElectronを使ってアプリケーションを作成する方法について現役エンジニアが解説しています。Electronとはオープンソースのソフトウェアフレームワークで、Webアプリを作る感覚でデスクトップアプリを作成できます。Electronのインストール方法から使い方まで説明します。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
PythonとElectronを使ってアプリケーションを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。
今回は、Pythonに関する内容だね！
どういう内容でしょうか？
PythonとElectronを使ってアプリケーションを作成する方法について詳しく説明していくね！
お願いします！
目次
Electronとは
ElectronとはGithubが開発したオープンソースのソフトウェアフレームワークです。
HTML、JavaScript、CSSを使ってWebアプリを作る感覚でWindows、Mac、Linuxで動くデスクトップアプリを作成できます。アプリケーションにはNode.jsとChromのオープンソース版ブラウザであるChromiumが使われています。
Electronは様々なデスクトップアプリで使われており、有名なところでいうとVS CodeやSlackなどに使われています。
Electronと必要なモジュールのインストール
Electronのインストール
まずはElectronをインストールします。Electronを動かすためにはNode.jsの環境構築が必要になります。
以下のURLから最新版のNode.jsをインストールします
Node.jsのインストールを終えたら、以下のコマンドでElectronをインストールします。
npm install -g electron
Pythonの実行環境
Node.js上でPythonスクリプトを実行するためにPython-shellをインストールします。Electronのアプリの開発ディレクトリ上で以下のコマンドを実行します。
npm install python-shell
サンプルコードを実行してみよう
開発に必要なモジュールをインストールしたら、サンプルアプリを用意して実行します。今から紹介するコードはすべて、先程python-shellをインストールした開発ディレクトリ上に保存します。
HTMLの用意
まずはアプリの画面になるHTMLを用意します。ファイル名は「index.html」とします。
<head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script src="./runPython.js"></script> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <input id="message" type="text" placeholder="Type Message Here" /> <button class="btn btn-primary" onclick="run_script()">Click!</button> </body>
JavaScriptの用意
次にJavaScriptファイルを2つ用意します。
一つはElectronのアプリを動かすためのJavaScriptを用意します。ファイル名は「main.js」とします。
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on("ready", () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadURL("file://" + __dirname + "/index.html");
mainWindow.on("closed", function () {
mainWindow = null;
});
});
npmでインストールしたモジュールを使うためにrequireを使いますが、Electron V5以降ではデフォルトでrequireが使えず、requie is not definedとなって、今回使用するPython-shellを使うことができません。そこで、nodeIntegration: trueと追記すればrequireが使えるようになります。
続いて、Pythonを実行するためのJavaScriptを用意します。ファイル名は「runPython.js」とします。
let { PythonShell } = require("python-shell");
function run_script() {
const message = document.getElementById("message").value;
const options = {
args: [message],
};
let pyshell = new PythonShell("getMessage.py", options);
pyshell.on("message", function (message) {
swal(message);
});
document.getElementById("message").value = "";
}
optionsのargsでPythonに引き渡すデータを指定することで、Pythonで値を受け取って処理を行うことができます。
Pythonの用意
最後に今回実行するPythonファイルを用意します。今回は先程のrunPython.jsからの値を受け取ってメッセージを加工して値を返します。
ファイル名は「getMessage.py」とします。
import sys
message = sys.argv[1]
print("I got a message '{}'".format(message))
sys.stdout.flush()
アプリの実行
一通りサンプルコードを用意したら、以下のコマンドでアプリを実行してみましょう。
electron main.js
立ち上がったアプリの画面のテキストボックスに適当なメッセージを入れてボタンを押したときに以下の用にダイアログが表示されて、入力したメッセージが出力されたら成功です。
まとめ
今回はElectronとPythonを連携してアプリを作成する方法を紹介しました。
ElectronでPythonを使うことでPythonでしかできない機能を実装できたり、Pythonの方が書きやすいという方でも導入しやすいので、ぜひお試しください！
監修してくれたメンター
| メンター三浦
モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも最短4週間でPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
