質問編集履歴

ソースコードの修正

2021/02/25 05:04

投稿

T_Furuta

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,10 +40,6 @@
 </head>
 <body>
   <nav class="navbar bg-primary mb-4">
@@ -64,36 +60,268 @@
   </div>
   <script>
+  const { remote } = require('electron');
-    const BrowserWindow = window.remote.BrowserWindow;
+  const { BrowserWindow } = remote;
-    function doit() {
+  function doit() {
-      let w = remote.getCurrentWindow();
+    let win = new BrowserWindow({
+      width: 400,
+      height: 300,
-      let re = dialog.showMessageBox(w, {
+      webPreferences: {
+        nodeIntegration: true,
-      title:'Message',
+        enableRemoteModule: true
-      message:'これがメッセージボックスの表示です。',
-      detail: 'OKすると閉じます。'
+      }
-      });
+    });
+    win.loadFile('index.html');
+    document.querySelector('#msg').textContent
+      = 'Create new window!';
+  }
+  </script>
-      console.log(re);
+</body>
+</html>
+```
+```javascript
+index.js
+const { app, Menu, BrowserWindow } = require('electron');
+const path = require('path');
+function createWindow () {
+  win = new BrowserWindow({
+    width: 400,
+    height: 300,
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: true
     }
+  });
+  win.loadFile('index.html');
+}
+function createMenu() {
+  let menu_temp = [
+    {
+      label: 'File',
+      submenu: [
+        {label: 'New', click: ()=>{
+          console.log('New menu.');
+          createWindow();
+        }},
+        {label: 'File', click: ()=>{
+          console.log('File menu.');
+          createWindow();
+        }},
+        {role: 'close'},
+        {type: 'separator'},
+        {role: 'quit'}
+      ]
+    },
+    {role: 'editMenu'},
+    {role: 'viewMenu'},
+    {role:'windowMenu'},
+    {label: 'Help', submenu: [
+      {role: 'about'},
+      {type: 'separator'},
+      {role: 'reload'},
+      {role: 'zoomIn'},
+      {role: 'zoomOut'}
+    ]}
+  ];
+  let menu = Menu.buildFromTemplate(menu_temp);
+  Menu.setApplicationMenu(menu);
+}
+createMenu();
+app.whenReady().then(createWindow);
+```
+・Monaca移行用プログラム（テンプレートは「最小限のテンプレート」を使用しております。）
+```html
+index.html
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
+    <script src="components/loader.js"></script>
+    <link rel="stylesheet" href="components/loader.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+</head>
+<body>
+  <nav class="navbar bg-primary mb-4">
+    <h1 class="display-4 text-light">Sample-app</h1>
+  </nav>
+  <div class="container">
+    <p id="msg">please click button.</p>
+    <button class="btn btn-primary"onclick="doit()">
+      Click
+    </button>
+  </div>
+  <script>
+  const { remote } = require('electron');
+  const { BrowserWindow } = remote;
+  function doit() {
+    let win = new BrowserWindow({
+      width: 400,
+      height: 300,
+      webPreferences: {
+        nodeIntegration: true,
+        enableRemoteModule: true
+      }
+    });
+    win.loadFile('index.html');
+    document.querySelector('#msg').textContent
+      = 'Create new window!';
+  }
   </script>
 </body>
 </html>
@@ -128,9 +356,9 @@
     webPreferences: {
+      nodeIntegration: true,
-      enableRemoteModule: true,
+      enableRemoteModule: true
-      preload: path.join(app.getAppPath(), 'preload.js')
     }
