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


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) でデスクトップアプリを作って配布するまで](http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29)

```
$ 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](https://qiita-image-store.s3.amazonaws.com/0/24124/d8c351d7-24aa-8333-7e70-29e789684ead.png)

## 未読のメンション数を取得する
Chatworkの未読のメンション数は、タイトルから取得出来ます。
例えば未読が3、メンション付きの未読が1の場合は以下のようなタイトルになります。

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

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

[Webviewの説明](https://github.com/atom/electron/blob/master/docs/api/web-view-tag.md)を読むとタイトルを取得する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をバッジとして表示します。
バッジをつけるメソッドは[ここ](https://github.com/atom/electron/blob/master/docs/api/app.md
)で確認出来ます。

```
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でプロセス間通信を高レベルに扱う](http://qiita.com/Misumi_Rize/items/a434cc0d17e5c6b85147)


試しに自分にメッセージを送信すると、バッジの表示が変わります。
![スクリーンショット_2015-07-22_1_08_55.png](https://qiita-image-store.s3.amazonaws.com/0/24124/502194ae-d316-ce01-6498-dc451081466f.png)


# Electronに入門してみた感想
HTML, CSS, JavaScriptかければ簡単に書けて嬉しいですね。
便利ツールをElectronを作って配布ってのが簡単に出来て良さそうです。
coffeeで書きたいのでビルド環境整えたいと思いました。

githubにコードあげてあげてます。
https://github.com/mottox2/electron-chatwork/tree/05aaaf344a90955004e9aac7c908cc7d6db4824f
実用段階には程遠い感じです。