Redmineの画面カスタマイズに便利なView customize plugin

3行で言うと…


杠です。Redmineの様々なプラグインが存在しますが、今回JavaScriptやCSSで画面をカスタマイズできる「View customize plugin」について書きます。

View customize pluginとは

Redmineを使っていると、「ここの色を変えたいな」「項目の位置を変えたいな」などちょっとしたカスタマイズがしたいと思うことがあると思います。View customize pluginを利用することで簡単にそのようなことができてしまいます!

View customize plugin for Redmine
https://github.com/onozaty/redmine-view-customize

先ほど少し書いたとおり、View customize pluginとはJavaScriptやCSSをRedmineに埋め込むことができるプラグインで、画面を自由にカスタマイズすることができます。インストールも簡単で、JavaScriptやCSSのちょっとした知識があれば誰でも簡単にRedmineをカスタマイズできます。インストール手順や利用方法を作者の方が丁寧にまとめていらっしゃるので簡単に使い始めることができます。自分が書いたJavaScriptやCSSのコードを適用すると、すぐに表示を確認できるのでとても手軽です。また自分の環境でのみ表示を試してから、全体へ適用することもできる「プライベート」機能があるので安心です。


この画面でカスタマイズを作成します。

View customize pluginでJavaScriptの勉強

My RedmineではデフォルトでView customize pluginを導入しています。お客様からの問い合わせ内容により、View customize pluginで表示を試してご案内することもあります。初めの頃は、まずJavaScriptの知識が全くなかったので書き方などが分からず教えてもらうことが多かったです。そこから、徐々にある程度調べるだけでどのようにコードを書けば良いのか分かるようになっていきました。表示がうまくいかない時は何度も変更して試すので、View customize pluginのすぐにカスタマイズを適用できる点が改めてとても便利だなと感じました。慣れれば自分の思い通りにカスタマイズすることができます。うまくいくとちょっとした達成感もあります。お客様の中でも、ご自分でコードを考えてカスタマイズをされる方もいらっしゃいます。

様々な方がカスタマイズの事例を公開しているので、そのまま適用してみたり、活用して別のカスタマイズを作成してみたりできます。最初はサイトで紹介されているコードなどをそのままコピーしてどのような表示になるのか試してみて、内容をじっくり見てみるとちょっとした勉強にもなると思います。

カスタマイズの例

プラグイン無しでテンプレート機能を実現するカスタマイズです。「新しいチケット」タブをクリックしてチケット作成画面を開いたときに、トラッカー、説明、担当者をあらかじめ決まった内容にセットします。

設定内容


Path Pattern: /

Type: JavaScript

Code: $(function(){ $("a.new-issue").attr("href","https://my.redmine.jp/アカウント/projects/プロジェクトの識別子/issues/new?issue[subject]=&issue[description]=h2.%20%E6%A6%82%E8%A6%81%0A%0Ah2.%20%E5%86%8D%E7%8F%BE%E6%89%8B%E9%A0%86%0A%0Ah2.%20%E6%9C%9F%E5%BE%85%E3%81%95%E3%82%8C%E3%82%8B%E7%B5%90%E6%9E%9C%0A%0Ah2.%20%E5%AE%9F%E9%9A%9B%E3%81%AE%E7%B5%90%E6%9E%9C%0A%0Ah2.%20%E4%BD%BF%E7%94%A8%E7%92%B0%E5%A2%83&issue[tracker_id]=1&issue[assigned_to_id]=5") });


このほかにも、弊社のWebサポート窓口のWikiに、お客様からのお問い合わせをもとに作ったカスタマイズ例をおよそ20件掲載しています(Webサポート窓口のアカウントがあればご覧いただけます)。

View customizeプラグインを利用した画面のカスタマイズ

表示結果


「説明」内にテンプレートを表示するようにしています。

終わりに

View customize pluginで色々なカスタマイズを試してみて、JavaScriptの勉強になりました。ある程度のカスタマイズであれば実現可能ですが、Redmineの画面内に表示な必要な情報がなかったりすると逆にできないこともあるんだなと学びました。簡単にカスタマイズができるということで、いろんな部分にカスタマイズを作成して適用したいですよね。とても便利ですがRedmineのバージョンアップによって適用しているカスタマイズがうまく表示されなくなる可能性があります。また使用するOSやブラウザによって表示が違っていることもあるので、都度チェックが必要ですね。

こちらの記事もオススメです!
JANOG41ミーティング出展報告 Redmineによるインシデント管理デモを初展示
CSIRTやSOCなどのインシデント管理のデモを行いました。
PlanioスマートフォンスタンドをAlibabaで中国企業に発注した全過程
新ノベルティグッズ「Planioスマートフォンスタンド」を作りました。グッズの制作・発注の全過程を紹介します。
初挑戦のETロボコンプロジェクト、始動しました
ロボットを動かすための組み込みソフトウェアを競う大会「ETロボコン」に初めて挑戦することになりました。
社内初のフルリモートワーク社員、在宅勤務について語る
2月末にファーエンドテクノロジーに入社し、社内初のフルリモート勤務社員として自宅で仕事をしています。
中国深圳にRedmineロゴ入りQiワイヤレスチャージャーを発注してみた
新ノベルティグッズとして竹製Qiワイヤレスチャージャーを中国の業者に直接発注しました。
ファーエンドテクノロジーからのお知らせ(2018/5/23更新)
WordCamp Osaka 2018(6/2〜3開催) でSilverスポンサーとして協賛、Redmineのブースを出展
オープンソースのプロジェクト管理ソフトウェア「Redmine」についてのご相談にお応えします。
APPS JAPAN 2018(6/13〜15開催) にRedmineのブースを出展
Redmineのクラウドサービス「My Redmine」と「Planio」をご紹介いたします。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け