@@ -222,295 +450,23 @@
 ```
-```javascript
-preload.js
-const { remote } = require('electron');
-const { dialog } = remote;
-const { ipcRenderer } = require('electron');
-window.remote = remote;
-window.dialog = dialog;
-window.ipcRenderer = ipcRenderer;
-```
-・Monaca移行用プログラム（テンプレートは「最小限のテンプレート」を使用しております。）
-```html
-index.html
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
-    <script src="components/loader.js"></script>
-    <link rel="stylesheet" href="components/loader.css">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-</head>
-<body>
-  <nav class="navbar bg-primary mb-4">
-    <h1 class="display-4 text-light">Sample-app</h1>
-  </nav>
-  <div class="container">
-    <p id="msg">please click button.</p>
-    <button class="btn btn-primary"onclick="doit()">
-      Click
-    </button>
-  </div>
-  <script>
-    const BrowserWindow = window.remote.BrowserWindow;
-    function doit() {
-      let w = remote.getCurrentWindow();
-      let re = dialog.showMessageBox(w, {
-      title:'Message',
-      message:'これがメッセージボックスの表示です。',
-      detail: 'OKすると閉じます。'
-      });
-      console.log(re);
-    }
-  </script>
-</body>
-</html>
-```
-```javascript
-index.js
-const { app, Menu, BrowserWindow } = require('electron');
-const path = require('path');
-function createWindow () {
-  win = new BrowserWindow({
-    width: 400,
-    height: 300,
-    webPreferences: {
-      enableRemoteModule: true,
-      preload: path.join(app.getAppPath(), 'preload.js')
-    }
-  });
-  win.loadFile('index.html');
-}
-function createMenu() {
-  let menu_temp = [
-    {
-      label: 'File',
-      submenu: [
-        {label: 'New', click: ()=>{
-          console.log('New menu.');
-          createWindow();
-        }},
-        {label: 'File', click: ()=>{
-          console.log('File menu.');
-          createWindow();
-        }},
-        {role: 'close'},
-        {type: 'separator'},
-        {role: 'quit'}
-      ]
-    },
-    {role: 'editMenu'},
-    {role: 'viewMenu'},
-    {role:'windowMenu'},
-    {label: 'Help', submenu: [
-      {role: 'about'},
-      {type: 'separator'},
-      {role: 'reload'},
-      {role: 'zoomIn'},
-      {role: 'zoomOut'}
-    ]}
-  ];
-  let menu = Menu.buildFromTemplate(menu_temp);
-  Menu.setApplicationMenu(menu);
-}
-createMenu();
-app.whenReady().then(createWindow);
-```
-```javascript
-preload.js
-const { remote } = require('electron');
-const { dialog } = remote;
-const { ipcRenderer } = require('electron');
-window.remote = remote;
-window.dialog = dialog;
-window.ipcRenderer = ipcRenderer;
-```
 起動はMonaca Localkitのプレビュー表示で起動しており、正確なエラーメッセージは下記になります。
-Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined
+Uncaught ReferenceError: require is not defined
-    at index.html:29
+    at index.html:27
 また、このままの状態でボタンを押すと、下記エラーも追加されます。
-Uncaught ReferenceError: remote is not defined
+Uncaught ReferenceError: BrowserWindow is not defined
-    at doit (index.html:31)
+    at doit (index.html:32)
     at HTMLButtonElement.onclick (index.html:22)

ソースコード及び説明の追記

2021/02/25 05:04

投稿

T_Furuta

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,6 +40,10 @@
 </head>
 <body>
   <nav class="navbar bg-primary mb-4">
@@ -60,44 +64,36 @@
   </div>
   <script>
-  const { remote } = require('electron');
-  const { BrowserWindow } = remote;
+    const BrowserWindow = window.remote.BrowserWindow;
-  function doit() {
+    function doit() {
-    let win = new BrowserWindow({
+      let w = remote.getCurrentWindow();
-      width: 400,
-      height: 300,
-      webPreferences: {
+      let re = dialog.showMessageBox(w, {
-        nodeIntegration: true,
-        enableRemoteModule: true
+      title:'Message',
+      message:'これがメッセージボックスの表示です。',
+      detail: 'OKすると閉じます。'
+      });
+      console.log(re);
-      }
+    }
-    });
-    win.loadFile('index.html');
-    document.querySelector('#msg').textContent
-      = 'Create new window!';
-  }
   </script>
 </body>
 </html>
@@ -112,6 +108,8 @@
 index.js
 const { app, Menu, BrowserWindow } = require('electron');
 const path = require('path');
@@ -130,9 +128,9 @@
     webPreferences: {
-      nodeIntegration: true,
-      enableRemoteModule: true
+      enableRemoteModule: true,
+      preload: path.join(app.getAppPath(), 'preload.js')
     }
@@ -224,6 +222,36 @@
 ```
