各種チャット系Webサービスを一つのウィンドウ内で表示できるアプリ『Franz』が便利で最近使っている。Slackや仕事用のgoogle Calendar、Trelloなんかを表示させているんだが、ここに最近会社で使ってるgoogle spacesも統合したい。というわけでプラグインを作った。
 プラグインの作成方法は Slack,ChatWork,Github,Backlogをまとめて管理『Franz』が便利すぎる | Developers.IOFranz Pluginを作ってみよう - Qiitaを参考に。

プラグインディレクトリ
~/Library/Application Support/Franz


ここにgooglespacesというフォルダを作る(名前は多分なんでもいい)。そこに以下のファイルを作る

◎ファイルリスト
・icon.png
・icon.svg
・index.js
・package.json
・webview.js

で、icon.pngとicon.svgはFranzに表示されるアイコンなので適当に用意する。あとはそれぞれこんな感じ

index.js

// just pass through Franz
module.exports = Franz => Franz;

これだけ。

package.json
{
"name": "googlespaces",
"version": "1.0.0",
"description": "Use Google Spaces.",
"main": "index.js",
"author": "hoge",
"license": "MIT",
"config": {
"serviceURL": "https://spaces.google.com/",
"serviceName": "Google Spaces",
"message": "Spaces. Your easy way to figure things out, together.",
"popup": [],
"hasNotificationSound": false,
"hasIndirectMessages": false,
"hasTeamID": false,
"customURL": false,
"hostedOnly": false,
"webviewOptions": {
"disablewebsecurity": ""
},
"openDevTools": false
}
}

ここはnameとかdescriptionとかauthorをいじった。あ、一番肝心なのはserviceURLだと思う。

webview.js
const path = require('path');

module.exports = (Franz, options) => {
let updates = 0;
const modal = document.createElement('div');

function showModal (text) {
show(modal);
modal.querySelector('p').innerHTML = text;
updates += 1;
}

function hideModal () {
hide(modal);
modal.querySelector('p').innerHTML = '';
updates -= 1;
}

// Replace window.alert to hide alerts in Franz
const oldAlert = window.alert;
window.alert = function () {
// when Google Calendar displays an alert notify the user
showModal.apply(oldAlert, arguments);
};

function show (element) {
element.style.display = 'inherit';
}

function hide (element) {
element.style.display = 'none';
}

const getMessages = () => {
// get unread messages
//const updates = document.getElementById('franz').getAttribute('data-unread');

// get conversations in 'My Inbox'
//const inbox = document.getElementById('franz').getAttribute('data-inbox');

// set Franz badge
// updates => passive unread count
// inbox => active unread count
Franz.setBadge(0, updates);
};

modal.id = 'franz-modal';
modal.innerHTML = '';
modal.querySelector('.close').addEventListener('click', hideModal);
document.body.appendChild(modal);

document.addEventListener('keydown', function(e) { if (e.keyCode === 27) { hideModal(); } })

// inject franz.css stylesheet
Franz.injectCSS(path.join(__dirname, 'css', 'modal.css'));

// check for new messages every second and update Franz badge
Franz.loop(getMessages);
};

このファイルは何もいじっていない。

こういうのを作るとプラグインとして機能する。あとはFranzを再起動すると「サービスを新たに追加」のセクションに、追加したアイコンが表示される。