| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「Electron」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
64行目: 64行目:
 
<head>
 
<head>
 
     <meta carhset="UTF-8">
 
     <meta carhset="UTF-8">
−
     <title>Sample</title>
+
     <title>Electron Sample</title>
 
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 
</head>
 
</head>
 
<body style="background: white;">
 
<body style="background: white;">
−
     <h1>Hello World!</h1>
+
     <h2>Version</h2>
−
     <p>
+
     <div>
−
         We are using Node.js <span id="node-version"></span>,
+
         We are using Node.js <span id="node-version"></span>
 +
    </div>
 +
    <div>
 
         Chromium <span id="chrome-version"></span>,
 
         Chromium <span id="chrome-version"></span>,
−
         and Electron <span id="electron-version"></span>.
+
    </div>
−
     </p>
+
    <div>
 +
         Electron <span id="electron-version"></span>.
 +
     </div>
 
</body>
 
</body>
 
</html>
 
</html>
 
</pre>
 
</pre>
 +
 
====プレロードスクリプト(preload.js)====
 
====プレロードスクリプト(preload.js)====
 
----
 
----

2021年5月4日 (火) 03:41時点における版

| Node.js | JavaScript | TypeScript | npm |

Electron

Fiddle

Required

基本的なアプリの作成

  • Electronアプリケーションは本質的にNode.jsアプリケーション
  • Electronアプリケーションは、package.json から開始される

プロジェクトの作成とElectronのインストール

  1. mkdir my-electron-app && cd my-electron-app
  2. npm init -y
  3. npm i --save-dev electron

mainスクリプトファイルの作成

  • mainスクリプトは、Electronアプリケーションのエントリーポイント(例えば,main｡js)
  • Mainプロセスを開始し、Mainプロセスはアプリケーションのライフサイクルをコントロールする
  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('path')
  3.  
  4. function createWindow() {
  5.     const win = new BrowserWindow({
  6.         width:800,
  7.         height:600,
  8.         webPreferences:{
  9.             preload: path.join(__dirname, 'preload.js')
  10.         }
  11.     })
  12.     win.loadFile('index.html')
  13. }
  14.  
  15. app.whenReady().then(() => {
  16.     createWindow()
  17.  
  18.     app.on('activate', () =>{
  19.         if (BrowserWindow.getAllWindows().length == 0) {
  20.             createWindow()
  21.         }
  22.     })
  23. })
  24.  
  25. app.on('window-all-closed', () => {
  26.     if (process.platform !== 'darwin') {
  27.         app.quit()
  28.     }
  29. })

Webページ(index.html)の作成

  • index.html
  • アプリケーション初期化時に一度だけ表示されるページ
  • このページがレンダープロセスを表現する
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta carhset="UTF-8">
  5.     <title>Electron Sample</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body style="background: white;">
  9.     <h2>Version</h2>
  10.     <div>
  11.         We are using Node.js <span id="node-version"></span>
  12.     </div>
  13.     <div>
  14.         Chromium <span id="chrome-version"></span>,
  15.     </div>
  16.     <div>
  17.         Electron <span id="electron-version"></span>.
  18.     </div>
  19. </body>
  20. </html>

プレロードスクリプト(preload.js)

  • Node.jsとWebページのブリッジ
  1. window.addEventListener('DOMContentLoaded', () => {
  2.     const replaceText = (selector, text) => {
  3.       const element = document.getElementById(selector);
  4.       if (element) {
  5.           element.innerText = text;
  6.       }
  7.     }
  8.   
  9.     for (const type of ['chrome', 'node', 'electron']) {
  10.       replaceText(`${type}-version`, process.versions[type])
  11.     }
  12.   })
「https://www.typea.info/tips_/index.php?title=Electron&oldid=32359」から取得

© 2006 矢木浩人