More than 3 years have passed since last update.

WebStormでElectronを始める手順

Last updated at 2020-04-08Posted at 2019-07-09

はじめに（2020/4/8 追記）

展示会やデジタルサイネージなど、Webとは異なり、特定のPCでの動作を想定したアプリケーションの作成は、Adobe Air や Unityなどで作成する事がありますが、最近はJavaScriptだけで色々出来るようになってきたので、Electronを使ってアプリケーションを作成したいと思いました。IDEは、WebStormを使っているので、WebStormでElectronを開発するための手順を書いています。

※追記（2020/4/8）

最近この記事を元にElectronを作ってみたら、デバッグが起動しなくなってしまったので、
新しく「WebStormでElectronの始め方とアプリの作り方」という記事を書きました。動かない場合はこちらを参照してみてください。

INSTALL PACKAGE を選択して、インストールします。
Package 'electron' installed successfully と出ればインストールできていますので、画面を閉じます。
package.json に dependencies が追加され、electron という項目が増えています。同様に、node_modulesに、electron が追加されていることが確認できます。

#3. index.htmlとmain.jsファイルを作る

WebStormでここまで作成した場合、package.json には、mainファイル が index.js と指定されていますが、Electronのサイトでは main.js がデフォルトみたいなので、ここの記載を変更します。

index.html と main.js ファイルを作る

Electronのサイトから、ベースとなるindex.htmlの中身とmain.jsの中身をコピペします。

コードは Writing Your First Electron App から引用

main.js

const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

#4. デバッグの設定

画面右上の ADD CONFIGURATION... を選択し、Run/Debug Configurations 画面を開く
+ を押して、Node.jsのテンプレートを選び新規デバッグを作成します。

Node interpreter の入力欄の右にある...を選択し、開いた画面の + を選択し、Add Local... を選択して、最初に追加したElectronの electron.cmd を、node_moduleより追加します。

Node parameters に . を入力
Working directory は変更なし
JavaScript file に main.jsを入力
Application parameters に --remote-debugging-port=9222を入力
Environment variables は変更なし
OK を選択して画面を閉じます、

画面右上の歯車アイコンを押すとデバッグウィンドウが立ち上がり、Hello World の画面が出れば成功です。お疲れ様でした。

#5. 参考サイト

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

WebStormでElectronを始める手順

はじめに（2020/4/8 追記）

※追記（2020/4/8）

目次