View Customize Pluginで できること

2015-11-28 第9回 redmine. tokyo勉強会

Hirokazu Onozato (onozaty)

自己紹介

• 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

View Customize Plugin

• View Customize Plugin https://github.com/onozaty/redmine-view-customize

• Redmineの画面をカスタマイズするためのPlugin

• 特定の画面に対して、JavaScript、CSSを埋め込む機能を提供

設定方法

コードを実行するパス(URL)。

正規表現で記載。

実行するコード。

JavaScript または

StyleSheet(CSS)で書く。

Redmineの画面で使用されているjQueryも使える。(Redmineのバージョンによってライブラリが違うので注意)

プライベートにチェックを入れると、作成したユーザのみに有効

→個人で動作確認して、OKだったら全員に反映するといったことができる

どういうカスタマイズをするかは ユーザ次第

次からのサンプルを カスタマイズのご参考に

Sample 1

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

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

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を設定

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

Sample 2

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

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

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が指定されているので、それを活用。テーマでも同じことができる。

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

設定前

設定後

Sample 3

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

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

Path pattern: .*

Type: JavaScript

Code: // 全てのチケット一覧リンクをヘッダに $(function() { $('#top-menu > ul') .append('<li><a href="/issues">全てのチケット</a></li>'); });

• ドキュメントのロード完了時にヘッダにリンクを追加する

• Redmineのすべての画面でjQueryが読み込まれている(2.1.0以降)ので、jQueryの関数使うといろいろ楽になる

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

Sample 4

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

子チケット追加時に親チケットの情報を引き継ぐ

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; } });

• リンクにパラメータを追加してあげることにより、チケット作成時の初期値(カスタムフィールドを含むすべての項目)を指定可能

子チケット追加時に親チケットの情報を引き継ぐ

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

Sample 5

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

サイドバーを開閉式に

Path pattern: .*

Type: JavaScript

Code: 100行超えるスクリプトになるので、コード全体は下記参照https://github.com/onozaty/redmine-view-customize-scripts/blob/master/toggle_sidebar.js

• JavaScriptで頑張れば、結構なんでもできる

サイドバーを開閉式に

クリックで開閉

Sample 6

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

進行中のステータスで担当者を必須に

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にフックして独自にチェック処理を差し込むイメージ

進行中のステータスで担当者を必須に

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

Sample 7

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

トラッカーに応じてデフォルト値を変更

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

トラッカーに応じてデフォルト値を変更

トラッカーを切り替えたタイミングでデフォルト値も切り替わる

ほかにもいろいろ

ほかにもいろいろ

• ステータス変更に連動して、その他の項目(担当者や進捗など)を変える

• 新規チケット作成時に担当者をデフォルト自分に

• 担当者のセレクトボックスで、特定のルールでグループ化して選択しやすいように

• ショートカットキーを追加

• 全画面にお知らせを表示

などなど

参考

• 本資料に書かれた設定を行った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