Electron CheckBox

CheckBox

この章では、Electron のチェックボックスについて説明します。

IPC通信は使いません。

Linux については、Ubuntu、Fedora、CentOS、Mint で正常に動作しますが、Debian では動作しません。

ディレクトリの作成

Electronは、一つのアプリケーションを、一つのディレクトリにまとめて管理していきます。コマンドプロンプトかターミナルを起動して次のようにコマンドします。


// Documents ディレクトリなどに Electron 用のディレクトリなどを作り
// その中に RadioButton アプリケーション用のディレクトリを作ります。

cd Documents
mkdir Electron
cd Electron
mkdir CheckBox
cd CheckBox

// CheckBox ディレクトリに設定ファイルを作り、Electron と Electron-Builder をインストールします。

npm init -y
npm i -D electron
npm i -D electron-builder

// i は install の略記、-Dは --save-dev の略記です。-D もしくは --save-dev は、パッケージをそのディレクトリだけにインストールします。
// なお electron-builder は、アプリケーションをビルドするときに使用します。

アイコンの準備

PNG形式のアイコンを自作するか、次のサイトなどから PNG 形式のアイコンをダウンロードします。大きさは 512px などの一番大きなものが良いでしょう。

フリーアイコンSVG、PNG、ICO、ICNS

自作した、もしくはダウンロードした PNG ファイルを CheckBox ディレクトリに入れます。

Electron は、PNG 形式のアイコンを、それぞれの OS に適した形式に自動的に変換してくれます。

package.json の編集

package.json を次のように編集します。

package.json


{
  "name": "CheckBox",
  "version": "1.0.0",
  "description": "I am CheckBox",
  "main": "index.js",
    "scripts": {
	"start": "electron ."
  },
  "keywords": [],
  "author": "viva Cocoa",
  "build": {
      "win": {
          "target": "nsis",
          "icon": "clover.png"
      },
      "mac": {
          "target": "dmg",
          "icon": "clover.png"
      },
      "linux": {
          "target": "AppImage",
          "icon": "clover.png"
      }
  },
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.1.4",
    "electron-builder": "^22.11.7"
  }
}

コード説明

description と author に何か記述しなければ、ビルド時にエラーになります。
build 項目はどこに記述しても正常に機能しますが、一応 author 項目の次に記述することになっているみたいです。
Windows と macOS と Linux の build 項目を記述しましたが、次のように必要なプラットフォーム (OS) だけでも大丈夫です。
```
・・・
 "author": "viva Cocoa",
 "build": {
	"win": {
	    "target": "nsis",
	    "icon": "clover.png"
	}
 },
  "license": "ISC",
  ・・・
    
```
icon のところは、あなたが PNG ファイルにつけた名前にします。 icon 項目を省略するとエラーになるみたいです。

index.js の追加

CheckBox ディレクトリに次の index.js を追加します。今回は IPC 通信は使っていません。

index.js

                                                             
const { app, BrowserWindow } = require('electron');

let window;

app.on('ready', () => {
    window = new BrowserWindow({
	width: 400,
	height: 200,
	webPreferences: {
	    nodeIntegration: true,
	    contextIsolation: false
	}
    });
    window.loadFile('index.html');
    //window.webContents.openDevTools();
});

window.webContents.openDevTools(); をコメントアウトしていますが、開発時にはこれを機能させておくと、Chrome のデベロッパツールと同じものがウィンドウに表示されて、エラー箇所を指摘してくれるので大変便利です。

index.html の追加

CheckBox ディレクトリに次の index.html を追加します。

index.html


<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>CheckBox</title>
      <style type="text/css">
	body {
	    color: gray;
	    background: black;
	}
	.middle {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: auto;
	    height: 4.0rem;
	}
      </style>
    </head>
    <body>
        <div class="middle" align="center">
          <table cellpadding="0" cellspacing="0" border="0"><tr><td>
		   <input type="checkbox" name="color" value="red">Red
		   </td></tr><tr><td>
		   <input type="checkbox" name="color" value="green">Green
		   </td></tr><tr><td>
		   <input type="checkbox" name="color" value="blue">Blue
		   </td></tr></table>
		</div>
      <script>
      'use strict'
	let colors = document.getElementsByName('color');
	let r = '0';
	let g = '0';
	let b = '0';
	colors[0].addEventListener('change', () => {
	    if (colors[0].checked) {
	        r = 'f';
	    } else {
	        r = '0';
	    }
	    document.body.style.backgroundColor = '#' + r + g +b;
	});
	colors[1].addEventListener('change', () => {
	    if (colors[1].checked) {
	        g = 'f';
	    } else {
	        g = '0';
	    }
	    document.body.style.backgroundColor = '#' + r + g +b;
	});
	colors[2].addEventListener('change', () => {
	    if (colors[2].checked) {
	        b = 'f';
	    } else {
	        b = '0';
	    }
	    document.body.style.backgroundColor = '#' + r + g +b;
	});
	</script>
    </body>
  </html>

