Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

View Customize Pluginで出来ること

25,727 views

Published on

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

Published in: Technology
  • Be the first to comment

View Customize Pluginで出来ること

  1. 1. View Customize Pluginで できること 2015-11-28 第9回redmine.tokyo勉強会 Hirokazu Onozato (onozaty)
  2. 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. 3. View Customize Plugin • View Customize Plugin https://github.com/onozaty/redmine-view-customize • Redmineの画面をカスタマイズするためのPlugin • 特定の画面に対して、JavaScript、CSSを埋め込む 機能を提供
  4. 4. 設定方法 コードを実行するパス(URL)。 正規表現で記載。 実行するコード。 JavaScript または StyleSheet(CSS)で書く。 Redmineの画面で使用され ているjQueryも使える。 (Redmineのバージョンに よってライブラリが違うの で注意) プライベートにチェックを入れると、作成したユーザ のみに有効 →個人で動作確認して、OKだったら全員に反映すると いったことができる
  5. 5. どういうカスタマイズをするかは ユーザ次第 次からのサンプルを カスタマイズのご参考に
  6. 6. Sample 1 プロジェクト毎にヘッダを変えて プロジェクトを識別しやすいように
  7. 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. 8. プロジェクト毎にヘッダを変える
  9. 9. Sample 2 チケット一覧を識別しやすいように
  10. 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. 11. チケット一覧を識別しやすいように 設定前 設定後
  12. 12. Sample 3 よくアクセスするページのリンクを ヘッダメニューに追加する
  13. 13. ヘッダメニューにリンクを追加 Path pattern: .* Type: JavaScript Code: // 全てのチケット一覧リンクをヘッダに $(function() { $('#top-menu > ul') .append('<li><a href="/issues">全てのチケット</a></li>'); }); • ドキュメントのロード完了時にヘッダにリンクを追加する • Redmineのすべての画面でjQueryが読み込まれている (2.1.0以降)ので、jQueryの関数使うといろいろ楽になる
  14. 14. ヘッダメニューにリンクを追加
  15. 15. Sample 4 子チケット追加時に親チケットの 情報を引き継いで入力の手間を減らす
  16. 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. 17. 子チケット追加時に親チケットの情報を引き 継ぐ 子チケット追加のリンク押下 で新しいチケットを作成した 際に、情報が引き継がれる
  18. 18. Sample 5 サイドバーを開閉式にして 画面を広く使えるようにする
  19. 19. サイドバーを開閉式に Path pattern: .* Type: JavaScript Code: 100行超えるスクリプトになるので、コード全体は下記参照 https://github.com/onozaty/redmine-view-customize- scripts/blob/master/toggle_sidebar.js • JavaScriptで頑張れば、結構なんでもできる
  20. 20. サイドバーを開閉式に クリックで開閉
  21. 21. Sample 6 進行中のステータスにおける 担当者の入力漏れを防ぐ
  22. 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. 23. 進行中のステータスで担当者を必須に 進行中ステータスの状態で 送信ボタンを押下した際に、 警告ダイアログがでる
  24. 24. Sample 7 チケット作成時にトラッカーに応じて デフォルト値を変更する
  25. 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. 26. トラッカーに応じてデフォルト値を変更 トラッカーを切り替えたタ イミングでデフォルト値も 切り替わる
  27. 27. ほかにもいろいろ
  28. 28. ほかにもいろいろ • ステータス変更に連動して、その他の項目(担当者 や進捗など)を変える • 新規チケット作成時に担当者をデフォルト自分に • 担当者のセレクトボックスで、特定のルールでグ ループ化して選択しやすいように • ショートカットキーを追加 • 全画面にお知らせを表示 などなど
  29. 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

×