【簡単！】Redmineでちょっとした面倒な作業を効率化する方法(view-customise-plugin)

こんにちは。
はけです。

普段はWEB系プロジェクトのSEをやっています。
プロジェクトの課題管理ツールとしてRedmineをふだん使用しています。

Redmineを使っていると。。。

• ちょっとしたことだけど毎回同じことをしないといけなくてめんどくさい！！
• 少し変えれば使いやすくできるのにそれを自分でカスタマイズする方法がわからない！

といったことを時々感じないでしょうか。

例えばプロジェクトごとのWikiを開くときも①プロジェクトに移動して、
②Wikiタブを開いて、、という操作が必要になります。

若干の煩わしさですが、毎日2回、3回と開くようであれば小さな時間もどんどん積もっていきます。。

そういった若干煩わしい作業を快適にしてくれるツールが、
今回紹介する「view-customise-plugin」プラグインになります。

このプラグインを使うと、Javascriptやcssを使って画面のデザインや操作を自分好みにカスタマイズすることができます。

今回の記事ではこの「view-customise-plugin」プラグインのインストール方法と使い方まで解説していきます！

私もふだん実際に使っており、誰でも簡単にできるように事例つきで紹介していますのでぜひ参考にしてくださいね！

Redmineでちょっとしたカスタマイズを実施する方法(view-customise-plugin)

view-customise-pluginのインストールは次の3STEPで行います。

• view-customise-pluginをpluginsフォルダにダウンロードする
• DBマイグレーションを行う
• Redmineを再起動する

さらにインストール後は「カスタマイズ機能を作成する」ことで、カスタマイズ機能を使うことができるようになります。

それぞれ順番に解説していきます！

実行環境

• Windows10
• Redmine4.1.1.stable
• view-customise-plugin2.8.1

view-customise-pluginをpluginsフォルダにダウンロードする

まずは「view-customise-plugin」をダウンロードします。

ダウンロード先は「plugins」フォルダ内になります。
コマンドプロンプトで次のコマンドを実行してください。

cd C:\Bitnami\redmine\apps\redmine\htdocs\plugins
git clone https://github.com/onozaty/redmine-view-customize.git view_customize

すると画像のように「plugins」フォルダにダウンロードできます。

DBマイグレーションを行う

次にプラグインの情報を整理しDBに更新(マイグレーション)しています。
先ほどと同じようにコマンドプロンプトで次のコマンドを打ってください。
（１行ずつ実行するようにしてください）

cd C:\Bitnami\redmine
.\use_redmine.bat
cd C:\Bitnami\redmine\apps\redmine\htdocs
bundle install --without development test
bundle exec rake redmine:plugins:migrate RAILS_ENV=production

Redmineを再起動する

最後にRedmineを再始動します。

Bitnami Redmine Stackを開き、「Restart All」でRedmineを再起動していきましょう！

再起動が終了すれば、インストールは完了です。

これでインストールが完了しました！

インストール確認を行う

では再起動が完了すると実際にインストールが完了しているか確認していきます。

Redmineにログイン後、[管理] → [プラグイン]で現在の使用しているプラグイン一覧が確認できます。

ここで「View Customize plugin」が表示されていれば無事インストールは完了です。

次の章からは具体的にどうやってカスタマイズ機能をつくるのかを解説していきます。

実際にview-customise-pluginを使ってみる

ではインストールが完了しましたのでさっそくpluginを使う方法を簡単に紹介していきたいと思います。

今回は仮に「kanban」プラグインで追加した「かんばん」タブにデフォルトのチケット状態を表示する機能を追加してみます。

「kanban」プラグインはかんばん方式でチケットを表示できるようにする機能で、チケットの状態や担当者を見える化します。

このプラグインでは表示する内容を毎回手動で選択してから表示しなおす必要があり、そこにカスタマイズ機能をつけることとなりました。

「kanban」プラグインをインストールしておらず、インストールしてみたいという方は、別の記事でインストール方法を紹介していますので、参考にしてみてください。
Redmineのチケットをカンバン方式で管理する方法【簡単！】

なお「kanban」プラグインを持っておらず、他の内容で試してみたいという方は「view-customise-plugin」のサンプル集が存在しているのでそこからよさそうなのを選んで試してみてください。
実装サンプル集(view-customise-plugin)

カスタマイズ機能をつくる

「管理」 → 「表示のカスタマイズ」で表示のカスタマイズを開きます。
さらに「新しい表示のカスタマイズ」を押すことでカスタマイズ機能をつくる画面を開くことができます。

