たった1行のJavaScriptコードでRedmine UI （カスタムフィールドのトラッカー名の表示）を改善する方法

はじめに

私も初めてRedmineを使った時に、Redmineの独特なUIになじめずに違和感を覚えましたが、不思議なもので使い続けていると多少不便な点があってもあまり不便さを感じなくなるものです。

Redmineで大量のカスタムフィールドとトラッカーを登録して使う場合、カスタムフィールドの設定ページでトラッカーを紐づける作業はUIの不便さ故、かなり面倒くさい作業になります。

カスタムフィールドの設定ページでのトラッカーの選択は「ごちゃごちゃ感」が相当あり、何とかしなければと思い、多少なりともUIを改善することができましたので、情報を公開して皆様のお役に立てればと思います。

Redmineの一般ユーザーの方はカスタムフィールドの設定ページにアクセスできないので、この情報はあまりお役に立たないかもしれませんが、Redmineのシステム管理者の方は色々と忙しい業務をこなしながらRedmineの管理をしているので、少しでも効率を良くして業務の改善を実現していただければと思います。

なお、この資料はRedmine開発企業である「株式会社Ankosoft」のホームページに掲載している内容を元に作成しました。¹

$$\style{align: center; font-family: "Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif}{\text{一応注意事項を記載します。}}$$

本書はRedmineの情報を提供する目的で作成されております。本書の内容を元に運用に影響がでる場合の責任は負いかねますので、ご了承ください。
本書の内容は2019年10月08日現在のものであり、内容は事前予告なく修正される場合があります。

1.現状のRedmineのカスタムフィールドのトラッカー名の表示

下図のように、Redmineのカスタムフィールドにおけるトラッカー名の表示は、チェックボックス＋ラベルの形式で表示されるため、トラッカー名が大量にある場合、どのトラッカー名にチェックが入っており、どのトラッカー名にチェックが入っていないのか、把握することが容易ではありませんでした。
特にラベルが途中で改行される場合もあるため、一目で正確なトラッカー名を把握することが難しく、似たようなトラッカー名が続く場合、確認に時間がかかりました。
また、チェックボックスが左、中、右とばらばらにあり、目視での確認に負担がかかりました。
一言で言って、**「ごちゃごちゃして分かりずらい」**という状況です。

2.改善したRedmineのカスタムフィールドのトラッカー名の表示

下図のように、チェックボックス＋ラベルの形式で表示されているトラッカー名ごとに改行をいれて、チェックがオンになっているトラッカー名を赤字で表示することにより、何のトラッカー名にチェックが入っており、何のトラッカー名にチェックが入っていないのか、一目で把握することが可能になります。
チェックボックスが左の同じ位置にあるため、可読性が向上し、追加でチェックをオン、オフにするときに容易にチェックボックスを選択できます。

3.トラッカー名の表示改善のJavaScriptコードの説明

JavaScript

$("#custom_field_tracker_ids").find("input[type='checkbox']").next().after("<br>").end().end().find("input[type='checkbox']:checked").next().css("color","red")

上記のJavaScript(JS)コードでトラッカー名の表示改善ができます。たった1行のJSコードで上記のようにUI表示を改善できます。(正確にはJavaScriptコードではなく、jqueryコードですが、jqueryはJavaScriptのライブラリですので、ここではJavaScriptコードと表記をしました。)

上記のJSコードは少し長いので下記のように2行に分けて書くことも可能です。

JavaScript

$("#custom_field_tracker_ids").find("input[type='checkbox']").next().after("<br>")
$("#custom_field_tracker_ids").find("input[type='checkbox']:checked").next().css("color","red")

簡単にこのJSコードをRedmineに適応する方法を説明します。
ブラウザでマウス右ボタンをクリックをして「検証」の「Console」に上記のコードを張り付けて、エンターキーを入力することで、上記のコードを実行できます。
下図は「Google Chrome」での図です。他のブラウザも画面や名称は異なりますが、同様の方法でJavaScriptコードを実行できます。
下図の青枠の部分に上記のコードを張り付けます。

該当htmlは下記のような構造になっています。

html

<fieldset class="box" id="custom_field_tracker_ids">
  <legend>トラッカー</legend>
  <input type="checkbox" name="custom_field[tracker_ids][]" id="custom_field_tracker_ids_4" value="4">
  <label class="no-css" for="custom_field_tracker_ids_4">バグ</label>
  <input type="checkbox" name="custom_field[tracker_ids][]" id="custom_field_tracker_ids_5" value="5">
  <label class="no-css" for="custom_field_tracker_ids_5">機能</label>

赤字で示した部分が「トラッカー」の部分の大枠を構成し、その中に青字で示したチェックボックスと緑字で示したラベルが１つのセットになり、トラッカー名分繰り返し出現します。

該当のhtmlとJSコードは文字色で区分したような関係になっています。

$("#custom_field_tracker_ids") 赤字の部分 .find("input[type='checkbox']")　青字の部分 .next().after("<br>")　オレンジ色の部分 .end().end() .find("input[type='checkbox']:checked")　青字の部分 .next()　緑字の部分 .css("color","red")　オレンジ色

「赤字の要素の配下の各青字の要素の次の要素（つまり緑字の各要素）の後にオレンジの色の命令を実行します（１つ目は「<br>」（改行）を挿入する、2つ目は文字色を赤字にする」というコードになります)。

