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

MyMemoWiki

「Electron」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
54行目: 54行目:
 
})
 
})
 
</pre>
 
</pre>
−
====Webページの作成====
+
====Webページ(index.html)の作成====
 
----
 
----
 
*index.html
 
*index.html
 +
*アプリケーション初期化時に一度だけ表示されるページ
 +
*このページがレンダープロセスを表現する
 
<pre>
 
<pre>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
66行目: 68行目:
 
</head>
 
</head>
 
<body style="background: white;">
 
<body style="background: white;">
−
     <h1>Hello</h1>
+
     <h1>Hello World!</h1>
 +
    <p>
 +
        We are using Node.js <span id="node-version"></span>,
 +
        Chromium <span id="chrome-version"></span>,
 +
        and Electron <span id="electron-version"></span>.
 +
    </p>
 
</body>
 
</body>
 
</html>
 
</html>
 
</pre>
 
</pre>
 +
====プレロードスクリプト(preload.js)====
 +
----
 +
*Node.jsとWebページのブリッジ
 +
*

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

| 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ページのブリッジ
「https://www.typea.info/tips_/index.php?title=Electron&oldid=32357」から取得

© 2006 矢木浩人