Electron은 뭔가 재미있을 것 같습니다.

최근 글꼴로 유행하고 있는 Electron을 만져 보았습니다.

Electron은 크로스 플랫폼 데스크톱 앱을 JavaScript, HTML, CSS로 구축할 수 있는 프레임워크입니다. Slack 데스크톱 앱이나 Visual Studio Code 등 개발자에게는 친숙한 앱도 Electron으로 만들어져 있습니다.

최근 한 웹 앱을 React로 개발하고 앱의 성질상 브라우저를 계속 닫지 않고 사용하고 싶었습니다만, 브라우저를 시작하지 않고 하는 습관이 없는 유저 여러분은 아무래도 용사가 끝나면 닫혀버려 앱의 편리함을 누릴 수 없었습니다.
그래서 이번에 만든 웹 앱의 자산을 살리면서 PC에 상주하는 데스크톱 앱(브라우저 앱)을 만들고 싶었기 때문에 Electron을 시험해보기로 했습니다. 그렇다고 해도 단순히 전술의 유저 여러분을 위해서 「윈도우의×버튼을 눌러도 닫지 않는다」라고 구조를 만들고 싶었을 뿐입니다만(웃음)

최근에는 어떤 프레임워크나 툴을 공부해도 초보자용 샘플 앱이 충실하기 때문에 매우 고맙습니다. Electron도 어쩌면 새지 않고 "Electron Quick Start"라는 앱이 준비되어 있기 때문에 그것을 이용하게 하기로 했습니다. GitHub에서 공개되어 있으므로 clone하여 실행해 보겠습니다.

Electron 앱을 움직일 때까지 단 5분!

그렇다고해도 Node.js와 git이 설치되어 있다고 가정합니다 (·ω·)
자 4의 5 말하지 않고 해보겠습니다. 절차는 단지 이만큼↓

# GitHubからelectron-quick-startを取得 
$ git clone https://github.com/electron/electron-quick-start
# リポジトリのディレクトリに移動
$ cd electron-quick-start
# 依存ライブラリをインストール
$ npm install
# Electronアプリを起動
$ npm start

오, 오, 그래!


너무 쉽습니다! ?

그런데 이것뿐이라면 예술이 없기 때문에 조금 소스를 재검토해 보겠습니다. 지금은 단순히 로컬 파일을 표시하고 있으므로 브라우저처럼 외부 웹 사이트를 표시하도록 변경합니다.

clone한 소스를 보시면 알 수 있습니다만, 제대로 코드가 기술되고 있는 것은 electron-quick-start/main.js 뿐입니다. 이것도 초보자에게는 고맙다. 이것만 심플하면 어디에서 무엇을 잘 해주고 있는가가 매우 신경이 쓰입니다만, 이 단계에서는 우선 신경쓰지 않기로 합니다.

electron-quick-start/main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// 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.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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', function () {
  // On OS X 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 (mainWindow === null) {
    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.

코드량도 적기 때문에 무엇을 하고 있는지 왠지 분위기는 알겠네요.createWindow 안에 있는 mainWindow.loadFile('index.html') 에서 윈도우에 표시할 HTML 파일을 지정합니다. 이것을 외부 웹 페이지를 표시하도록 변경하려면 다음과 같이 다시 작성하십시오.

mainWindow.loadURL('https://www.visionarts.co.jp/')

htps : // / ぇct 롱 js. 오 rg / cs / thor l / sekuri ty 그럼 단순히 ↑처럼 loadURL하면 경우에 따라서는 XSS의 위험이 있기 때문에 주의하라고 쓰고 있습니다만, 이번은 시험이므로 그런 것은 몰랐다고 합니다.

그리고 재부팅



디폴트 윈도우 사이즈라면 당사의 웹 사이트는 맞지 않았습니다(;^ω^)
사이즈를 바꾸고 싶으면 BrowserWindow 생성시에 건네주는 객체의 width 프로퍼티과 height 프로퍼티에 pixel치로 지정합니다.

// デフォルトサイズは 800x600
mainWindow = new BrowserWindow({width: 800, height: 600})

BrowserWindow에는 많은 다른 속성이 있습니다. 자세한 내용은 아래를 참조하십시오.
htps : // 기주 b. 이 m/에ぇct 론/에ぇct 론/bぉb/마s r/도 cs/아피/b로 w세 r-우우 w. md

그래서 이번에는 우선 Electron 앱을 움직이는 것에 초점을 맞추어 보았습니다.
다음 번에는 조금 더 가고 싶습니다.

그럼 또.