見出し画像

【Electron】デスクトップアプリを作ってみる

かびねこ

※2019年頃に別ブログで書いた記事のリメイク版です。

GUIアプリ開発の新しい選択肢

いつもお仕事で配布する用のGUIアプリはC#のWinFormで開発してるのだが(枯れてる技術だからね）なんか最近マンネリ化してきてるので、たまには新しい環境で開発したいなーって思った。

いろいろ調べてみると、どうやら我らがGitHub大先生が「WEBの技術をそのまんまデスクトップアプリに流用できる」というイカしたフレームワークを出してるらしい。それがElectronというやつだ。しかも、俺がお仕事で使ってる「Visual Studio Code」も何気にElectron使って作られてるらしい。ぱないの！

しかしこのElectron、面白そうではあるのだが、実務レベルで使えるものかは未知数だ。まあ、兎にも角にもやってみない事にはなんとも言えんだろう。とりあえず試してみようじゃねえの。

環境のセットアップ

node.jsをインストール済みである事は前提として、公式のドキュメントを参考に進めてみる。

npm init

いつもの初期化コマンドを打ち込む。package.jsonを作るための質問がガンガン飛んでくるのだが、とりあえず白目剥きながらEnter連打で良さそう。ただし”main”のところだけは「main.js」を指定しておく。こいつがElectronを実行するときのエントリポイントになる。

npm install --save-dev electron

「package.json」が出来上がったら、手順通りElectronのインストール。たぶんグローバルインストールでも行けるとは思うのだが、公式ドキュメントに英語で書いてあるとおり、バージョン絡みの問題があった時に切り分けやすくするためにローカルの方が良いのだろう。インストールが終わって、package.jsonを確認すると中身はこんな感じになってる。

{
 "name": "electron_test",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "dependencies": {},
 "devDependencies": {
   "electron": "^3.0.4"
 },
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

どーやら、Electronのバージョン3.0.4がインストールされたようだ。よかよか。

お次は、さっき書いた「main.js」を新規作成して、何も考えずにサンプルのソースコードをコピペしてくる。簡易版と複雑版があったけれども、今回はお試しなので簡易版にしておこう。

const { app, BrowserWindow } = require('electron')
 
 function createWindow () {
   // Create the browser window.
   win = new BrowserWindow({ width: 400, height: 300 })
 
   // and load the index.html of the app.
   win.loadFile('index.html')
 }
 
 app.on('ready', createWindow)

ウインドウを幅高さ指定して作成して、そこにindex.htmlを読み込むといった感じだろう。で、ここで書かれてる「index.html」を作ってハロワ的なやつを記述すればよさそうだ。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>就職しろ</title>
   <link rel="stylesheet" href="css/index.css">
   <script src="js/index.js"></script>
</head>
<body>
<div id="container">
   <div class="ka-chan">
   ＼ ⊂[J( 'ｰ`)し<br>
     ＼/　(⌒ﾏ´ <br>
     （⌒ヽrヘJつ <br>
       ＞ _）、 <br>
       し' ＼_） ヽヾ＼ <br>
                 丶_ｎ.＿_ <br>
               <a href="https://www.hellowork.go.jp/" target="_blank">https://www.hellowork.go.jp/</a><br>
                   ￣ 　 （⌒ <br>
                  ⌒Y⌒<br>
</div>
</div>
</body>
</html>

Electronでこいつを走らせるには、ターミナルで「electron .」と打ち込めば良いっぽい。さっき作ったpackage.jsonを一部書き換える。

"scripts": {
"start": "electron ."
},

あとは「npm start」すれば、いい感じにElectronが実行される。

画像1

ほむほむ、たしかにChromeとかで見るのと全く同じで特に違和感は無い。

デバッグしてみる

でもこれどうやってデバッグすんのさ？わざわざWEBブラウザでデバッグしてからElectronで動かすというのも面倒だ。と思ってたら、ちゃんとDevtronとかいうデバッグツールあるらしい。やりますねぇ！

npm install --save-dev devtron

公式に書いてあるとおり打ち込んでインストールする。このあと「npm start」でElectronをもう一度たちあげて、「Ctrl+Shift+I」もしくは「View」->「Toggle Developer Tools」で、ChromeでF12押した時に出てくる例のアレと同じやつが表示された。やったぜ。

画像2

デバッグウインドウを見やすくするためにウインドウのサイズを適宜広げてやる必要はある。スクリプトとかを修正したら画面をリロードすることで即座に適用されるので、特に困らない。ネイティブなデスクトップアプリと違って、ビルドする手間が無いってのは良いわね。

配布のやり方

しかし、これどうやって配布すんだろうね？と思って調べてみたところ、ちゃんとプラットフォームを指定して出力できるツールがあるようだ。それが「electron-packager」とかいうやつなのだが、今回はWindows向けに出力したい。ネットで調べた情報を基に、出力用のタスクを追記してみる。

"scripts": {
"start": "electron .",
"export": "electron-packager . HelloWork --platform=win32 --arch=x64 --overwrite --electron-version=3.0.4"
},

「–electron-version」の部分には、使ってるElectronのバージョンをぶちこめばいいみたい。この状態で「npm run export」すれば、「HelloWork-win32-x64」フォルダの下に「HelloWork.exe」が出来上がった。そして実行すると、さっきと同じようにアプリが立ち上がった。

画像3

でもまあアレだね。たかがハロワレベルのアプリなのに、尋常じゃないファイル量と、約120MBというファイルサイズってのは正直引く。まー、たぶんランタイムごと配布してる関係上、こんぐらいにならざるを得ないんだろうなぁ。致し方なし。

試してみた感想

なんか触ってて楽しいし可能性は感じるのだけれど、俺の周りで流行るかどうかと言われると現時点だと微妙。開発に前提とされる知識が多めだし、配布するときの容量もネック。

しかし、ブラウザアプリだけだと難しかったファイルのローカル入出力なんかはNode.jsの力を借りればなんとかできそうだし、配布を前提としなければそれなりに使えそうなポテンシャルは秘めてるんじゃなかろーか。

いいなと思ったら応援しよう！