Help us understand the problem. What is going on with this article?

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

More than 5 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
実用段階には程遠い感じです。

mottox2
フロントエンドを中心にWebサービス・アプリを作ってるフリーランスエンジニア。UIデザインと編曲もやってます。
https://mottox2.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away