Help us understand the problem. What is going on with this article?

Electronの始め方 on Mac

More than 1 year has passed since last update.

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

basicactor
独学でプログラミングを学び始めてから早くも2年が経ちました。 //かじった言語:R, Python, HTML, SCSS, JS, Ruby, PHP, SQL /n //かじったフレームワーク:Ruby on Rails, Flask //かじったサーバー:AWS //かじったデータベース:MySQL, Postgresql 現在はC#とMQL5にはまってます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした