Franzに任意のアプリケーションを追加する(プラグインの作成と追加)

Franzという複数のメッセージング・コミュニケーション系のサービスを1つにまとめて管理することができるツールを最近使っている。

meetfranz.com

もともと社内ではSlackを利用しているのでSlackアプリを使って過ごしていたのだけれども、だんだん社外とのやり取りが増えるときにこれまではメールが主体だったのがChatworkだったりfacebookメッセンジャーだったりでコミュニケーションを取ることが増えてきた。そうしたときにChromeに複数のそういったアプリケーションをタブに複数開いて立ち上げておいてもよいのだけれども、やはり使っていくと不便が多い*1。

そうしたときにFranzを使うとブラウザとは独立して管理することができるのでとても便利。但し、Franz自体にはデフォルトで65個のサービスを設定できる様になっているのだけれども、国内のみ普及しているサービスだったりするとデフォルトでは用意されていなかったりする。

そうしたときにFranzにはプラグインの機構があり任意のアプリケーションを追加することができる。一つだけ難があってFranzは内部ブラウザで別ウインドウのポップアップを出すことができないので、それが前提になっているアプリケーションはプラグインで追加した場合も実際に使うことができないので注意。この制限があって会社で利用しているワークフローシステムのアプリケーションはFranz上で使えなかった。残念。

プラグイン(レシピ)の作り方

plugins/integration.md at master · meetfranz/plugins · GitHub ここに書かれている通りなのでそこまで複雑ではない。必要なファイルは以下の通り。

• package.json
• icon.png
• icon.svg
• index.js
• webview.js

これらのファイルを ~/Library/Application Support/Franz/recipes/dev 以下のアプリケーション名を入れたディレクトリを1段掘った後配置する。それぞれのファイルの内容を一番シンプルに書くと以下の様な感じになる。

package.json

設定ファイルとして利用していて、Franzに登録したいWebサービスに関する情報を記載する。npmのもの踏襲だが config , id あたりがFranz用に拡張されているところ。

{
"id": "(Franzで識別用に使われるID)",
"name": "(登録したいサービス名)",
"version": "1.0.0",
"description": "(このプラグインの説明)",
"config": {
"serviceURL": "(登録したいサービスのURL)",
"serviceName": "(登録したいサービス名・アプリケーション一覧掲載用)"
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@github.com:xxx/franz-foo-plugin.git"
},
"author": "hideack",
"license": "MIT"
}

index.js

基本下の一行でよい。更にURLのバリデーションを行う場合にはここに処理を追記する。

module.exports = Franz => Franz;

webview.js

未読のメッセージ数をアイコンにバッジとして表示するなどのフロントエンド側の処理を記述することができる。Franzに登録ができる様にするWebアプリケーション中にある未読数等の要素を抜き出し、バッジとして設定することができる。

module.exports = (Franz) => {
const getMessages = function getMessages() {
/*
    // ex.
    const elements = document.querySelectorAll('.msg-unread-count');
    let count = 0;
    if (elements[0]) {
      count = parseInt(elements[0].innerHTML, 10);
    }
    */
count = 1;
Franz.setBadge(count);
};
Franz.loop(getMessages);
};