웹 애플리케이션을 하나로 정리해 주는 「역」에 감명을 받았습니다.
단지 커스텀 앱이 아직(?) 같기 때문에, Electron 과 Vue 의 습작도 겸해 자작해 보았습니다.

다른 점은 URL을 입력하고 아이콘을 선택하는 방법이므로 도마이너 웹 응용 프로그램이나 Yahoo! 톱 페이지와 같은 웹 페이지를 등록 할 수 있습니다.

메커니즘

구조로서는, 서두에 쓴 것처럼 Electron-vue 로 만들고 있습니다.
브라우저는 <webview> 태그를 display:block; 와 display:none; 로 전환하고 있습니다.

electron-vue를 시작하는 방법

모든 디렉토리에서 쓰기를 실행합니다.project-name 의 부분은 임의 설정 가능.

vue init simulatedgreg/electron-vue project-name

? Application Name sample
? Application Id sample.com
? Application Version 0.0.1
? Project description sample
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? packager
? author axcelwork

   vue-cli · Generated "project-name".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd vue-electron-sample
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)

애플리케이션의 이름과 버전, Sass를 사용하거나 플러그인은 무엇을 사용하는지 등에 대답하면 프로젝트가 생성됩니다.
유용합니다

창 크기 저장

응용 프로그램을 사용하고 있고 윈도우 크기를 저장하고 다음에 열 때도 같은 크기로 사용하고 싶네요.
이런 식으로 하면 윈도우 사이즈의 보존을 할 수 있습니다.

/src/main/index.js

const path = require('path');
const fs = require("fs");

// 中略

// ウィンドウサイズを保存するファイル
let boundsFile = path.join(
  app.getPath('userData'), 'bounds.json'
);
// 保存しておいたウィンドウサイズの取得
let bounds = null;
try {
  bounds = JSON.parse(
    fs.readFileSync(boundsFile, 'utf8')
  );
} catch (e) {
  bounds = { "width": 1024, "height": 768 };
}

function createWindow () {
  mainWindow = new BrowserWindow(Object.assign(
    bounds, {
      useContentSize: true,
      frame: false
    }
  ));

  mainWindow.loadURL(winURL)

  const menu = Menu.buildFromTemplate(templateMenu);
  Menu.setApplicationMenu(menu);

  mainWindow.on('close', () => {
    // ウインドウサイズを書き込む
    fs.writeFileSync(
      boundsFile, JSON.stringify(mainWindow.getBounds())
    );
  });

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

설정 파일

등록한 페이지의 정보는 설정 파일로 저장하고 싶으므로 electron-json-storage를 사용하고 있습니다.

npm install --save-dev electron-json-storage

사용법은 이런 느낌. 내용은 JSON.

획득

storage.get("config", function(error, data) {
  console.log(data)
});

설정

storage.set("config", data, function(error) {
  if (error) throw error;
});

삭제

storage.remove("config", function(error) {
  if (error) throw error;
});

remove는 파일 자체가 삭제되므로 주의.

아이콘 만들기

Mac이라면 아이콘의 작성은 편하다. Windows는 조금 모릅니다 ... 실례합니다

모든 디렉토리에 icon.iconset 디렉토리를 만들고 아이콘 이미지를 저장합니다.
저장하는 종류와 파일명은 다음과 같다.


파일 이름
해상도


icon_16x16.png
16x16

이콘_16x16@2x. pg
32x32

icon_32x32.png
32x32

이콘_32x32@2x. pg
32x32

icon_128x128.png
128x128

이콘_128x128@2x. pg
256x256

icon_256x256.png
256x256

이콘_256x256@2x. pg
512x512

icon_512x512.png
512x512

이콘_512x512@2x. pg
1024x1024


그래서이 모든 디렉토리로 이동하여 다음을 실행하십시오.

iconutil -c icns icon.iconset

이제 icon.icns가 만들어지므로 /Users/xxxx/project/project-name/build/icons에 저장됩니다.

Windows 용 패키지

Mac에서 Windows를 패키지하려면 Wine가 별도로 필요합니다.
brew 에서 Wine 를 설치합니다.

brew install wine

다른 기사를 보고 있으면, 뭔가 실패한 것 같은 것이 쓰여졌습니다만, 제 경우에는 운이 좋았는지 한 번에 설치할 수 있었습니다.

이 상태에서, 미리 준비되어 있는 npm script 로부터 Windows 의 패키지를 실시하면(자) 순조롭게 패키징이 생겼습니다.

Github

axcelwork/ideal에 업로드했습니다.
releases에서 Windows와 Mac을 모두 사용할 수 있습니다.

향후 예정

같은 도메인을 그룹화하고 싶습니다

아이콘 변경

"뒤로""진행"필요할까요 ...