RedmineのViewCustomizePluginのカスタマイズ事例

はじめに

Redmineを使い始めていますが、View Customizeの自由度が素晴らしい。基本的にはこちらのカスタマイズ事例に助けられましたが、少しずつ自分のカスタマイズも増えてきたので事例を還元させてもらいます。

CSS関連

• 配色変更等はCSSで修正して、JavascriptはClass,IDの追加・削除のみにする。

/* 配色の変更・TopMenuの要素非表示 
Path pattern: .*
Type: StyleSheet
*/
/* チケットテーブルの行の背景色の変更 */
tr.priority-highest{ /*優先度:今すぐ*/
    background-color: #ff3333;
}
tr.priority-high2{ /*優先度:急いで*/
    background-color: #ff9999;
}
tr.priority-high3{ /*優先度:高め*/
    background-color: #ffdddd;
}
tr.priority-lowest{ /*優先度:低め*/
    background-color: #aaaaaa;
}
tr.overdue td.due_date{
    color: #ff0000;
    font-weight: bolder;
}
td.blank_due{ /*追加class：期日未設定*/
    background-color: #FFCC66;    
}
tr.not_start_task{ /*追加class：開始日前のISSUE*/
    background-color: #888888;
}
tr.not_start_task td.start_date{ /*追加class：開始日前のISSUE*/
    color: #dddddd;
}



/* TopMenuの不要リンクを削除 */
/* 1.EasyGantt(全体)は無料ではないので使えない */
div#top-menu a.easy-gantt{
   display:none;
}

/* 2.ヘルプリンクは外部URLなので削除 */
div#top-menu a.help{
   display:none;
}

/* 3.使いづらいので別のview customize codeで自動遷移させているため削除 */
div#top-menu a.home{
   display:none;
}

/* 3.リンク強調表示（自分の名前など。Javascriptでclass追加） */
a.emphasis{
    font-size: 110%;
    font-weight: bolder;
}

全頁へのカスタマイズ

• マイページの横にマイチケットを追加 (Queryは事前に作成しておく query_id=***)
• 自分の名前を強調表示(改)

/* 自分の名前を強調表示 
Path pattern:.* 
Type: JavaScript 
*/
$(function(){
  /* マイページの横にマイチケットを追加*/
  if( $("a.my-page").length ){
    $('a.my-page').parent().after('<li><a class="my-tickets" href="/redmine/issues?query_id=***">マイチケット</a></li>');
  }

  /* 自分の名前を強調表示 */
  var userUrl = $("div#loggedas a").attr("href");
  $("a[href='" + userUrl + "']").addClass("emphasis");
});

ISSUEページの配色カスタマイズ(javascriptでclass追加)

/* ISSUEページでの項目カスタマイズ
Path pattern:	/issues
Type:	JavaScript:
 */
$(function(){
  var today = new Date();
  $('table.list.issues td.start_date').each(function(){
    start_date_millsec = Date.parse($(this).text());
    if( today.getTime() - start_date_millsec < 0 ){
       $(this).parent().addClass('not_start_task');
    }
  });
});

ログイン画面へ利用者向けに文言追加

/* ログイン画面での支援 
Path pattern:/login$ 
Type:JavaScript 
*/
$(function(){
   /* 来そうなID,PASS関連の問合せを先回りして記載 */
   [].forEach.call(document.getElementsByTagName('label'),function(x){
      if( x.getAttribute('for')=='username' ){
         x.insertAdjacentText('afterend', '[困ったらここに連絡 ●●●だよ]');
      };
      if( x.getAttribute('for')=='password' ){
         x.insertAdjacentHTML('afterend', '(デフォルトPassは●●●だよ)');
      };
   });
   /* 「ログインを維持」をデフォルトでON */
   document.getElementById("autologin").checked = true;
});

ホーム画面は使わないので、ホームに来たアクセスを自動遷移

/* ホーム(URL直下)にアクセスしたらプロジェクトへ自動遷移 
Path pattern:/$ 
Type:JavaScript 
*/
$(function(){
    if(($('#loggedas').length)){
        /* ログイン中ならプロジェクト画面へ */
        window.location.href = "./projects";        
    }else{
        /* 未ログインならログイン画面へ */
        window.location.href = "./login";        
    }
});

プロジェクトページで直接easy-ganttを開く

/* プロジェクトでの葉プロジェクトは、リンクを概要ではなくEasy-ganttに変更 
Path pattern:/projects 
Type:JavaScript 
*/
$(function(){
  $("a.project.leaf").each(function() {
       $(this).text($(this).text()+"[ガント]");
       $(this).attr('href',$(this).attr('href')+"/easy_gantt");
  })
});

(おまけ) Piwik上でのユーザー識別にRedmineのユーザーIDを使用する

アクセス解析にPiwikを使っていますが、どうせならRedmineのユーザー毎に評価したかったので対応しました。

• ページLoad後に遅延させて読み込む
• ユーザーセットのReference

/*
Path pattern:.* 
Type:JavaScript 
*/
var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);

function embedTrackingCode() {
   var u="[piwik URL]";

   var user_id = "anonymous";
   if(($('div#loggedas').length)){
       user_id = $('#loggedas').text();
   }
   _paq.push(['setUserId', user_id]);

   _paq.push(["setTrackerUrl", u+"piwik.php"]);
   _paq.push(["setSiteId", "1"]);

   var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
   g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);    
}

if (window.addEventListener) { 
    window.addEventListener("load", embedTrackingCode, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload",embedTrackingCode); 
} else {
    embedTrackingCode();
}

今後やるかどうか判らないけど他のカスタマイズ事例

• RedmineのView Customize pluginでチケットの履歴をフィルタ → やった

• [要望2-5] Redmine の外部リンクから Referrer 情報を削除したい(どちらかと言うと Redmine 管理者観点での要望) → やった

• RedmineのView Customize pluginでカレンダーに祝日表示 → やったけどChromeで課題残る(jQuery-ui)ｚ

• Redmineでテンプレートごとにチケット作成リンクを表示させる

• Redmineのインポートページに自動ボタンを設置する

その他Redmineでやりたいこと

• 期限切れ等のチケットを担当者へメール通知
• Redmineからのメール送信は社内の都合で出来ないので、Python_redmineでデータ採取して、OLE経由で自分のOUTLOOKから送信