Redmine_View_Customize


Redmine View Customizeのインストール。

概要

このView Customize Pluginは言うなれば「Redmineにおけるアーミーナイフ」です。

Redmine上の

など、細かい修正をGUI上で行うことができます。しかも、ここで行った修正自体がRedmineのDBに保存されるため、他のサイトへの移設やバージョンアップ時にもソースをいじることがありません。

プラグイン名

動作を確認した環境

導入時

手順

さっくりとした手順

  1. SSHログイン後、Redmineプラグインに移動
  2. gitでレポジトリを「リネームして」ダウンロード
  3. 新規ジェムをインストール
  4. DBマイグレーション
  5. Webサービス再起動

Redmineプラグインディレクトリに移動します。

cd /home/www-data/redmine/plugins && pwd

プラグインを配置します。ついでにリネームを行います。

sudo -u www-data git clone https://github.com/onozaty/redmine-view-customize.git view_customize

リポジトリ名は「redmine-view-customize」ですが、システム名称が「view_customize」です。単純ですがハマりやすいポイントです。

ls -ld view_customize

このディレクトリがあることを確認します

Redmineルートディレクトリに移動します。

cd /home/www-data/redmine && pwd

自分の環境に合わせます。

Gemをインストールします

sudo -u www-data bundle install

DBのマイグレーションを行います。

sudo -u www-data bundle exec rake redmine:plugins:migrate RAILS_ENV=production

Webサービスを再起動します。

sudo systemctl restart apache2

動作

  1. Redmineに管理者アカウントでログインします。
  2. 管理＞表示のカスタマイズと表示されれば設定完了です。

メンテナによるサンプルがありますので、こちらを参考に設定していきます。

https://github.com/onozaty/redmine-view-customize-scripts

Redmine View Cutomizeを用いてアイコンを拡大表示させる。

概要

アイコンの画像にマウスを近づけたとき、

アイコンを拡大表示させるためのView_Customizeのスクリプトです。

前提

手順

画面移動

  1. Redmineに管理者権限でログインします。
  2. 管理＞表示のカスタマイズに移動します。

カスタマイズ作成：JavaScript

表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。

以下の通りに入力します。

コード

$(document).ready(function() {
// gravatarクラスを持つ画像にホバーイベントを追加
$('img.gravatar').hover(
function() {
$(this).css({
'transform': 'scale(1.5)', // 拡大率
'transition': 'transform 0.3s ease' // 拡大のスムーズなアニメーション
});
},
function() {
$(this).css({
'transform': 'scale(1)', // 元のサイズに戻す
'transition': 'transform 0.3s ease' // 縮小のスムーズなアニメーション
});
}
);
});

設定後、保存をクリックします。

カスタマイズ作成：CSS

表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。

以下の通りに入力します。

コード

/* gravatarクラスを持つ画像のスタイル */
img.gravatar {
transition: transform 0.3s ease; /* スムーズなアニメーション */
cursor: pointer; /* ポインタを表示 */
}

設定後、保存をクリックします。

動作を確認します。

上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。

冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。

Redmine View Customizeを用いて、alt属性がついた画像を拡大して表示する。

https://barrel.reisalin.com/books/redmine-bsA/page/redmine-view-cutomize

こちらの記事の応用となります。

のように、alt属性がついた画像をマウスオーバーしたときに

拡大表示させます。

前提

手順

画面移動

  1. Redmineに管理者権限でログインします。
  2. 管理＞表示のカスタマイズに移動します。

カスタマイズ作成：JavaScript

表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。

以下の通りに入力します。

コード

// JavaScript部分
$(document).ready(function() {
$('img[alt]').hover(
function() {
$(this).css({
'transform': 'scale(1.5)',
'transition': 'transform 0.3s ease'
});
},
function() {
$(this).css('transform', 'scale(1)');
}
);
});

// CSS部分
var style = document.createElement('style');
style.innerHTML = `
img[alt] {
transition: transform 0.3s ease;
}
`;
document.head.appendChild(style);

設定後、保存をクリックします。

動作を確認します。

上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。

冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。

Redmineのステータスをクローズにすると同時に進捗率を100にするカスタマイズ

個人メモとして利用しているRedmine。ステータスに応じて進捗率を設定してしまうと、トラッカーが追えなくなるため、以下のカスタマイズを行いました。

スクリプトの内容

  1. Redmineに管理者権限でログインします。

    1. 管理＞表示のカスタマイズに進みます。
    2. 新しい表示のカスタマイズを選択し、
      1. パスのパターン:空白
      2. 挿入位置:全ページのヘッダ
      3. 種別:JavaScript
      4. コード
$(document).on('change', '#issue_status_id', function () {
  const closedStatuses = [5, 6]; // 閉じられたステータスIDを指定（例: 5: 完了, 6: 却下）
  const selectedStatus = parseInt($(this).val(), 10);

  // 元の進捗率を保存するための変数
  let originalDoneRatio = $('#issue_done_ratio').data('original-done-ratio');

  if (!originalDoneRatio) {
    // 初回実行時に元の進捗率を保存
    originalDoneRatio = $('#issue_done_ratio').val();
    $('#issue_done_ratio').data('original-done-ratio', originalDoneRatio);
  }

  if (closedStatuses.includes(selectedStatus)) {
    $('#issue_done_ratio').val('100'); // 進捗率を100%に設定
  } else {
    // 元の進捗率に戻す
    $('#issue_done_ratio').val(originalDoneRatio);
  }
});

動作の解説

  1. チケットのステータスが変更されると、指定された閉じられたステータスIDの場合は、自動で進捗率が100%に変更されます。
  2. その他のステータスに変更された場合は、初回に保存した元の進捗率に戻されます。

これで、進捗率を維持しつつステータスの変更が可能になります。