16
16

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 5 years have passed since last update.

Electronの始め方 on Mac

Last updated at Posted at 2018-04-05

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

16
16
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
16
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?