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

MyMemoWiki

「Electron」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
81行目: 81行目:
 
*Node.jsとWebページのブリッジ
 
*Node.jsとWebページのブリッジ
 
*
 
*
 +
<pre>
 +
window.addEventListener('DOMContentLoaded', () => {
 +
    const replaceText = (selector, text) => {
 +
      const element = document.getElementById(selector);
 +
      if (element) {
 +
          element.innerText = text;
 +
      }
 +
    }
 +
 
 +
    for (const type of ['chrome', 'node', 'electron']) {
 +
      replaceText(`${type}-version`, process.versions[type])
 +
    }
 +
  })
 +
</pre>

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>Sample</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body style="background: white;">
  9.     <h1>Hello World!</h1>
  10.     <p>
  11.         We are using Node.js <span id="node-version"></span>,
  12.         Chromium <span id="chrome-version"></span>,
  13.         and Electron <span id="electron-version"></span>.
  14.     </p>
  15. </body>
  16. </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=32358」から取得

© 2006 矢木浩人