Slack,ChatWork,Github,Backlogをまとめて管理『Franz』が便利すぎる

すずしゅん

2017.01.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

アプリ開発・システム開発を行っていると、さまざまなウェブアプリやチャットツールを使うことが多いと思います。これらをひとつのアプリでまとめて閲覧・管理できるMacアプリがFranzです。

公開されているプラグインを入れたり、自分だけのプラグインを作ったりすることも簡単です。

実際にすずしゅんは、こんなかんじで利用しています。これだけまとめておくとめっちゃ便利です。

プロジェクト管理ツール/Git
- Backlog
- Zube (おそらくズービって読む)
- Github
チャットツール
- Slack複数PJ
- ChatWork
GoogleApps系
- Google Calendar
- Gmail
その他
- Soundcloud

更新履歴

2017/01/26 : KDDIChatWork, Backlogの通知ができるようにwebview.jsについてを追記

1. インストール

公式サイトからダウンロードしてインストール (記事執筆時は v4.0.4でした)

Franz – a free messaging app for Slack, Facebook Messenger, WhatsApp, Telegram and more

2. プラグイン追加

Githubからプラグインをダウンロードしてインストール

meetfranz/plugins: Franz Plugin Repository

optionキーを押しながらFinderの移動をタップするとライブラリが選択できます(ライブラリは隠しフォルダ)
- Finder > 移動 > ライブラリ > Application Support > Franz > Plugins
好みのプラグインをGithubからDLしてきてこのフォルダに展開
Franzを再起動すると追加されています

3. 独自プラグイン作成

公開されてない場合は自分で作ればOK。Github用プラグインがシンプルなつくりなので雛形として作成するといいと思います。package.jsonを書き換えて、アイコン画像を用意すれば動くものができます。

基本的にはpackage.jsonを書き換えるだけでいいはずです。ログインするserviceURLやname, description, serviceNameを書き換えます。作成例を下記に紹介します。

ただし、通知をFranzのタブ上に表示したい場合は、加えて webview.js も更新してください。Franzのループで通知情報を取得して表示するしくみです。

package.json(soundcloud)

{
  "name": "soundcloud",
  "version": "1.0.0",
  "description": "soundcloud",
  "main": "index.js",
  "author": "",
  "license": "",
  "config": {
    "serviceURL": "https://soundcloud.com/signin",
    "serviceName": "soundcloud",
    "message": "",
    "popup": [],
    "hasNotificationSound": false,
    "hasIndirectMessages": false,
    "hasTeamID": false,
    "customURL": false,
    "hostedOnly": false,
    "webviewOptions": {
      "disablewebsecurity": ""
    },
    "openDevTools": false
  }
}

package.json(zube)

{
  "name": "zube",
  "version": "1.0.0",
  "description": "zube",
  "main": "index.js",
  "author": "",
  "license": "",
  "config": {
    "serviceURL": "https://zube.io/auth/github",
    "serviceName": "zube",
    "message": "",
    "popup": [],
    "hasNotificationSound": false,
    "hasIndirectMessages": false,
    "hasTeamID": false,
    "customURL": false,
    "hostedOnly": false,
    "webviewOptions": {
      "disablewebsecurity": ""
    },
    "openDevTools": false
  }
}

URLが可変する場合

ウェブサイトによっては、serviceURLがプロジェクト名やチーム名で変わることがあります。その場合はteamIDを設定しておくと個別設定が可能です
{teamID} で可変文字列, hasTeamID true にて個別設定ができます

package.json(Backlog)

{
  "name": "Backlog",
  "version": "1.0.0",
  "description": "Backlog",
  "main": "index.js",
  "author": "",
  "license": "",
  "config": {
    "serviceURL": "https://{teamID}.backlog.jp/LoginDisplay.action",
    "serviceName": "Backlog",
    "message": "",
    "popup": [],
    "hasNotificationSound": false,
    "hasIndirectMessages": false,
    "hasTeamID": true,
    "customURL": false,
    "hostedOnly": false,
    "webviewOptions": {
      "disablewebsecurity": ""
    },
    "openDevTools": false
  }
}

package.json(KDDI ChatWork)

{
  "name": "KDDIChatWork",
  "version": "1.0.0",
  "description": "KDDIChatWork",
  "main": "index.js",
  "author": "",
  "license": "",
  "config": {
    "serviceURL": "https://kcw.kddi.ne.jp/login.php?s={teamID}&args=",
    "serviceName": "KDDIChatWork",
    "message": "",
    "popup": [],
    "hasNotificationSound": false,
    "hasIndirectMessages": false,
    "hasTeamID": true,
    "customURL": false,
    "hostedOnly": false,
    "webviewOptions": {
      "disablewebsecurity": ""
    },
    "openDevTools": false
  }
}

通知を表示したい場合

Franzのループ関数を用いてメッセージを取得します。取得方法はウェブサイトによって異なります
とくに通知を表示する必要がなければgithubプラグインのままで問題ないです
サイトにてDOMが変更されれば更新が必要です

webview.js(Backlog)

module.exports = (Franz, options) => {

    function getMessages() {

            var counter = 0;
            counter = document.querySelector("#globalNotificationsLink > span") ? document.querySelector("#globalNotificationsLink > span").innerHTML : 0;

            Franz.setBadge(counter);
    }

    Franz.loop(getMessages);
}

webview.js(KDDI ChatWork)

module.exports = (Franz, options) => {

    function getMessages() {

            var counter = 0;

            // default Unread
            var e = document.getElementById('_chatUnreadStatus');

            // ToUnread Only
            // var e = document.getElementById('_chatToUnreadStatus');

            if (e.style.display != 'none') {
                counter += parseInt(e.innerHTML);
            }

            Franz.setBadge(counter);
    }

    Franz.loop(getMessages);
}

おまけ: PNGからSVGを生成してくれるサイト

ZorroSVG - Put a Mask on it

参考にさせていただいた記事

おわりに

複数のプロジェクトや業務にアサインされていると、自分宛ての通知の観測範囲が広くなります。Franzをつかうことで通知確認の一元管理ができるのでとってもおすすめです！