WebStormでElectronを始める手順

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

# ※追記（2020/4/8）
最近この記事を元にElectronを作ってみたら、デバッグが起動しなくなってしまったので、
新しく「[WebStormでElectronの始め方とアプリの作り方](https://qiita.com/kaluna/items/5a65ec304b88690d4fe7)」という記事を書きました。動かない場合はこちらを参照してみてください。

# 目次
1. 環境
2. WebStormでの準備
3. index.htmlとmain.jsファイルを作る
4. デバッグの設定
5. 参考サイト
 
#1. 環境
- Windows10 Pro
- Node.js : v10.15.3
- WebStorm : 2019.1.3

#2. WebStormでの準備
1. Node.jsは既にインストールされている状態で、WebStormを起動します。
起動したら、`create project` を選択します。
<img width="344" alt="ws01.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f85034f9-90f8-b157-289b-81c163b44c7f.png">

2. New Project画面で、`Node.js` を選択し、Locationに任意のプロジェクトを作ります。（ここでは`electron_webstorm` としています）
<img width="584" alt="ws02.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c9efad53-0f35-fa42-d13f-04db0bf742df.png">

3. `create` を選択すると、初期画面が表示されます。
<img width="646" alt="ws03.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8ef288b9-01b5-73c9-581f-75cdf8b7f49c.png">

4. `File > Settings...` を選択し、設定画面を開きます。
<img width="634" alt="ws04.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/3906f844-75a2-429c-170a-013f8ba9a1ff.png">

5. `Language & Frameworks > Node.js and NPM` を選択します。
<img width="755" alt="ws05.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/7b877305-bbb8-9127-7208-701940d1788b.png">

6. `+` を選択して、Available Packages画面の検索枠に `electron` と入力し、リスト内の`electron`を選択します。
<img width="694" alt="ws06.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/da2236ca-face-21d3-c281-a0ce64424b35.png">

7. `INSTALL PACKAGE` を選択して、インストールします。
`Package 'electron' installed successfully` と出ればインストールできていますので、画面を閉じます。
8. `package.json` に `dependencies` が追加され、`electron` という項目が増えています。同様に、`node_modules`に、`electron` が追加されていることが確認できます。
<img width="626" alt="ws080.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f09b2f23-e3e2-da0a-f336-cc2c0089af71.png">

#3. index.htmlとmain.jsファイルを作る
1. WebStormでここまで作成した場合、`package.json` には、`mainファイル` が `index.js` と指定されていますが、Electronのサイトでは `main.js` がデフォルトみたいなので、ここの記載を変更します。
<img width="619" alt="ws08.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f486d649-abfd-5aba-dfe1-fc91324a0bde.png">

2. `index.html` と `main.js` ファイルを作る
<img width="932" alt="ws09.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5d3a746e-5d6c-609f-96ba-1789e66194ef.png">

3. Electronのサイトから、ベースとなるindex.htmlの中身とmain.jsの中身をコピペします。
> コードは [Writing Your First Electron App](https://electronjs.org/docs/tutorial/first-app) から引用

```javascript: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.
```

```html: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. デバッグの設定
1. 画面右上の `ADD CONFIGURATION...` を選択し、`Run/Debug Configurations` 画面を開く
2. `+` を押して、Node.jsのテンプレートを選び新規デバッグを作成します。
<img width="807" alt="ws10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/0e0783ae-ad0f-b19c-5801-e47100de1b83.png">

3. `Node interpreter` の入力欄の右にある`...`を選択し、開いた画面の `+` を選択し、`Add Local...` を選択して、最初に追加したElectronの `electron.cmd` を、node_moduleより追加します。
<img width="319" alt="ws11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5c947d68-70a0-f678-25e4-6f12b897e4df.png">

4. `Node parameters` に `.` を入力
5. `Working directory` は変更なし
6. `JavaScript file` に `main.js`を入力
7. `Application parameters` に `--remote-debugging-port=9222`を入力
8. `Environment variables` は変更なし
9. `OK` を選択して画面を閉じます、
<img width="807" alt="ws12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/60f760c7-7337-c284-e13d-519d4a20cc83.png">

10. 画面右上の歯車アイコンを押すとデバッグウィンドウが立ち上がり、`Hello World` の画面が出れば成功です。お疲れ様でした。
<img width="590" alt="ws13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/b1fee340-2495-2116-6231-ee3a428ac2d1.png">

#5. 参考サイト
- [Writing Your First Electron App
](https://electronjs.org/docs/tutorial/first-app)
- [Getting started with Electron in WebStorm](https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/)
- [WebStormでElectronのデバッグする方法 （Windows版, Debug）](https://devlights.hatenablog.com/entry/2016/11/07/185205)
- [IntelliJ(or WebStorm)でElectron開発環境を準備する](https://qiita.com/shivase/items/d92df454e2978968d36d)