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

MyMemoWiki

「Electron」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
167行目: 167行目:
 
*https://blog.ikappio.com/electron-forge-make-for-windows-from-macos/
 
*https://blog.ikappio.com/electron-forge-make-for-windows-from-macos/
 
*ビルド環境と同じパッケージをデフォルトで生成するようだ。
 
*ビルド環境と同じパッケージをデフォルトで生成するようだ。
 +
====[[Windows]]配布パッケージの作成====
 +
----
 
*[[Mac]] で [[Windows]]用のパッケージ出力には、monoなどインストールが必要なようなので、[[Windows]]同様の手順でパッケージを作成。
 
*[[Mac]] で [[Windows]]用のパッケージ出力には、monoなどインストールが必要なようなので、[[Windows]]同様の手順でパッケージを作成。
  
 
[[File:electron_forge_win.png|400px]]
 
[[File:electron_forge_win.png|400px]]

2021年5月5日 (水) 10:08時点における版

| Node.js | JavaScript | TypeScript | npm | Flutter |

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.js)の作成

  • mainスクリプトは、Electronアプリケーションのエントリーポイント
  • Mainプロセスを開始し、Mainプロセスはアプリケーションのライフサイクルをコントロールする
  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('path')
  3.  
  4. function createWindow() {
  5.     const win = new BrowserWindow({
  6.         width:400,
  7.         height:300,
  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ページのブリッジ
  • Node.js全体を安全に公開するのではなく、特定のAPIや動作をWebページに公開することができる
  • 以下ではprocessオブジェクトからバージョン情報を読み取りページを更新する
  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.   })

package.json

  1. {
  2.   "name": "electron_sample",
  3.   "version": "1.0.0",
  4.   "main": "main.js",
  5.   "scripts": {
  6.     "start": "electron .",
  7.   },
  8.       :
  9. }

起動

  1. npm start

Electron sample start.png

パッケージングと配布

Electron Forge

  • もっともシンプルで素早く配布するには、Electron Forgeを利用する
Electron ForgeをアプリケーションフォルダにImport
  1. $ npm install --save-dev @electron-forge/cl
  2. $ npx electron-forge import
  3. ✔ Checking your system
  4. ✔ Initializing Git Repository
  5. ✔ Writing modified package.json file
  6. ✔ Installing dependencies
  7. ✔ Writing modified package.json file
  8. ✔ Fixing .gitignore
  9.  
  10.  
  11. We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
  12.  
  13. Thanks for using "electron-forge"!!!
Mac 配布パッケージを作成
  • out フォルダに出力される
  1. $ npm run make
  2.  
  3. > fx_sample@1.0.0 make
  4. > electron-forge make
  5.  
  6. ✔ Checking your system
  7. ✔ Resolving Forge Config
  8. We need to package your application before we can make it
  9. ✔ Preparing to Package Application for arch: x64
  10. ✔ Preparing native dependencies
  11. ✔ Packaging Application
  12. Making for the following targets: zip
  13. ✔ Making for target: zip - On platform: darwin - For arch: x64

Electron forge mac.png

Windows配布パッケージの作成

  • Mac で Windows用のパッケージ出力には、monoなどインストールが必要なようなので、Windows同様の手順でパッケージを作成。

Electron forge win.png

「https://www.typea.info/tips_/index.php?title=Electron&oldid=32438」から取得

© 2006 矢木浩人