おはこんばんんじにちは、今はコードを見直すために低浮上のねこです。

今日はWin7 SP1(32bit)でElectronを使ってみました。

NodejsとElectronのインストール

まずはインストールしないと始まらないのでインストールしていきます。

https://nodejs.org/ja/

こちらのサイトにアクセスして、msiファイルを落として実行します。

ユーザーアカウント制御が出ますが、はいにしといてください。

インストールができたら、PowerShellを起動して、こちらのコマンドを実行してください。

node --version

僕の場合は12.18.3 LTSをインストールしたので

v12.18.3

と表示されます。

もちろんnpmもインストールされています。

npm --version

これを入力すると、、、

6.14.6

表示されてます。

インストール成功。

では、Electronをインストールします。

PowerShellでこのコマンドを実行してください。

npm i -D electron@latest

こうすると、Electronがインストールされます。

他のバージョンを使いたいときはホームページを参照してください。

https://www.electronjs.org/

僕はなるべく最新のものを使いたいので、

npm i -D electron-nightly

を実行します。

ほんとにインストールされたか確認したいときは

npm list

でelectronのパッケージがあることを確認しましょう。

Electronを使ってみる

下準備

さて、先程インストールしたElectronを使ってみましょう。

まず、

mkdir 作成するフォルダー名

でファイルを保存するフォルダを作り、

cd 作成したフォルダー名

で移動します。

作成

こちらのコマンドを実行してください。

npm init -y

これでパッケージの基本情報(package.json)が作成されました。

これを改変してください。

テキストエディタはVSCodeなどをおすすめしますが、メモ帳でもいいです。

僕の場合は、

{
  "name": "hello-world",
  "version": "0.0.1",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "NSK-1010",
  "license": "WTFPL"
}

WTFPLについてはggってください。

今度オープンソースライセンスのことの記事書こうと思うんでそれまでは。

続いてmain.jsを作っていきます。

// ライブラリの読み込み
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// ウィンドウ
let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成（windowの大きさや、Kioskモードにするかどうかなどもここで指定できる）
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定(相対パスだと動かないのでご了承を)
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 自動的にChromiumのDevツールを開く場合は次の行のスラッシュを取る
  // mainWindow.webContents.openDevTools();

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

続いて、index.htmlを作成します。

例としては

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Hello World!!</title>
    </head>
    <body>
        <h1>Hello World!!</h1>
        <p>初めてElectronを使ってみた</p>
    </body>
</html>

です。

好きなようにHTMLを書いてください。

これはセンスに任せます。

あ、ちなみに ってのは半角スペースをHTMLコードに置き換えたものです。

実行

こちらのコマンドを実行するとウィンドウが立ち上がります。

npx electron .

どうでしょうか。

この自分でアプリを作ったという感覚は。

Electronアプリのパッケージ化の方法はありますが、使い方がぜんぜんわからないので、ggってください。

今回のまとめと今後

サポート対象外のWindows7でも今でもElectronを使うことができることがわかりました。

Electronについてかなり理解できたので、Flastを改変してブラウザができたらいいと思いました。

今日はここで終わりますねー

またにゃー!!