안녕하세요, 포키오 ( @pokiiio )입니다. IoTLT Advent Calendar 2018의 12일째를 담당하겠습니다.

tl;dr 게이힌 급행의 운행 정보를 감시하는 앱을 Electron으로 썼습니다. Electron이므로, macOS에서도 Windows에서도 반드시 움직일 것입니다. Node 환경(우리 쪽은 v8)이 있으면 곧바로 사용할 수 있으므로, 꼭 사용해 주세요. 위 리포지토리에서 소스를 Clone or Download하여 npm install 에서 필요한 파일을 다운로드하고, npm start 로 시작합니다. 또한 패키징하고 싶다면, npm run build-macOS 에서 가능합니다. Windows 사용자의 경우 build-macOS 부분을 build-windows로 변경하여 실행해보십시오. 이 기간에 왜 Electron? 지금까지 IoTLT를 중심으로 등단했습니다만, 그것을 동시에 게이큐에 관련된 가젯을 많이 작성해 왔습니다. 인연도 있어 MakerFaireTokyo2018에서도 전시하였습니다. 다만, 물리적인 가젯의 최대의 단점으로서, 가지고 다니는 것이 귀찮다는 점을 들 수 있습니다. 그래서 이번에는 물리적 가젯이 아니라 게이큐에 관한 데스크톱 앱을 만들었습니다. 그 실현 방법으로서 가장 최단 루트같은 것이 Electron이었으므로, 그 소개도 시켜 주세요. 근무처의 데스크에는, 과거 작성한 가젯을 몇개나 놓고 있습니다만, 예를 들면 미팅을 위해 다른 방으로 이동했을 때, 가젯을 가져가는 것은 귀찮습니다. 하지만 게이큐를 항상 피부로 느끼고 싶다. 거기서 도착한 것이 PC상에서 동작하는 데스크탑 앱이었습니다. Electron이란?

조금 복잡하지만 HTML + CSS + JS로 크로스 플랫폼 데스크톱 앱을 작성할 수있는 메커니즘이라는 식으로 이해하고 있습니다. 풍부한 npm 모듈을 사용할 수 있으므로 편리한 한편, Bootstrap 등 세련된 UI 컴포넌트도 사용할 수 있으므로, 제대로 데스크탑 앱이 걸어 버리는 것입니다.

만든 것

이것.

(표시 내용은 더미입니다) 게이큐의 운행 정보를 정기적으로 취득해, 지연등이 발생하고 있을 때는 데스크탑 상부에 정보를 표시한다고 하는 것입니다. 평소에는 앱을 실행 확실히 해 두는데, 아무것도 표시되지 않습니다. 기술적 포인트 다음 세 가지입니다. 게이큐의 운행 정보 취득 방법 운행 정보만 표시 멀티 스크린 대응 게이큐의 운행 정보 취득 방법 이것에 관해서는, 지금까지의 가젯 작성의 노하우가 듬뿍(?) 사용되고 있습니다. 기본적으로 게이큐 정보 페이지 ( ht tp // 응. 케이큐. 이. jp/ )로부터 취득해 옵니다만,

<div class=unko-panel>
京急線は平常通り運転しています。
</div>

운행 정보는 unko-panel의 div로 둘러싸여 있습니다. 따라서, JS로 이것을 퍼스 하기 위해서는, request-promise라든지로 body 전체를 취득한 후에,

let info = body;
info = info.split('<div class=unko-panel>')[1];
info = info.split('</div>')[0];
info = info.trim();
return info;

이런 식으로 고리고리퍼스하면 쉽게 운행 정보를 얻을 수 있습니다.

운행 정보만 표시

통상, Electron 어플리를 작성해 실행하면, Window로서 표시되어 버리므로(당연합니다만), Window를 투명하게 하거나, 메뉴 바등도 비표시로 해 주는 것으로, 마치 운행 정보만이 표시되고 있다 처럼 표현할 수 있습니다.

구체적으로는, BrowserWindow (을)를 new 할 때에, 옵션으로 이하의 파라미터를 주어 줍니다.

width: size.width,
height: size.height,
// where size is display size.
frame: false,
transparent: true,
resizable: false,
alwaysOnTop: true,

width · height에는 표시하려는 디스플레이의 크기를 주어 전체 화면 표시를합니다

frame를 false로 설정하여 창 제목 표시 줄 숨기기

transparent를 true로 설정하고 창을 투명하게 만듭니다.

resizable를 false로 설정하고 항상 전체 화면으로 표시

alwaysOnTop를 true로 설정하여 항상 맨 앞에 표시되도록합니다

.

그러나 마지막 alwaysOnTop을 true로 설정하면 클릭 이벤트를 모두이 Electron 앱에서 빼앗을 수 있으므로 아래와 같이 클릭 이벤트를 아래 레이어로 통과해야합니다. .

window.setIgnoreMouseEvents(true);

멀티 스크린 대응

직장에서는, 외부 디스플레이에 접속해 멀티 스크린으로 일을 하는 일도 많다고 생각합니다. 앱에서도 화면 수의 변화를 감지하여 모든 화면에 운행 정보를 표시할 수 있습니다.

electron.screen.on('display-added', function () {
  ...
});

electron.screen.on('display-removed', function () {
  ...
});

이런 식으로 electron.screen가 Emit하는 이벤트를 받을 뿐. 이것을 받고, electron.screen.getAllDisplays() 라고 하면 접속중의 화면을 모두 취득할 수 있으므로, 각각의 화면에 대해 BrowserWindow 를 new 해 표시되면 OK.

다만 「이 Display에, 이 BrowserWindow를 표시한다!」같은 편리한 옵션은 없기 때문에, 화면의 절대 좌표를 지정해, BrowserWindow 를 new 해 올려야 합니다.

let window = new BrowserWindow({
  x: display.bounds.x,
  y: display.bounds.y,
  ...
});

요약

이번에는 Electron으로 앱을 만들어 보았습니다. 쉽게 데스크톱 앱을 만들 수 있으므로, 여러분도 오레올레 앱을 만들면 어떻습니까?