「end()」は「一つ前の要素セットに戻る」処理をしています。2度出てくるので2つ前の要素に戻っています。これにより赤字の要素は青字の２つのfindの起点になります。

「検証」の「Console」でJSコードを実行するのは一時的な実行しかできずブラウザを更新するとJSコードが消えてしまうため、恒久的に該当のJSコードを実行するためには、「View Customize plugin」をRedmineにインストールして、上記のJSコードを登録してください。技術サポートが必要な方は弊社（[e-mail]）までご連絡ください。

4.おまけ

$$\style{align: center; font-family: "Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif}{\text{[おまけ１]
}}$$

上記の処理は、上記の処理をしたその時の状態を元に処理をするため、上記の処理後にチェックボックスをオン、オフにしてもラベルの色は変わりません。
下図の例では「申込書類の点検」はオフになったのに赤字のままであり、「申込内容の入力」はオンになったのに黒字のままです。

これでは実運用上、利便性が半減してしまうので、チェックボックスのオン、オフの変更があるたびに赤字、黒字を変更させる必要があります。
JSコードは少し長くなりますが、下記のコードを追加で実行することにより動的な変更に対してもラベルの色を変更することが可能になります。

JavaScript

//チェックボックスが変化したら発動
$("#custom_field_tracker_ids").find("input[type='checkbox']").change(function() {
	if ( $(this).prop('checked')){
		$(this).next().css("color","red")//チェックが入れば文字色を赤にする
	} else {
		$(this).next().css("color","")
		//チェックがなければ文字色の指定を無くす
		//デフォルトの色である黒になる
	}
});

上記のように、チェックボックスの変動があると発動をするように設定し、ifの部分でチェックボックスのオン、オフに応じてフォントの色を変える処理をしています。

$$\style{align: center; font-family: "Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif}{\text{[おまけ２]
}}$$

応用するとチェックが入っているトラッカーだけを表示する機能、再度全て表示する機能を追加することができます。すでにチェックが入っているトラッカーだけが表示されるので、関連するトラッカーの確認や登録されているトラッカーの解除などを行う時に作業効率が向上します。
ご関心がある方は、弊社（[e-mail]）までご連絡ください。

$$\style{align: center; font-family: "Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif}{\text{[チェックが入っている項目のみ表示]
}}$$

PDF資料はこちらから

1. 「株式会社Ankosoft」のホームページ： http://www.ankosoft.co.jp/information/ ↩