kikki's tech note

技術ブログです。UnityやSpine、MS、Javaなど技術色々について解説しています。

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

本章では、SlackのHTMLのDOM構造に仕様変更が入っていたので、Slack返信機能を調整しました。

背景

背景等については、こちらを参照ください。
kikki.hatenablog.com

スクリプト

以下、2015-12-17時点での最新のスクリプトになります。前回利用されていた方は、スクリプトを全置換頂ければと思います。

// ==UserScript==
// @name         Slack - reply & quote a message -
// @namespace    http://kikki.hatenablog.com/
// @version      1.0.2
// @description  Reply & Quote a message in Slack
// @author       kikki
// @match        https://*.slack.com/*
// @grant        none
// ==/UserScript==
/*
2015-12-17 v1.0.2
* Adjust slack's DOM specification change
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 msgContent = msg.children('.message_content');
        var timeStampA = msgContent.children('a.timestamp');
        var refUrl = $(timeStampA).attr("href");
        var quoteBtn = $('<button class="btnQuote" style="margin: 5px 0 0 72px;" data-refurl="' + refUrl + '" onclick="onQuoteClick(this)">Quote</button>');
        msg.append(quoteBtn);
        var senderUser = jQuery.trim(msgContent.children("a.message_sender").text());
        var repMessage = jQuery.trim(msgContent.children("span.message_body").text()).match(/^.*$/m)[0];
        if(!repMessage)
            repMessage = jQuery.trim(msgContent.children("span.msg_inline_file_preview_title").text()).match(/^.*$/m)[0];
        var replyBtn = $('<button class="btnReply" style="margin: 5px 0 0 10px;" 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")
}

筆休め

Webサービスは、常に進化し続けるので、Greasemonkeyでのレイアウト調整も時折確認すべきですね。

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


※無断転載禁止 Copyright (C) kikkisnrdec All Rights Reserved.