Electron에서 Mac 데스크톱 앱 만들기
시작에 이런 느낌의 것을 만듭니다.
환경 구축
Node.js
Electron의 백엔드 처리에는 Node.js가 사용되고 있습니다.
이 근처를 참고하십시오.
Windows : Node.js / npm 설치 (for Windows)
Mac : Mac에 node.js를 설치하는 단계
우분투 : 우분투에 최신 Node.js를 어려움없이 설치
앱 만들기
프로젝트 만들기
Electron 앱 프로젝트를 만듭니다.
첫 번째 디렉토리 구성은 다음과 같이
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
프로젝트 초기화
npm을 사용하여 프로젝트를 초기화합니다.package.json 가 생성됩니다.
$ cd PythonApp
$ npm init
$ npm i -D electron
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
애플리케이션 구현
src/ 안에 응용 프로그램 소스를 넣습니다.
필요한 것은 다음 세 가지입니다.
* package.json
*index.js
*index.html
package.json
필요한 파일입니다. main의 파일은 진입 점이 될 파일 이름을 지정합니다.
{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
index.js
엔트리 포인트가되는 JS 파일.
앱 처리는 여기에서 수행됩니다.
// Electronの読み込み
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
// mainWindow変数の初期化
var mainWindow = null;
// MacOS(darwin)でない場合にはアプリを終了する
app.on('window-all-closed', function() {
if(process.platform != 'darwin')
app.quit();
});
// 画面を表示．index.htmlを読み込む
// Close処理を行う
app.on('ready', function() {
// 画面表示
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
메인 윈도우로 움직이는 HTML 파일
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Electron Read us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>
응용 프로그램은 이상입니다.
디렉토리 구성의 확인입니다.
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
| ┠- index.html (メインウィンドウ)
| ┠- index.js (エントリーポイント)
|
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
애플리케이션 실행
프로젝트 디렉토리 ( PythonApp )에서 다음 명령을 실행하면 앱을 실행할 수 있습니다.
$ npx electron src
애플리케이션 패키징
지금은 소스 코드이므로 응용 프로그램으로 패키징합니다.
Mac
npx electron-packager src PythonApp --platform=darwin --arch=x64 --overwrite
Windows
npx electron-packager src PythonApp --platform=win32 --arch=x64 --overwrite
Source Code
참고문헌
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
Reference
이 문제에 관하여(Electron에서 Mac 데스크톱 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sasayabaku/items/2b9bb646f1636528ff5b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
프로젝트 만들기
Electron 앱 프로젝트를 만듭니다.
첫 번째 디렉토리 구성은 다음과 같이
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
프로젝트 초기화
npm을 사용하여 프로젝트를 초기화합니다.
package.json 가 생성됩니다.$ cd PythonApp
$ npm init
$ npm i -D electron
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
애플리케이션 구현
src/ 안에 응용 프로그램 소스를 넣습니다.필요한 것은 다음 세 가지입니다.
* package.json
*index.js
*index.html
package.json
필요한 파일입니다.
main의 파일은 진입 점이 될 파일 이름을 지정합니다.{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
index.js
엔트리 포인트가되는 JS 파일.
앱 처리는 여기에서 수행됩니다.
// Electronの読み込み
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
// mainWindow変数の初期化
var mainWindow = null;
// MacOS(darwin)でない場合にはアプリを終了する
app.on('window-all-closed', function() {
if(process.platform != 'darwin')
app.quit();
});
// 画面を表示．index.htmlを読み込む
// Close処理を行う
app.on('ready', function() {
// 画面表示
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
메인 윈도우로 움직이는 HTML 파일
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Electron Read us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>
응용 프로그램은 이상입니다.
디렉토리 구성의 확인입니다.
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
| ┠- index.html (メインウィンドウ)
| ┠- index.js (エントリーポイント)
|
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
애플리케이션 실행
프로젝트 디렉토리 ( PythonApp )에서 다음 명령을 실행하면 앱을 실행할 수 있습니다.
$ npx electron src
애플리케이션 패키징
지금은 소스 코드이므로 응용 프로그램으로 패키징합니다.
Mac
npx electron-packager src PythonApp --platform=darwin --arch=x64 --overwrite
Windows
npx electron-packager src PythonApp --platform=win32 --arch=x64 --overwrite
Source Code
참고문헌
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
Reference
이 문제에 관하여(Electron에서 Mac 데스크톱 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sasayabaku/items/2b9bb646f1636528ff5b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npx electron src
지금은 소스 코드이므로 응용 프로그램으로 패키징합니다.
Mac
npx electron-packager src PythonApp --platform=darwin --arch=x64 --overwrite
Windows
npx electron-packager src PythonApp --platform=win32 --arch=x64 --overwrite
Source Code
참고문헌
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
Reference
이 문제에 관하여(Electron에서 Mac 데스크톱 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sasayabaku/items/2b9bb646f1636528ff5b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
Reference
이 문제에 관하여(Electron에서 Mac 데스크톱 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sasayabaku/items/2b9bb646f1636528ff5b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
