Electron에서 Chatwork를 데스크탑 앱화 (Webview + badge)
테스트 기간이 힘들고 코드를 쓰고 싶어졌기 때문에 간단한 앱을 써 보았다.
만드는 것
electron으로 데스크톱 앱 스타일의 Chatwork를 만듭니다.
이 2점을 채우는 것이 이번 골.
환경
MacOS X 10.10.4
Node.js v.0.12.4
electron v.0.30.0
해보자
electron 설정 및 HelloWorld
아래의 기사를 참고로 electron으로 hello world합니다.
30분 안에 자바스크립트(Electron)로 데스크톱 앱을 만들고 배포할 때까지
$ mkdir chatwork-electon
$ cd chatwork-electon
$ npm init -y
package.json{
"name": "sample",
"version": "0.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mottox2",
"license": "MIT"
}
main.js'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 1000, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools(true);
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Webview 포함 및 표시
index.html에 webview 포함
chatwork.js도 작성하고 로드해 둡시다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chatwork</title>
</head>
<body>
<webview id="mainWebview" src="https://www.chatwork.com/" autosize="on"></webview>
<style>
webview {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script src="./chatwork.js"></script>
</body>
</html>
이 시점에서는 이런 느낌이 되고 있습니다.
읽지 않은 멘션 수 얻기
Chatwork의 읽지 않은 멘션 수는 제목에서 얻을 수 있습니다.
예를 들면 읽지 않은 것이 3, 멘션 첨부의 읽지 않은 것이 1인 경우는 이하와 같은 타이틀이 됩니다.
[3(1)]チャットワーク
이 타이틀을 electron측에서 사용해 갑니다.
Webview 설명 을 읽으면 타이틀을 취득하는 getTitle이라는 메소드가 있으므로 사용합니다.
읽지 않은 수(unreadCount)를 다음의 용으로 취득하기로 합니다.
chatwork.jsvar webview = document.getElementById('mainWebview');
var title = "";
var unreadCount = 0;
// 一秒ごとにタイトルをチェック
var timer = setInterval(function() {
title = webview.getTitle();
var result = title.match(/\((\d+)\)/);
// 正規表現でタイトルをチェックし、未読があれば変数に代入
if(result) {
unreadCount = result[1];
}
}, 1000);
잡잡한 구현이지만, 이번 목적은 시험하는 것이므로 무시합니다.
배지를 붙이다
방금 얻은 unreadCount를 배지로 표시합니다.
배지를 붙이는 방법은 여기 에서 확인할 수 있습니다.
app.dock.setBadge(text)
를 사용하면 배지를 붙일 수 있으므로 chatwork.js를 다시 씁니다.
chatwork.jsvar remote = require('remote');
var app = remote.require('app');
var webview = document.getElementById('mainWebview');
var title = "";
var unreadCount = "";
var timer = setInterval(function() {
title = webview.getTitle();
var result = title.match(/\((\d+)\)/);
if(result) {
unreadCount = result[1];
} else {
unreadCount = "";
}
// unreadCountに基づいてバッジを更新
app.dock.setBadge(unreadCount);
}, 1000);
위의 두 줄은 조금 엉망입니다.
참고 링크
Electron의 remote로 프로세스간 통신을 고레벨로 취급
시도에 자신에게 메시지를 보내면 배지 표시가 변경됩니다.
Electron에 입문해 본 소감
HTML, CSS, JavaScript 걸면 간단히 쓸 수 있어서 기쁘네요.
편리 도구를 Electron을 만들어 배포하는 것이 쉽게 할 수있어 좋을 것 같습니다.
coffee로 쓰고 싶기 때문에 빌드 환경 정돈하고 싶었습니다.
github에 코드를 올리고 있습니다.
htps : // 기주 b. 이 m / 더 x2 / ect ct - t rk / t ree / 05 아 f344 아 90955004 9 아 c7c908 c7d6db4824f
실용 단계에는 그리 먼 느낌입니다.
Reference
이 문제에 관하여(Electron에서 Chatwork를 데스크탑 앱화 (Webview + badge)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mottox2/items/7a1373f23ba02245d0e0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir chatwork-electon
$ cd chatwork-electon
$ npm init -y
{
"name": "sample",
"version": "0.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mottox2",
"license": "MIT"
}
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 1000, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools(true);
mainWindow.on('closed', function() {
mainWindow = null;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chatwork</title>
</head>
<body>
<webview id="mainWebview" src="https://www.chatwork.com/" autosize="on"></webview>
<style>
webview {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script src="./chatwork.js"></script>
</body>
</html>
[3(1)]チャットワーク
var webview = document.getElementById('mainWebview');
var title = "";
var unreadCount = 0;
// 一秒ごとにタイトルをチェック
var timer = setInterval(function() {
title = webview.getTitle();
var result = title.match(/\((\d+)\)/);
// 正規表現でタイトルをチェックし、未読があれば変数に代入
if(result) {
unreadCount = result[1];
}
}, 1000);
app.dock.setBadge(text)
var remote = require('remote');
var app = remote.require('app');
var webview = document.getElementById('mainWebview');
var title = "";
var unreadCount = "";
var timer = setInterval(function() {
title = webview.getTitle();
var result = title.match(/\((\d+)\)/);
if(result) {
unreadCount = result[1];
} else {
unreadCount = "";
}
// unreadCountに基づいてバッジを更新
app.dock.setBadge(unreadCount);
}, 1000);
HTML, CSS, JavaScript 걸면 간단히 쓸 수 있어서 기쁘네요.
편리 도구를 Electron을 만들어 배포하는 것이 쉽게 할 수있어 좋을 것 같습니다.
coffee로 쓰고 싶기 때문에 빌드 환경 정돈하고 싶었습니다.
github에 코드를 올리고 있습니다.
htps : // 기주 b. 이 m / 더 x2 / ect ct - t rk / t ree / 05 아 f344 아 90955004 9 아 c7c908 c7d6db4824f
실용 단계에는 그리 먼 느낌입니다.
Reference
이 문제에 관하여(Electron에서 Chatwork를 데스크탑 앱화 (Webview + badge)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mottox2/items/7a1373f23ba02245d0e0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
