View Customize Pluginで出来ること
•
19 likes•52,475 views
第9回 redmine.tokyo のLTで発表したView Customize Plugin for Redmineの紹介です。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to View Customize Pluginで出来ること
Similar to View Customize Pluginで出来ること (20)
More from onozaty
View Customize Pluginで出来ること
- 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を埋め込む 機能を提供
- 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を設定
- 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が指定されているので、それ を活用。テーマでも同じことができる。
- 13. ヘッダメニューにリンクを追加 Path pattern: .* Type: JavaScript Code: // 全てのチケット一覧リンクをヘッダに $(function() { $('#top-menu > ul') .append('<li><a href="/issues">全てのチケット</a></li>'); }); • ドキュメントのロード完了時にヘッダにリンクを追加する • Redmineのすべての画面でjQueryが読み込まれている (2.1.0以降)ので、jQueryの関数使うといろいろ楽になる
- 14. ヘッダメニューにリンクを追加
- 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; } }); • リンクにパラメータを追加してあげることにより、チケッ ト作成時の初期値(カスタムフィールドを含むすべての項 目)を指定可能
- 19. サイドバーを開閉式に Path pattern: .* Type: JavaScript Code: 100行超えるスクリプトになるので、コード全体は下記参照 https://github.com/onozaty/redmine-view-customize- scripts/blob/master/toggle_sidebar.js • JavaScriptで頑張れば、結構なんでもできる
- 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にフックして独自にチェッ ク処理を差し込むイメージ
- 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
- 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