7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

WebStormでElectronの始め方とアプリの作り方

Posted at

#はじめに
以前に書いたWebStormでElectronを始める手順を元に、自分で設定してみたところ、
バージョンの違いで、実行できなくなってしまったので、
今回はアプリを作るまでを説明します。

#目次

  1. 環境
  2. WebStormでの準備
  3. electronパッケージの追加
  4. index.htmlとmain.js
  5. Electronの実行と確認
  6. 作ったElectronをアプリにする
  7. electron-packagerパッケージの追加
  8. アプリとして書き出す

#1. 環境

  • Windows10 Pro
  • Node.js : v12.16.1
  • WebStorm : 2019.3.3
  • NPM : 6.13.4

#2. WebStormでの準備
WebStormを起動して、新しいプロジェクトを作成します。
File > New > Project...を選択。
01.PNG
Node.jsを選び、Locationに、プロジェクトを作る場所を選択します。

#3. electronパッケージの追加
プロジェクトを作ったら、electronパッケージを追加します。
File > Settings...を選択。
開いたウィンドウのLanguage & Frameworks内のNode.js and NPMを選択。
02.PNG
ウィンドウの右側真ん中あたりの+を選択。


03.PNG 検索バーに`electron`と入力して、一覧から`electron`を選択。 `INSTALL PACKAGE`を押すと、パッケージのインストールが始まります。 緑のバーにsuccess見たいなのが出たらインストール完了です。 *** 05.PNG ウィンドウを閉じて、`package.json`を開くと、`dependencies`に`electron`が追加されていればオッケーです。

#4. index.htmlとmain.jsの追加
package.jsonと同じ場所にindex.htmlmain.jsを作ります。
それぞれの記述内容は以下になります。

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

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </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>

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

function createWindow () {
  // Create the browser window.
  const 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()
}

// 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.whenReady().then(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 (BrowserWindow.getAllWindows().length === 0) {
    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.

package.jsonを開き、mainの内容を変更します。

package.json
"main":"main.js"

#5. Electronの実行と確認
08.PNG
Electronで実行をするために、package.jsonscriptsの項目に、以下のコマンドを追記します。

package.json
"run":"electron ."

"run"の文字は"start"や、"debug"のような、好きな文字で大丈夫です。
追記すると、行の左側に、再生ボタンみたいなのが出ますので、それを選択。
09.PNG
プルダウンから、RunDebugを選択すると、Electronが起動し、
index.htmlの内容が表示されます。(何故か背景は黒くて文字が見にくいですが)
10.PNG
画面の設定などはmain.jsで行えます。
main.jsではサイズやフルスクリーン、開発画面の非表示などの変更ができます。


一度、実行を行うと、右上にショートカットが選べるようになりますので、
次回からは、package.jsonの画面を開かなくても、ここから実行できるようになります。
11.PNG

#6. 作ったElectronをアプリにする
WebStormからの実行が確認されたので、最終的にアプリにするために、
electron-packagerパッケージを追加します。

#7. electron-packagerパッケージの追加
electronパッケージと同様に、Node.js and NPMから+を選択して、
electron-packagerをインストールします。
12.PNG

#8. アプリとして書き出す
package.jsonを開き、``にelectron-packagerが追加されているのを確認します。
13.PNG

アプリにするためのコマンドをscriptsに追記します。

package.json
"build":"electron-packager . electron-helloworld --platform=win32 --arch=x64 --electron-version=8.2.1 --overwrite"

このbuildという名前も任意に変えることができます。
electron-packagerのパラメータとパラメータオプションは以下になります(一部)

パラメータ 説明
sourcedir . アプリ化したいディレクトリの場所
appname electron-helloworld アプリケーション名
オプション 説明
--platform win32 プラットフォームの選択(all/darwin/linux/mac/win32)
--arch x64 32bitや64bitなどのアーキテクチャの指定(all/ia32/x64/armv7l/arm64/mips64el)
--electron-version 8.2.1 Electronのパッケージのバージョン。package.jsonを参照
--overwrite 同じディレクトリがあったら上書き

上記の以外にもアイコンを指定したり、保存先を指定したりといったオプションがありますので、
詳しくはelectron-packagerのgithubをご確認ください。

#9. 参考サイト

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?