Blogブログ

エンジニアの信尾海翔です。
第九回目のブログでは第八回目に引き続き、Electronについてまとめたいと思います。
今回の内容はElectronのcontextBridgeについてです。

ElectronのcontextBridge

contextBridgeはレンダラープロセスとメインプロセスが安全に通信を行うための橋のような役割を持っています。
メインプロセスとレンダラープロセスについてはElectron 第2回に登場しています。

メインプロセス　→　Electron独自のアプリケーションを制御する機能が使える
レンダラープロセス　→　アプリケーションのレイアウトを整える役割を持つ、メインプロセスが持つような機能を使うことはできない

今回はElectron 第2回と同じようにcontextBridgeを使って現在の日付を取得、表示させてみたいと思います。

preload.jsを作成、contextBridgeの処理を追加

const {ipcRenderer, contextBridge} = require("electron");

contextBridge.exposeInMainWorld(
    'electron',
    {
        getTime: async () => {
            ipcRenderer.send('time');
            ipcRenderer.on('time-result', (event ,arg)=>{
            console.log(arg);
            });
        }
    }
);

contextBridge.exposeInMainWorldの一つ目に引数にはapikey、二つ目にapiを指定します。
今回はapikeyにelectron、apiにはElectron 第2回と同じように現在の時間を取得してconsole.logで表示するような処理を指定しています。

関数createWindow内で作成したpreload.jsを呼び出す

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

function createWindow(){
    win = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });
    win.loadFile('index.html');
    win.webContents.openDevTools();
};

app.on('ready', createWindow);

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

ipcMain.on('time', (event) => {
    var result = new Date();
    event.reply('time-result' ,result);
});

preload: path.join(__dirname, ‘preload.js’)でpreload.jsを呼び出しています。
一つ目の引数に現在のパス、二つ目に先ほど作成したpreload.jsを指定しています。
取得した現在の日付を表示して確認するため、win.webContents.openDevTools()でデベロッパーツールを表示させています。

index.htmlでcontextBridgeを使って定義した関数getTimeを呼び出す

    (async () => {await window.electron.getTime()})()

window.electron.getTimeはwindow.＋contextBridgeに指定したapikey.＋呼び出したい関数名となっています。

以下のようにConsoleに現在の日付が表示されていれば成功です。

余談

少し前まではcontextBridgeを使わずにプロセス間通信を行うことができましたが現在はcontextBridgeを使うのが主流のようです。