Edited at

ElectronでChatworkをデスクトップアプリ化 (Webview + badge)

More than 3 years have passed since last update.

electronが流行っているみたいなので、触ってみたかった。

テスト期間が辛くてコードを書きたくなったので、簡単なアプリを書いてみた。


つくるもの

electronでデスクトップアプリ風のChatworkを作成する。


  • webviewでChatworkを表示

  • 自分に付いた未読のメンション数をバッジで表示する

この2点を満たすのが、今回のゴール。


環境

MacOS X 10.10.4

Node.js v.0.12.4

electron v.0.30.0


やってみる


electronのセットアップとHelloWorld

以下の記事を参考にしてelectronでhello worldします。

30分で出来る、JavaScript (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>

この時点ではこんな感じになってます。

スクリーンショット 2015-07-21 23.20.50.png


未読のメンション数を取得する

Chatworkの未読のメンション数は、タイトルから取得出来ます。

例えば未読が3、メンション付きの未読が1の場合は以下のようなタイトルになります。

[3(1)]チャットワーク

このタイトルをelectron側で使っていきます。

Webviewの説明を読むとタイトルを取得するgetTitleというメソッドがあるので使用します。

未読数(unreadCount)を以下の用に取得することにします。


chatwork.js

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);


雑な実装ですが、今回の目的は試すことなので無視します。


バッジをつける

先ほど取得したunreadCountをバッジとして表示します。

バッジをつけるメソッドはここで確認出来ます。

app.dock.setBadge(text)

を使えばバッジを付けられるので、chatwork.jsを書き換えます。


chatwork.js

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);


上の2行はちょっとしたおまじないです

参考リンク

Electronのremoteでプロセス間通信を高レベルに扱う

試しに自分にメッセージを送信すると、バッジの表示が変わります。

スクリーンショット_2015-07-22_1_08_55.png


Electronに入門してみた感想

HTML, CSS, JavaScriptかければ簡単に書けて嬉しいですね。

便利ツールをElectronを作って配布ってのが簡単に出来て良さそうです。

coffeeで書きたいのでビルド環境整えたいと思いました。

githubにコードあげてあげてます。

https://github.com/mottox2/electron-chatwork/tree/05aaaf344a90955004e9aac7c908cc7d6db4824f

実用段階には程遠い感じです。