Redmine_View_Customize
- Redmine View Customizeのインストール。
- Redmine View Cutomizeを用いてアイコンを拡大表示させる。
- Redmine View Customizeを用いて、alt属性がついた画像を拡大して表示する。
- Redmineのステータスをクローズにすると同時に進捗率を100にするカスタマイズ
Redmine View Customizeのインストール。
概要
このView Customize Pluginは言うなれば「Redmineにおけるアーミーナイフ」です。
Redmine上の
- ちょっとした挙動の修正
- 見た目の変更
- メニューの追加
など、細かい修正をGUI上で行うことができます。しかも、ここで行った修正自体がRedmineのDBに保存されるため、他のサイトへの移設やバージョンアップ時にもソースをいじることがありません。
プラグイン名
- redmine-view-customize
動作を確認した環境
- Redmine 4.2
- Redmine 5.1
- MySQL (なぜかMariaDBではうまくいきませんでした)
導入時
- Gem追加:要
- DBマイグレーション:要
手順
さっくりとした手順
- SSHログイン後、Redmineプラグインに移動
- gitでレポジトリを「リネームして」ダウンロード
- 新規ジェムをインストール
- DBマイグレーション
- 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
動作
- Redmineに管理者アカウントでログインします。
- 管理>表示のカスタマイズと表示されれば設定完了です。
メンテナによるサンプルがありますので、こちらを参考に設定していきます。
https://github.com/onozaty/redmine-view-customize-scripts
Redmine View Cutomizeを用いてアイコンを拡大表示させる。
概要
アイコンの画像にマウスを近づけたとき、
アイコンを拡大表示させるためのView_Customizeのスクリプトです。
前提
- Redmine View Customize がインストールされていること。
- Redmine 5.1で動作を確認しています。
手順
画面移動
- Redmineに管理者権限でログインします。
- 管理>表示のカスタマイズに移動します。
カスタマイズ作成:JavaScript
表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。
以下の通りに入力します。
- パスのパターン
- 空白
- プロジェクトのパターン
- 空白
- 挿入位置
- 全ページのヘッダ
- 種別
- 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' // 縮小のスムーズなアニメーション
});
}
);
});
- コメント
- 任意「アイコンのホバー表示(javascript)」など
- 有効
- チェック
- プライベート
- チェックを外す
設定後、保存をクリックします。
カスタマイズ作成:CSS
表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。
以下の通りに入力します。
- パスのパターン
- 空白
- プロジェクトのパターン
- 空白
- 挿入位置
- 全ページのヘッダ
- 種別
- CSS
コード
/* gravatarクラスを持つ画像のスタイル */
img.gravatar {
transition: transform 0.3s ease; /* スムーズなアニメーション */
cursor: pointer; /* ポインタを表示 */
}
- コメント
- 任意「アイコンのホバー表示(CSS)」など
- 有効
- チェック
- プライベート
- チェックを外す
設定後、保存をクリックします。
動作を確認します。
上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。
冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。
Redmine View Customizeを用いて、alt属性がついた画像を拡大して表示する。
https://barrel.reisalin.com/books/redmine-bsA/page/redmine-view-cutomize
こちらの記事の応用となります。
のように、alt属性がついた画像をマウスオーバーしたときに
拡大表示させます。
前提
- Redmine View Customize がインストールされていること。
- Redmine 5.1で動作を確認しています。
手順
画面移動
- Redmineに管理者権限でログインします。
- 管理>表示のカスタマイズに移動します。
カスタマイズ作成:JavaScript
表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。
以下の通りに入力します。
- パスのパターン
- 空白
- プロジェクトのパターン
- 空白
- 挿入位置
- 全ページのヘッダ
- 種別
- 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);
- コメント
- 任意「alt画像のホバー表示(javascript)」など
- 有効
- チェック
- プライベート
- チェックを外す
設定後、保存をクリックします。
動作を確認します。
上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。
冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。
Redmineのステータスをクローズにすると同時に進捗率を100にするカスタマイズ
個人メモとして利用しているRedmine。ステータスに応じて進捗率を設定してしまうと、トラッカーが追えなくなるため、以下のカスタマイズを行いました。
スクリプトの内容
-
Redmineに管理者権限でログインします。
- 管理>表示のカスタマイズに進みます。
- 新しい表示のカスタマイズを選択し、
- パスのパターン:空白
- 挿入位置:全ページのヘッダ
- 種別:JavaScript
- コード
$(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);
}
});
動作の解説
- チケットのステータスが変更されると、指定された閉じられたステータスIDの場合は、自動で進捗率が100%に変更されます。
- その他のステータスに変更された場合は、初回に保存した元の進捗率に戻されます。
これで、進捗率を維持しつつステータスの変更が可能になります。