RedmineをView Customize pluginを使ってカスタマイズ～引用折り畳み編～

要件

• BtoCサービスのスタッフ向けに構築したRedmineで特定顧客とのメール履歴をチケットに集約した

その結果、下記のような課題がスタッフより上がってきたので、その課題の解決をView Customize pluginで行った。

課題

• メールの引用部分が長すぎて、メール本文を見るのが大変
• チケットの履歴欄にメールの送受信履歴が縦に並んでいくので見づらい

解決案

• 引用部分はクリックで表示、非表示を切り替えできるようにする
• LINEの画面のように、相手と自分でメッセージを左右に寄せて、吹き出しの色を変える

今回は上記課題のメールの引用部分が長すぎて、メール本文を見るのが大変を引用部分はクリックで表示、非表示を切り替えできるようにするにて解決する手順を紹介。

もう一つの課題解決は以下記事を参照。
RedmineをView Customize pluginを使ってカスタマイズ～LINE風チャット画面実装編～

環境

• Redmine Ver. 3.4.6
• View Customize plugin Ver. 2.0.0
• テーマ Farend basic

View Customize pluginでの設定手順

View Customize pluginのインストール方法など公式リポジトリを参照。
以下はView Customize pluginがインストールされている前提での設定手順

1. Redmineの管理ボタンを押す
2. 日本語環境であれば表示のカスタマイズを押す。
3. 新しい表示のカスタマイズを押す
4. パスのパターンに/を入力する。
5. 挿入位置をチケット詳細の下にする。
6. 種別をJavaScriptにする。
7. コードに下記コードを入力する。

$(document).ready(function () {
    $('blockquote').each(function (index, element) {
        $(this).hide();
        var style = "\n\t\t\tbackground-color: #bdc1c6;\n\t\t\tborder-radius: 5.5px;\n\t\t\tborder-color: #cdcdcd;\n\t\t\tcursor: pointer;\n\t\t\tcolor: #6b6c6e;\n\t\t\tfont-weight: bold;display:inline-block;\n\t\t\tmargin-bottom: 10px;\n\t\t";
        $(this).after('<div title="コンテンツをすべて表示する" style="' + style + '">・・・</div>');
        var toggle = $(this).next('div');
        toggle.on('click', function () {
            var tgt = $(this).prev('blockquote');
            tgt.toggle();
            if (tgt.is(':visible')) {
                // 表示されている場合の処理
                $(this).attr('title', 'コンテンツを非表示にする');
            }
            else {
                // 非表示の場合の処理
                $(this).attr('title', 'コンテンツをすべて表示する');
            }
        });
    });
});

解説

解説といっても大したことはしていなくて、Redmineの全てのページに対して、上記のスクリプトを埋め込んでいる。
Redmineは引用部分(行頭が>で始まる行)をblockquoteタグで囲ってくれるので、ページ内に含まれるblockquoteタグをデフォルトで非表示にして、blockquoteのすぐ後ろに表示・非表示を切り替えるボタンのコードを挿入している。

所感

時間がなくて調べ切れていないが、これくらいなら既存プラグインで同一機能とかもしくは標準機能でもありそうな気がする。