+```javascript
+preload.js
+const { remote } = require('electron');
+const { dialog } = remote;
+const { ipcRenderer } = require('electron');
+window.remote = remote;
+window.dialog = dialog;
+window.ipcRenderer = ipcRenderer;
+```
 ・Monaca移行用プログラム（テンプレートは「最小限のテンプレート」を使用しております。）
 ```html
@@ -282,44 +310,36 @@
   </div>
   <script>
-  const { remote } = require('electron');
-  const { BrowserWindow } = remote;
+    const BrowserWindow = window.remote.BrowserWindow;
-  function doit() {
+    function doit() {
-    let win = new BrowserWindow({
+      let w = remote.getCurrentWindow();
-      width: 400,
-      height: 300,
-      webPreferences: {
+      let re = dialog.showMessageBox(w, {
-        nodeIntegration: true,
-        enableRemoteModule: true
+      title:'Message',
+      message:'これがメッセージボックスの表示です。',
+      detail: 'OKすると閉じます。'
+      });
+      console.log(re);
-      }
+    }
-    });
-    win.loadFile('index.html');
-    document.querySelector('#msg').textContent
-      = 'Create new window!';
-  }
   </script>
 </body>
 </html>
@@ -334,6 +354,8 @@
 index.js
 const { app, Menu, BrowserWindow } = require('electron');
 const path = require('path');
@@ -352,9 +374,9 @@
     webPreferences: {
-      nodeIntegration: true,
-      enableRemoteModule: true
+      enableRemoteModule: true,
+      preload: path.join(app.getAppPath(), 'preload.js')
     }
@@ -446,52 +468,56 @@
 ```
+```javascript
+preload.js
+const { remote } = require('electron');
+const { dialog } = remote;
+const { ipcRenderer } = require('electron');
+window.remote = remote;
+window.dialog = dialog;
+window.ipcRenderer = ipcRenderer;
+```
 起動はMonaca Localkitのプレビュー表示で起動しており、正確なエラーメッセージは下記になります。
-Uncaught ReferenceError: require is not defined
+Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined
-    at index.html:27
+    at index.html:29
+また、このままの状態でボタンを押すと、下記エラーも追加されます。
+Uncaught ReferenceError: remote is not defined
+    at doit (index.html:31)
+    at HTMLButtonElement.onclick (index.html:22)
-気がついた点としては、MonacaのElectronのサンプルアプリケーション「Electron TODO App」「Electron 最小限のテンプレート」は、「 require('electron');」をしている箇所がないため、何か根本的に間違えているような気がしております。
+気がついた点としては、MonacaのElectronのサンプルアプリケーション「Electron TODO App」「Electron 最小限のテンプレート」は、「 require('electron');」をしている箇所がないため、何か根本的に間違えているような気はしております。
-なお、最終的には前回（2/15）Electronでalert表示が出来ないため、代案としてdialog表示をさせたいと考えており、下記のように作成したいと考えております。
-```javascript
-const { remote } = require('electron');
-const { dialog } = remote;
-window.remote = remote;
-window.dialog = dialog;
-function doit() {
-  let w = remote.getCurrentWindow();
-  let re = dialog.showMessageBox(w, {
-    title:'Message',
-    message:'これがメッセージボックスの表示です。',
-    detail: 'OKすると閉じます。'
+何がおかしいのか、ご指摘いただけると助かります。
-  });
-  console.log(re);
+以上、よろしくお願いします。
-}
-```
-もし、Monacaでdialogを表示させる方法として、「require('electron');」以外の方法があればご教授いただきたくよろしくお願いします。

dialog部ソースコードの追加

2021/02/25 04:42

投稿

T_Furuta

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -460,6 +460,8 @@
 なお、最終的には前回（2/15）Electronでalert表示が出来ないため、代案としてdialog表示をさせたいと考えており、下記のように作成したいと考えております。
+```javascript
 const { remote } = require('electron');
 const { dialog } = remote;
@@ -468,6 +470,28 @@
 window.dialog = dialog;
+function doit() {
+  let w = remote.getCurrentWindow();
+  let re = dialog.showMessageBox(w, {
+    title:'Message',
+    message:'これがメッセージボックスの表示です。',
+    detail: 'OKすると閉じます。'
+  });
+  console.log(re);
+}
+```
 もし、Monacaでdialogを表示させる方法として、「require('electron');」以外の方法があればご教授いただきたくよろしくお願いします。