Electron Vue + Puppeteer로 만드는 편리한 데스크톱 앱

안녕하세요! HAL 어드벤트 캘린더의 10일째를 담당하는 나고야의 해가 없는 학생입니다.
헵포코 엔지니어의 스스로도 Electron Vue를 사용하는 것으로 2,3일에 데스크탑 앱을 만들 수 있었으므로 그 훌륭함을 공유하고 싶습니다.

무엇을 만들었는가

portan이라는 귀여운 이름의 Webview 앱을 만들었습니다.

「뭐야 Webview인가」
그리고 지금 몇 명이 생각했을 것입니다.

포탄은 항상 온탑에서 웹 페이지를 볼 수 있습니다!
Qiita라든지 누군가의 블로그를 보면서 코드를 쓰고 싶을 때가 있습니다만, Mac이나 Windows라고 풀 스크린 상태로 화면 분할하는 것은 표준에서는 2분할이 한계입니다. 어쩌면..
그럴 때 조금 작은 창문으로보고 싶다면 편리하고, portan는 몇 화면에서 나올 수 있습니다! 검증하지 않았지만

동영상도 전체 화면으로 볼 수 있지만 picture in picture를 사용하는 것이 더 편리합니다.
Skype 같은 사람입니다.
↓이런 느낌


그건 그렇고, 여기에서 다운로드 할 수 있습니다.
portan - Always on top Webview

어떤 것을 사용했는지

선전은 이 정도로 어떤 기술을 사용했는지 들어가고 싶습니다.

Electron Vue

Vue.js로 데스크톱 앱을 만들 때 유용합니다.
Electron의 보일러 플레이트입니다.

Vue에서 Electron을 사용할 수 있으므로 쓰기 쉽습니다!

빠진 포인트

Electron Vue에는 직접적인 관계는 없지만 Webview를 상시 상단으로 표시하는 부분에서 조금 빠졌습니다.
공식 문서를 보고 아래와 같은 느낌으로 갈 수 있을까라고 생각하면, 풀 스크린의 화면에는 Webview를 표시시킬 수 없었습니다.

 win.setAlwaysOnTop(true);
 win.setVisibleOnAllWorkspaces(true);

여러가지 조사한 결과 이런 느낌이라고 갈 수 있는 것 같습니다

app.dock.hide();
win.setAlwaysOnTop(true, 'floating');
win.setVisibleOnAllWorkspaces(true);
win.setFullScreenable(false);

app.dock.hide 를 하지 않으면 안되는 것은 조금 수수께끼네요. 좋은 방법을 아는 분은 가르쳐 주셨으면합니다.

Puppeteer

Puppeteer는 Headless Chrome을 Node.js에서 쉽게 조작 할 수있는 사람입니다.
이번에는 본 웹사이트의 favicon과 페이지 제목을 훔치는 데 사용합니다.

Electron의 Webcontents라고 하는 API에서도 타이틀은 끌어올 수 있습니다만 향후의 기능 추가와 Puppeteer를 사용해 보고 싶었으므로 사용했습니다

NeDB

NeDB는 JavaScript에서 사용할 수 있는 데이터베이스입니다.
WebView의 표시 기록을 저장하는 데 사용됩니다.

mongodb를 사용한 적이 있다면 문제없이 사용할 수 있다고 생각합니다.
이런 느낌으로 검색할 수 ↓

db.find({ ○○: ●● })

이 기사가 매우 도움이되었습니다. 고맙습니다.
htps : // 이 m / chi ny 도세 / / ms / 0731 네 f4 굿

결론

이치오 오픈 소스이므로 마사카리 환영합니다.
스타는 대대 환영입니다 😊
htps : // 기주 b. 코 m / sy / 포탄

Twitter도 하고 있습니다
htps : // 라고 해서 r. 이 m / sy는 r