第9回 redmine.tokyo のLTで発表したView Customize Plugin for Redmineの紹介です。

1. View Customize Pluginで
できること
2015-11-28
第9回redmine.tokyo勉強会
Hirokazu Onozato (onozaty)

2. 自己紹介
• Hirokazu Onozato (onozaty)
• https://twitter.com/onozaty
• https://github.com/onozaty
• http://www.enjoyxstudy.com/
• 株式会社ユニスティ所属
• エンジニア
• Redmine使用歴 6年
個人でのPlugin開発は2年前から
• Parent issue filter https://www.redmine.org/plugins/redmine_parent_issue_filter
• Copy parent issue https://www.redmine.org/plugins/copy_parent_issue_id

3. View Customize Plugin
• View Customize Plugin
https://github.com/onozaty/redmine-view-customize
• Redmineの画面をカスタマイズするためのPlugin
• 特定の画面に対して、JavaScript、CSSを埋め込む
機能を提供

4. 設定方法
コードを実行するパス(URL)。
正規表現で記載。
実行するコード。
JavaScript または
StyleSheet(CSS)で書く。
Redmineの画面で使用され
ているjQueryも使える。
(Redmineのバージョンに
よってライブラリが違うの
で注意)
プライベートにチェックを入れると、作成したユーザ
のみに有効
→個人で動作確認して、OKだったら全員に反映すると
いったことができる

5. どういうカスタマイズをするかは
ユーザ次第
次からのサンプルを
カスタマイズのご参考に

6. Sample 1
プロジェクト毎にヘッダを変えて
プロジェクトを識別しやすいように

7. プロジェクト毎にヘッダを変える
Path pattern: .*
Type: StyleSheet
Code: body.project-a #top-menu {
background-color: #006400; /* dark green */
}
body.project-a #header {
background-color: #008000; /* green */
}
body.project-b #top-menu {
background-color: #696969; /* dimgray */
}
body.project-b #header {
background-color: #808080; /* gray */
}
• body要素にプロジェクト毎にclass(project-<プロジェクト
ID>)が設定されるので、それを利用してCSSを設定

8. プロジェクト毎にヘッダを変える

9. Sample 2
チケット一覧を識別しやすいように

10. チケット一覧を識別しやすいように
Path pattern: /issues$
Type: StyleSheet
Code: /* 自分が担当のチケットは太字 */
tr.issue.assigned-to-me {
font-weight: bold;
}
/* 優先度が今すぐのものは赤字 */
tr.issue.priority-highest,
tr.issue.priority-highest a,
tr.issue.priority-highest a:link,
tr.issue.priority-highest a:visited {
color: red;
}
/* 題名は折り返さない */
tr.issue td.subject {
white-space: nowrap;
}
• チケットの情報に基づくclassが指定されているので、それ
を活用。テーマでも同じことができる。

11. チケット一覧を識別しやすいように
設定前
設定後

12. Sample 3
よくアクセスするページのリンクを
ヘッダメニューに追加する

13. ヘッダメニューにリンクを追加
Path pattern: .*
Type: JavaScript
Code: // 全てのチケット一覧リンクをヘッダに
$(function() {
$('#top-menu > ul')
.append('<li><a href="/issues">全てのチケット</a></li>');
});
• ドキュメントのロード完了時にヘッダにリンクを追加する
• Redmineのすべての画面でjQueryが読み込まれている
(2.1.0以降)ので、jQueryの関数使うといろいろ楽になる

14. ヘッダメニューにリンクを追加

15. Sample 4
子チケット追加時に親チケットの
情報を引き継いで入力の手間を減らす

16. 子チケット追加時に親チケットの情報を引き
継ぐ
Path pattern: /issues/[0-9]+$
Type: JavaScript
Code: $(function(){
// 子チケットの追加リンクを取得
var addLink = $('#issue_tree a[href*="/issues/new"]')[0];
if (!addLink) {
return;
}
// 対象バージョンがあれば子チケットの追加リンクにパラメータ追加
var version = $('#issue_fixed_version_id').val();
if (version) {
addLink.href += '&issue%5Bfixed_version_id%5D=' + version;
}
});
• リンクにパラメータを追加してあげることにより、チケッ
ト作成時の初期値(カスタムフィールドを含むすべての項
目)を指定可能

17. 子チケット追加時に親チケットの情報を引き
継ぐ
子チケット追加のリンク押下
で新しいチケットを作成した
際に、情報が引き継がれる

18. Sample 5
サイドバーを開閉式にして
画面を広く使えるようにする

19. サイドバーを開閉式に
Path pattern: .*
Type: JavaScript
Code: 100行超えるスクリプトになるので、コード全体は下記参照
https://github.com/onozaty/redmine-view-customize-
scripts/blob/master/toggle_sidebar.js
• JavaScriptで頑張れば、結構なんでもできる

20. サイドバーを開閉式に
クリックで開閉

21. Sample 6
進行中のステータスにおける
担当者の入力漏れを防ぐ

22. 進行中のステータスで担当者を必須に
Path pattern: /issues/
Type: JavaScript
Code: $(function() {
$('#issue-form input[type="submit"]')
.on('click', function(event) {
var statusId = $('#issue_status_id').val();
var assignedId = $('#issue_assigned_to_id').val();
if (statusId == '2' && !assignedId) { // 2:進行中
alert('進行中にもかかわらず担当者が設定されていません。');
return false;
}
});
});
• チケット作成、更新時のsubmitにフックして独自にチェッ
ク処理を差し込むイメージ

23. 進行中のステータスで担当者を必須に
進行中ステータスの状態で
送信ボタンを押下した際に、
警告ダイアログがでる

24. Sample 7
チケット作成時にトラッカーに応じて
デフォルト値を変更する

25. トラッカーに応じてデフォルト値を変更
Path pattern: /issues/new$
Type: JavaScript
Code: $(function() {
$('#all_attributes').change(function(e) {
if (e.target.id == 'issue_tracker_id') {
// トラッカーが変わった場合にデフォルト値を切り替え
setDefalutValue();
}
});
var setDefalutValue = function() {
// トラッカーに応じてデフォルト値を設定
~ 省略 ~
}
// 現在選択されているものをもとに
setDefalutValue();
});
コード全体は下記参照
https://github.com/onozaty/redmine-view-customize-
scripts/blob/master/set_default_value_at_change_tracker.js

26. トラッカーに応じてデフォルト値を変更
トラッカーを切り替えたタ
イミングでデフォルト値も
切り替わる

27. ほかにもいろいろ

28. ほかにもいろいろ
• ステータス変更に連動して、その他の項目(担当者
や進捗など)を変える
• 新規チケット作成時に担当者をデフォルト自分に
• 担当者のセレクトボックスで、特定のルールでグ
ループ化して選択しやすいように
• ショートカットキーを追加
• 全画面にお知らせを表示
などなど

29. 参考
• 本資料に書かれた設定を行ったVagrant box
• https://atlas.hashicorp.com/onozaty/boxes/redmine-
viewcustomize
• スクリプトの一覧
• https://github.com/onozaty/redmine-view-customize-
scripts (すいません、これから追加整理予定です)
• Redmineの画面で振られているclass属性について
- Enjoy*Study
• http://blog.enjoyxstudy.com/entry/2014/10/11/000000