Electron   IPC

ホーム
目次


IPC

この章では、Electron の IPC (Inter Process Comunication、プロセス間通信) について説明します。

Electron では、index.js のことをメインプロセス (Main Process) と呼び、 index.html や lib.js などのことをレンダラープロセス (Renderer Process) と呼びます。

メインプロセスはアプリケーションの挙動を一括して管理しています。 そしてレンダラープロセスはそれぞれのウィンドウ (各HTMLファイル) の挙動を管理しています。ウィンドウは一つだけとは限りません。設定ウィンドウや、 アバウトウィンドウ、そしてペイントプログラムなら ツールパレットウィンドウなどもあるでしょう。 そしてそれぞれのウィンドウに javaScritp が書かれたり js ファイルが設定されるわけですが、違うファイルに書かれている javaScript どうしのプロセス (process、手順・処理) のやりとりに使われるのが IPC (プロセス間通信です)。

メインプロセスは ipcMain、レンダラープロセスは ipcRenderer というオブジェクトで管理します。そしてそれぞれのプロセスから send メソッドで通信を送り (処理を依頼し)、on メソッドで通信を受け取り処理をします。

それぞれの通信には、名前を決めておき、その名前が設定されている on メソッドが処理を行うという仕組みになっています。 処理は一つではなく複数ある場合もありますので、名前で区別できるようにしています。

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


ディレクトリの作成

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


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

cd Documents
mkdir Electron
cd Electron
mkdir IPC
cd IPC

// IPC ディレクトリに設定ファイルを作り、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 ファイルを IPC ディレクトリに入れます。

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


package.json の編集

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

package.json


{
  "name": "IPC",
  "version": "1.0.0",
  "description": "I am IPC",
  "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"
  }
}

コード説明

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


index.js の追加

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

index.js

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

let window;

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

ipc.on('change-title', (event, title) => {
    let newtitle;
    if (title != 'Goodbye') {
	newtitle = 'Goodbye';
    } else {
	newtitle = 'Hello';
    }
    event.sender.send('new-title', newtitle)
});

2行目の const で ipcMain を ipc という名前で使えるようにしています。

ipc.on で 'change-title' という名前で送られてきた通信を受け取って処理します。

そして、イベント送ってきたプロセス (event.sender) へ 'new-title' 名前で.send を使って処理結果を送っています。

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


index.html の追加

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

index.html


<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>IPC</title>
      <style type="text/css">
	.middle {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: auto;
	    height: 3.2rem;
	}
      </style>
    </head>
    <body>
        <div class="middle" align="center">
	    <button type="button" id="button">Hello</button>
	    </div>
      <script type="text/javascript" src="lib.js"></script>
    </body>
  </html>

title タグのところがアプリケーションウィンドウのタイトルになります。

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


lib.js の追加

IPC ディレクトリに次の lib.js を追加してください。


const ipc = require('electron').ipcRenderer;
let button = document.getElementById('button');
button.onclick = () => {
    title = document.getElementsByTagName('title');
    ipc.send('change-title', title[0].textContent);
    ipc.on('new-title', (event, newtitle) => {
	title[0].textContent = newtitle;
    });
}

1行目で ipcRenderer を ipc という名前で使えるようにしています。

ipc.send で 'change-title' という名前の通信を受け取っています。

そして、ipc.on で 'new-title' という名前の通信を受け取っています。


実行

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


npm start

実行結果

Hello ボタンをクリックするたびに、ウィンドウのタイトルが Boodbye と Hello に変わります。

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


ビルド

コマンドプロンプトもしくはターミナルを起動して、 それぞれの 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 ディレクトリの中の IPC Setup 1.0.0.exe をダブルクリックすると インストーラが起動します。

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

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


macOS の場合

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

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

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


Linux の場合

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

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

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


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

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

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

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

ipc.desktop


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

コード説明

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


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

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

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

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

ipc.desktop


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

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



12802 visits
Posted: Jun. 29, 2021
Update: Jul. 02, 2021

ホーム   目次