カスタマイズ機能詳細をつくる

追加する機能（目標）

まずは追加する機能を整理しておきます。

次の画像のように「新規～解決」リンクを追加し、リンクを押すことで指定したフィールドを選択した状態でチケット表示を更新します。

「新規～解決」リンクを押すことで次の画像のようにフィールドを更新します。

こうすることで毎回発生する①チェックボックスを押す、②適用するの手順をリンクを押すだけで実現することができるようになります。

追加する機能を実装する

では実際にリンクをつくっていきます。
「新しい表示のカスタマイズ」を押すと次の6つの内容を入力することができます。

それぞれ次のように指定していきます。

指定したいプロジェクトの「概要」を開いたときにURLの一番最後に表示されるのがプロジェクトのIDになります。

/*
カンバンタブでデフォルトのステータスを切り替える
ステータスを以下にする。
＜ステータス＞
  新規、進行中、解決
Path pattern: /kanban*
Type: JavaScript
*/
// 定数定義
// ボタン(リンク)名
var showAllStr = '新規～解決';
// ボタン配置対象のｉｄ
var idFilterContent = '#lower_filters';
// ステータスチェックボックスのｉｄ
var idStatusCheck = '#status_fields_';
// チェックする/外すステータスのリスト
var unchecked_list = [5,6]
var checked_list = [1,2,3,4]

// メイン処理
$(function(){
    // リンク文字列作成
    var toggleLink = '<a href="#" onclick="javascript:toggleStatusFunc(this);">' +
        '<span class="icon icon-checked">' + showAllStr + '</a>';
    // バージョン情報テーブル上部にリンク挿入
    $(idFilterContent).append(toggleLink);
});

// 機能に応じたステータスをチェックする
function toggleStatusFunc(content) {
    $(function(){
        // unchecked_listに応じてチェックを外す。
        unchecked_list.forEach(function(element){
            $(idStatusCheck + element).prop('checked', false);
        });
        // checked_listに応じてチェックをつける。
        checked_list.forEach(function(element){
            $(idStatusCheck + element).prop('checked', true);
        });
        $('#form1').submit();
    });
}

若干コード量が多いので難しく感じるかもしれませんが、やっていることはあまり多くありません。

コードの中身の説明は本題ではないのでさらっと説明していきます。

• メイン処理の部分でリンクのHTMLを追加し、そのリンクのクリックイベント(onclick)に「toggleStatusFunc」を設定しています。
  こうすることで、リンクがクリックされたときに「toggleStatusFunc」の関数を実行することができます。
• toggleStatusFuncでは、①チェックを外したいフィールドのチェックを外し、②チェックをつけたいチェックをつけます。
  ③その後、更新したチェック状態のカンバン表示に再表示しています。

チェックを外したいフィールドは「var unchecked_list = [5,6]」、チェックをつけたいフィールドは「var checked_list = [1,2,3,4]」でそれぞれ定義しています。

詳しくはかんばんタブ表示時のHTMLを確認する必要がありますが、デフォルトの場合次のようになっていました。

• １：新規
• ２：進行中
• ３：解決
• ４：フィードバック
• ５：終了
• ６：却下

この状態でかんばんタブを開くと次のようにリンクが追加されています。

さらに追加されたリンクを押してみると、フィールドが更新されその状態で画面も更新されることがわかります。

これで、日々のひとつずつチェックボックスを押して、、、適用リンクを押して、、、という面倒な作業をリンクを押す動作一発でできるようになりました！！

このように日々のちょっとした面倒な操作やデザインの表示を
「view-customise-plugin」を使うことで変えることができます。

ちなみにこのコードは難しいという方は、もっと単純な機能をカスタマイズすることから始める方がいいかもしれません。

次のリンク先のサンプル集で簡単そうなものを選んで試してみてください。
実装サンプル集(view-customise-plugin)

まとめ

本記事では「view-customise-plugin」のインストール方法と実際の使い方を紹介しました。
インストール方法は次の3STEPでできます。

• view-customise-pluginをpluginsフォルダにダウンロードする
• DBマイグレーションを行う
• Redmineを再起動する

カスタマイズ機能の作り方の解説ではかんばんタブのフィールドを更新する機能を作っていきました。

みなさまも探せばちょっとこの操作面倒だな。。。と思うことがあると思います。
そんな時にこのツールを使ってみて、普段の作業を効率化しましょう！！！

以上、これからもWEB開発でつまずいたことや役に立つ情報を配信していきます。