CSS でいろいろとやっているのは、チェックボックスをウィンドウの上下の中央に表示するためです。

実行

コマンドプロンプトもしくはターミナルに次のようにコマンドして簡易的に実行できます。


npm start

実行結果

チェックボックスを変更するたびに、ウィンドウの色が変わります。

ウィンドウの大きさを変更してもチェックボックスは常に中央に表示されます。

ビルド

コマンドプロンプトもしくはターミナルを起動して、それぞれの OS 上で次のようにコマンドします。


// Windows 32bit の場合
npx electron-builder --win --ia32

// Windows 64bit の場合
npx electron-builder --win --x64

// macOS の場合
npx electron-builder --mac --x64

// Linux の場合
npx electron-builder --linux --x64

// はじめのコマンドは npm ではなく、npx です。注意してください。
// なお、macOS の場合、次のようにコマンドして、一度にすべてのプラットフォームのインストーラを作成することもできます。
npx electron-builder -wml

インストール

Windows の場合

作成された dist ディレクトリの中の CheckBox Setup 1.0.0.exe をダブルクリックするとインストーラが起動します。

このインストーラでインストールした CheckBox アプリケーションは、コントロールパネルのプログラムのアンインストールで、安全にアンインストールすることもできます。

dist ディレクトの中の win-ia32-unpacked もしくは win-x64-unpacked の中の CheckBox.exe をダブルクリックしても CheckBox アプリケーションは起動しますが、この実行ファイルを他の場所へ移動させた場合は、DLL エラーで起動できません。

macOS の場合

作成された dist ディレクトリの CheckBox-1.0.0.dmg をダブルクリックして、インストーラを起動します。インストール方法は通常どおりです。

また、dist ディレクトリの中の mac ディレクトリの中に作成された実行ファイルをそのまま使うこともできます。

この実行ファイルは、Windows の場合と違って、どこへ移動させても正常に動作します。

Linux の場合

Linux の場合は、ビルドし他だけではアプリケーションにアイコンは付きません。アイコンを付けるには別の作業が必要になります。ただし、package.json にアイコンを指定しておかないとビルド時にエラーになります。

作成された dist ディレクトの CheckBox-1.0.0.AppImage はどこへ移動させても起動できます。ただし名前を変更すると起動できなくなります。

dist ディレクトリの中の linux-unpacked の中の checkbox 実行ファイルはダブルクリックしても起動しません。ターミナルで ./checkbox とコマンドすると起動できます。

Linux でアプリケーションにアイコンを付ける方法

次の場所にCheckBox-1.0.0.AppImage とアイコンファイルを移動もしくはコピーします。


    /home/ユーザー名/.local/share/applications

applications ディレクトリに次の checkbox.desktop ファイルを作成します。

checkbox.desktop


[Desktop Entry]
Type=Application
Version=1.0
Name=CheckBox
Exec=/home/ユーザー名/.local/share/applications/CheckBox-1.0.0.AppImage
Icon=/home/ユーザー名/.local/share/applications/clover.png
Comment=I am CheckBox
Categories=

コード説明

Version は、CheckBox-1.0.0.AppImage のバージョンではなく、1.0 としておきます。もしくは記述しなくても大丈夫です。
Comment は、Name と同じ文字列にすることはできません。
Categories を指定しない場合は、「その他」に分類されます。
次のコマンドで checkbox.desktop に間違いがないか確認できます。
desktop-file-validate checkbox.desktop
何も表示されなければエラーはありません。
checkbox.desktop は、すぐに有効になる Linux もあれば、再ログイン後に有効になる Linux もあります。
アクティビティなどで検索すると Hello アプリケーションがアイコン付きで表示されます。

システム全体に登録する方法

上記の方法は、ユーザ専用に CheckBox アプリケーションを登録する方法です。システム全体 (全ユーザが使えるよう) に登録する場合は次のようにします。ユーザ専用とシステム全体の両方がある場合は、ユーザ専用が優先されます。

CheckBox-1.0.0.AppImage は
/usr/bin
にコピーするか移動します。
アイコンファイルは
/usr/share/icons/hicolor/scalable/apps
にコピーするか移動します。
checkbox.desktop は
/usr/share/applications
に作成します。

そして、checkbox.desktop には、次のように記述します。

checkbox.desktop


[Desktop Entry]
Type=Application
Version=1.0
Name=CheckBox
Exec=CheckBox-1.0.0.AppImage
Icon=clover.png
Comment=I am CheckBox
Categories=

/usr/bin と /usr/share/icons/hicolor/scalable/apps には、システムによってパスが通っていますので、ファイル名だけで OK です。

16228 visits

Posted: Jun. 29, 2021

Update: Jul. 02, 2021

ホーム目次