Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@basicactor

Electronの始め方 on Mac

Electronのインストール

$ npm -g install electron-prebuilt

失敗した場合は、以下を試す(node.jsの最新版をインストール)

$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド

参考:https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289

アプリ作成

公式サイトで紹介されてるサンプルをダウンロードするのもあり

$ git clone https://github.com/electron/electron-quick-start

自分で一から作る場合は以下の手順

$ take myfirstapp #take = mkdir + cd
$ npm init
package.json
{
  "name": "myfirstapp",
  "version": "1.4.13",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}
main.js

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

function createWindow () {
  // ブラウザウインドウの作成
  win = new BrowserWindow({width: 800, height: 600})

  // アプリの index.html を読み込む
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
}

app.on('ready', createWindow)
index.html
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
      <h1>Hello World!</h1>
      node <script>document.write(process.versions.node)</script>、
      Chrome <script>document.write(process.versions.chrome)</script>、
      Electron <script>document.write(process.versions.electron)</script>を使用しています。
    </body>
  </html>

ディレクトリ構成
PythonApp
├── index.html
├── main.js
└── package.json

アプリの実行

//どちらでもok
$ npm start
$ electron .

問題なければ、このようなアプリが立ち上がります。

Mac
スクリーンショット 2018-04-05 1.23.33.png

Windows
electron-windows.jpg

参考:https://qiita.com/yoshizaki_kkgk/items/da9711c26e71522ad289
参考:https://electronjs.org/docs/tutorial/first-app

もし、unable to find Electron app at /Users/.... と出たら...
"main":"main.js"の部分に、存在してないファイル名を書いてる可能性があります。

package.json
#存在してないファイル名を書いてる可能性あり
"main": "main.js"

参考:https://qiita.com/gekkoukisi/items/169048df54855e75fe77

ファイルをパックする場合

asarは、圧縮せずに複数ファイルを一つのファイルにしてくれる


// asarをインストール
$ npm install -g asar 

//アーカイブの作成
$ asar pack myfirstapp archive.asar

//アーカイブの展開
$ asar extract archive.asar output

参考:https://qiita.com/niusounds/items/2739fdbc26df03421bfe

appを配布する

electron-packagerをインストール

$ npm i electron-packager -g

Macからwindows向けのものをパッケージングするためには、”wine”が必要

//wine をインストールするために必要
$ brew cask install xquartz

$ brew install wine
$ brew install winetricks # これをインストールしないと、wineのupdateメッセージが出たまま消えなくなって詰まる。

MacとWindows向けにパッケージングする場合は以下

$ electron-packager myfirstapp --platform=darwin,win32 --arch=x64 --electronVersion=1.4.13

引数の説明
-platform ・・・ all, linux, win32, darwin のいずれかを選択。複数入れる場合はカンマ区切り
-arch ・・・ all, ia32, x64 のいずれかを選択。
-electronVersion ・・・ Electronのバージョン(1.4.13)を指定します。(2018.4.5現在最新)

問題なければ、以下のディレクトリが作られます。
myfirstapp-darwin-x64
myfirstapp-win32-x64

参考:https://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What are the problem?