2018/01/23
WBSガントチャート徹底活用シリーズ5：スタイルを変更してみんなと共有してみよう
本記事で紹介している設定について現在は推奨しておりません。
WBSガントチャートのカラー設定については、9.13.0 にてリリース しておりますのでそちらをご利用ください。
Author
熊井 亮輔Ryosuke Kumai
こんにちは。リックソフトの熊井です。
先月リリースされたFireFox Quantumがとにかく早かった（従来比２倍のブラウジング速度らしいです）ので、ChromeからFireFoxに乗り変えようかなーと思う今日この頃です。他にも痒いところに手がとどく便利な機能があるみたいだし、よく利用する「プライベートブラウジング」だとさらに早くなるとのことで、今後、FireFoxはChromeにつけられた差をどこまで挽回できるかとても気になります。
FireFoxネタで始まったところで、それに関連して、今回はFireFoxアドオンでWBSガントチャートのスタイルを変更して、みんなと共有する小ネタを紹介させて頂きます。
WBSガントチャートのスタイル変更について
最新バージョン9.3.1(2017/12/19 時点)では製品側でスタイルを変更するといった機能はなく、お客様からは「進捗バーが見づらいので色を変更して目立たせたい。」、「親タスクのバーが休日の色と同じ系統の緑色で見づらいので変更して目立たせたい。」といった要望はよく聞くので何とかならないかなと思ってたところ、リックソフトAtlassianコミュニティでリックソフト有志が、JIRAのお知らせバナーにCSSを埋め込むことでガントチャートのスタイルを変更する方法を投稿してくれていました。これは簡単に実現できる方法で私にとっては目にウロコでした！
JIRAのWBSガントチャートのガントバーの配色を変更したい
紹介するだけではここで終わってしまうので、このアイデアを少し発展させて、お知らせバナーにCSSを埋め込む依頼をJIRA管理者にせずに、ユーザーごとにスタイルの変更して、みんなと共有する方法を紹介してみようと思います。
手順
- FireFoxを開いて「stylish」アドオンをインストールします。(https://addons.mozilla.org/ja/firefox/addon/stylish/)
- 「stylish」にアクセスして「Create New Style」ボタンをクリックして新たにスタイルを作ってみます。(https://userstyles.org/)
- スタイルは必要最低限の項目を埋める形で以下のように作ります。NameとDescriptionはここでは適当に入れてます。
- Name
- Description
- CSS
- 上記の設定で重要なのはもちろんCSSの部分です。ここでは@-moz-document domainに弊社のsandbox環境のドメインを設定していますが、ご利用のJIRAの環境に合わせてドメインを変更してください。
- 「Save」ボタンを押して保存してしばらくすると作成したスタイルが表示されるので「Install Style」ボタンでスタイルをインストールします。
- インストールしたら、先ほどCSSに設定したドメインのsandbox環境のガントチャートにアクセスしてみます。アクセスしたらFireFoxツールバーの「stylish」ボタンをクリックして「Stylish OFF」ボタンをクリックして「Stylish ON」の状態にしてください。
- スタイル変更前は以下のようなスタイルだったのが…
- スタイル変更後は以下のように少し目立たせることができました。
- あとは他のユーザーとのスタイルの共有となります。「stylish」で作成したスタイルは公開されますので、ドメインで指定したJIRAを利用しているユーザーと共有することができます。今回作成したスタイルは以下のURLからインストールすることができます。
https://userstyles.org/styles/153097/ricksoft-wgc-style
Ricksoft WGC Style
Sample
@-moz-document domain(www.ricksoft.jp)
{
/* 子タスク */
.sch-gantt-task-bar
{
border: 1px solid #3172d7 !important;
background-color: #e5ecf5 !important;
}
/* 子タスク 進捗 */
.sch-gantt-progress-bar
{
background-color: #7972E2 !important;
}
/* 子タスク ベースライン */
.sch-gantt-task-baseline .sch-gantt-task-bar
{
border: 1px solid #d8bfd8 !important;
background-color: #d8bfd8 !important;
}
/* 親タスク(バージョン) */
.sch-gantt-parenttask-bar
{
border-color: #ffbc00 !important;
background-color: #ffbc00 !important;
}
/* 親タスク(バージョン) 進捗 */
.sch-gantt-parenttask-bar .sch-gantt-progress-bar
{
background-color: #fff3a5 !important;
}
/* 親タスク(バージョン) ベースライン */
.sch-gantt-parenttask-baseline .sch-gantt-parenttask-bar
{
border: 1px solid #fff3a5 !important;
background-color: #fff3a5 !important;
}
}
終わりに
今回はFireFoxの「stylish」で手順を説明しましたが、どうやらChromeでも同じアドオンがあるようですね。ブラウザのアドオンを入れることが難しい場合はMozillaで紹介されているuserContent.cssでカスタマイズする方法のあるようなので試してみるのも良いかと思います。今後、製品で対応されるとは思います(たぶん)が今しばらくお待ちください！
お気軽にご相談ください。
