WEB技術

Electron で アプリ開発をしてみよーかなって話

  /

Node.jsはすごい!

ここ数日 puppeteer と node.js を触って、世の中にこんな便利なものがあったかいな、詐欺やん！
だれか教えてくれればよかったのに！

とめちゃくちゃ感動していたのですが、一つ思いついたアプリがGUIがあった方がいいなーと思い始めていました。
GUI作るならHTMLの画面を作ればいいなと思っていたんですけど、もっといい方法があったっぽいので調べながら実装してみようかなと思います。

VScode や Atom に採用されている Electron

今回取り扱うこの Electron というもの、日頃お世話になっている↑のアプリで採用されているものだったのです。
Atomは知ってましたが、VScodeもHTMLでできてたんかいな・・・・。
node.jsをつかえるなら、puppeteer の恩恵も活かせそうだな、と思ったので頑張って目的のものを作ってみようかと思っています。
この記事ではさわりだけになるかもしれませんが。
いままで扱ってきたアプリもGUIがあれば便利だな、と思っていた部分もあったので、とりあえずシンプルな入力欄だったり、取得してきた情報を一覧で表示したいなどできるところを目標にしたいと思っています。

環境を整える

nodeはインストールしておきましょう。
vscodeを利用しています。

適当なフォルダに移動し、以下を実行

npm i -D electron
npm init

プロジェクトのフォルダを作りましょう。

「project01」とします。
そのフォルダに移動します。

npm init

package.jsonが作られます。
main.jsを作りましょう。

main.js

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on('window-all-closed', function () {
    if (process.platform != 'darwin')
        app.quit();
});

app.on('ready', function () {

    // ブラウザ(Chromium)の起動, 初期画面のロード
    mainWindow = new BrowserWindow({ width: 800, height: 600 });
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function () {
        mainWindow = null;
    });
});

同フォルダ内に表示画面用のファイルを作成します。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Read Us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>

以下で画面が立ち上がるはず

electron .

が、エラーで立ち上がらない・・・・
自分の環境では以下を実行し、再度 electronをインストールしたらうまくいきました。

npm install -g electron-prebuilt

以下記事 参考にしました。
Electronでアプリケーションを作ってみよう

ここまできたら、index.htmlをアプリケーションぽくしていけばいいだけみたいです。
ふつーにいろんなJSを使って。

//インストール
npm i electron-packager -g

//パッケージする
electron-packager . your-app

puppeteer 動くのかとかいろいろ調べて、また何かわかれば追記します。

以下追記
https://qiita.com/Quramy/items/a4be32769366cfe55778http://

引数
https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3

こちらの記事もおすすめ！