質問編集履歴

追記

2021/06/04 23:14

投稿

bishopfunc

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- IPC通信を実装したらrequire is not definedとエラーが発生した
1	+ ElectronでIPC通信を実装したらrequire is not definedとエラーが発生した

test CHANGED Viewed

@@ -221,3 +221,179 @@
   }
 ```
+##
+# =============追記==============
+ipc通信の書き方に関する書き方が古いというご意見をいただいたので、次の記事を参考にしてもやはりエラーが出てしまいます。
+https://qiita.com/pochman/items/62de713a014dcacbad68
+以下を確認しても、書き方に特に問題はないように見える
+https://github.com/electron/electron/blob/main/docs/api/ipc-main.md
+https://github.com/electron/electron/blob/main/docs/api/ipc-renderer.md
+###発生している問題・エラーメッセージ
+`Uncaught TypeError: Cannot read property 'send' of undefined
+    at HTMLInputElement.<anonymous> (settings.html:45)`
+###該当のソースコード
+```JS
+index.js
+const { app, BrowserWindow,Menu,dialog,ipcMain } = require('electron');
+ipcMain.on('settings_changed', (event, ...args)=> {
+  mainWindow.webContents.send('set_bgcolor', color);
+});
+function createMainWindow() {
+  mainWindow = new BrowserWindow({
+    width: 600,
+    height: 400,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: __dirname + '/preload.js'
+    },
+  });
+```
+```JS
+preload.js
+const { contextBridge, ipcRenderer} = require("electron");
+contextBridge.exposeInMainWorld(
+  "api", {
+    send: (channel, data) => {//rendererからの送信用//
+        ipcRenderer.send(channel, data);
+      },
+    on: (channel, func) => { //rendererでの受信用, funcはコールバック関数//
+        ipcRenderer.on(channel, (event,...args) => func(...args));
+    }
+  }
+);
+```
+```html
+index.html
+    window.api.on('set_bgcolor', (color)=>{
+      document.body.style.backgroundColor = color;
+    });//receive //ここで何か表記ミスした
+```
+```html
+settings.html
+  <script >
+  'use strict';
+  let colors = document.getElementsByName('colors');
+  for (let i = 0; i < colors.length; i++) {
+    colors[i].addEventListener('change', function() {
+      let color = this.value;
+      // console.log(color);
+      // settings.html -> index.js -> index.html
+      // ipc
+      window.api.send('settings_changed', color);
+    });
+  }
+  </script>
+```
+```JS
+package.json
+  "devDependencies": {
+    "electron": "v6.14.13"
+  },
+  "dependencies": {
+    "require": "^6.14.13"
+  }
+```