View Customize Pluginで出来ること

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

Transcript

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