返信・引用機能をSlackに追加してみた

本章では、Slackをより便利に扱うために、GreasemonkeyでSlackを拡張するスクリプトを作成しました。

はじめに

社内でコミュニケーションツールとして、Slackを使っているとGUI操作で、「返信」や「引用」ができないことに少し懸念を覚えていました。そこで今回、エンジニアではない一般の人にも手軽に扱えるよう、Chatworkでも見かける「返信」「引用」機能を備えたボタンを表示するスクリプトを組んでみました。

返信・引用機能

実行例

以下図が今回用意したスクリプトの実行画面になります。

画面右に配置されたボタンを押下することで、メッセージ入力欄に「引用文」「返信文」が追加されます。

スクリプト

以下のスクリプトを「Tampermonkey」または「Greasemonkey」に登録します。

// ==UserScript==
// @name         Slack - reply & quote a message -
// @namespace    http://kikki.hatenablog.com/
// @version      1.0.1
// @description  Reply & Quote a message in Slack
// @author       kikki
// @match        https://*.slack.com/*
// @grant        none
// ==/UserScript==

/*
2015-08-28 v1.0.1
* Changed event to add buttons
* Auto resize a message textbox

2015-08-27 v1.0.0
Initial Release
*/

(function() {
    var orgFunc = TS.templates.builders.buildMsgHTML;
    TS.templates.builders.buildMsgHTML = function(O, h) {
        var target = orgFunc(O, h);
        if (!$(target)[0].id.startsWith('msg_')) {
            return target;
        }
        var msg = $(target);

        var timeStampA = msg.children('a.timestamp');
        var refUrl = $(timeStampA).attr("href");
        var quoteBtn = $('<button class="btnQuote" style="float:right;" data-refurl="' + refUrl + '" onclick="onQuoteClick(this)">Quote</button>');
        msg.append(quoteBtn);

        var senderUser = jQuery.trim(msg.children("a.member").text());
        var repMessage = jQuery.trim(msg.children("span.message_content").text()).match(/^.*$/m)[0];
        var replyBtn = $('<button class="btnReply" style="float:right;" data-user="' + senderUser + '" data-repMes="' + repMessage + '" onclick="onReplyClick(this)">Reply</button>');
        msg.append(replyBtn);

        return msg[0].outerHTML;
    }
})();
window.onQuoteClick = function(target) {
    var messageText = document.getElementById('message-input');
    messageText.value += '\n' + (/https:\/\/[a-zA-Z0-9]+\.slack\.com/g).exec(location.href)[0] + $(target).data('refurl');
    $('#message-input').trigger("autosize").trigger("autosize-resize")
}
window.onReplyClick = function(target){
    var messageText = document.getElementById('message-input');
    messageText.value = '@' + $(target).data('user') + ':\n' + ( $(target).data('repmes') ? ( '>' + $(target).data('repmes') + '\n' ) : "" ) + messageText.value;
    $('#message-input').trigger("autosize").trigger("autosize-resize")
}

筆休め

本章では、業務が少しでも便利になる(と嬉しいな)スクリプトについて紹介しました。日常業務の効率化は、エンジニアでなくとも利用できる操作性があるといいと思います。

以上、「返信・引用機能をSlackに追加してみた」でした。