各種チャット系Webサービスを一つのウィンドウ内で表示できるアプリ『Franz』が便利で最近使っている。Slackや仕事用のgoogle Calendar、Trelloなんかを表示させているんだが、ここに最近会社で使ってるgoogle spacesも統合したい。というわけでプラグインを作った。
プラグインの作成方法は Slack,ChatWork,Github,Backlogをまとめて管理『Franz』が便利すぎる | Developers.IOとFranz 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 = 'このファイルは何もいじっていない。 こういうのを作るとプラグインとして機能する。あとはFranzを再起動すると「サービスを新たに追加」のセクションに、追加したアイコンが表示される。 '; 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); };