라이언즈소프트

Redmine 6.x バージョンに対応した「プロジェクトツリービュー」をリリースしました。

2025-07-24T16:24:07+09:00

Redmine 6.x バージョンに対応した「プロジェクトツリービュー」をリリースしました。

評価版が必要な場合は、以下のメールアドレスまでご連絡いただければ、評価版をお送りします。

sales@ankosoft.co.jp

Redmine 6.x バージョンに対応した「ユーザーダッシュボード」をリリースしました。

2025-07-24T16:23:27+09:00

Redmine 6.x バージョンに対応した「ユーザーダッシュボード」をリリースしました。

評価版が必要な場合は、以下のメールアドレスまでご連絡いただければ、評価版をお送りします。

sales@ankosoft.co.jp

Redmine 6.x バージョンに対応した「チケット拡張」をリリースしました。

2025-07-24T16:22:50+09:00

Redmine 6.x バージョンに対応した「チケット拡張」をリリースしました。

評価版が必要な場合は、以下のメールアドレスまでご連絡いただければ、評価版をお送りします。

sales@ankosoft.co.jp

Redmine 6.x バージョンに対応した「ワークフロー別担当者」をリリースしました。

2025-07-24T16:22:04+09:00

Redmine 6.x バージョンに対応した「ワークフロー別担当者」をリリースしました。

評価版が必要な場合は、以下のメールアドレスまでご連絡いただければ、評価版をお送りします。

sales@ankosoft.co.jp

Redmine 6.x バージョンに対応した「ANKOガントチャート」をリリースしました。

2025-07-17T16:00:44+09:00

Redmine 6.x バージョンに対応した「ANKOガントチャート」をリリースしました。

評価版が必要な場合は、以下のメールアドレスまでご連絡いただければ、評価版をお送りします。

sales@ankosoft.co.jp

Introduction of ANKO Gantt chart

2023-02-28T18:32:00+09:00

About ANKO Gantt chart

● Create and edit issue (delete included)
● Create child task
● Easy schedule change by drag & drop the Gantt bar
● Sequential and collective editing of Gantt bar
● Designate parent task and target version by drag & drop
● Issue column additional marking
● Mark guidelines
● Show full screen
● Automatically update Gantt bar according to issue period indication and editing
● Mark initial planned date
● Expand, reduce to tree structure
● Mark holidays

Easily add or edit schedules using Anko Gantt Chart
for real-time schedule and progress management.

With easy addition and editing of schedules, frequent changes to your project schedule and progress are much more manageable.

Real-time tracking of project progress and delay

View a task’s progress rate, status, and duration at a single glance. If a project is experiencing delays, you can quickly identify and respond to the problematic task.
Additionally, the ability to view both parent and subprojects makes it easier to understand the overall project.

A Gantt chart that anyone can use right away

With just a mouse, freely move or lengthen chart bars, select parent or subtasks, and designate version relations.
For a multitude of tasks, use Redmine’s import issue feature to quickly set up your Gantt chart.

UX designed for readability

Anko Gantt Chart boasts spacious full-screen mode, scroll-tracking header display, foldable tree chart form, and adjustable column widths.
Any adjustments to columns or trees are saved even if you move away and come back from different pages.
Even more features, such guideline colors per individual user settings or workflow displays, are part of the user-friendly design of Anko Gantt Chart.

Holiday Designation

Aside from Saturdays and Sundays, holidays can be set to customized needs such as foreign national holidays or a corporate anniversary. Holidays can easily be designated in a manner similar to using Excel or text files.

Installation and Support Environment

Categorization	Item	Type and Version	Note
Install	Redmine	3.x ~ 5.x
	Ruby	2.0 ~ 2.7
	Database	Mysql, MariaDB, Postgresql
	Plugins	Openalm Common 1.7.5 Or Above	Provided in Product’s Plugins
Support	Browser	Chrome, Safari, Edge, Firefox	IE 11 is not officially supported but still operates

*This plugin can be installed even when the internet is offline.

By using ANKO Gantt chart, You can improve the efficiency of the work.

Didn’t you think that using Redmine Gantt chart is something troublesome or inconvenient? There are no edit function, but only view functions in Redmine Gantt chart, so when you want to create or correct an issue, you should move another page form there. That had very low efficiencies.

ANKO Gantt chart is the plugin to add creating and editing function to normal “Redmine Gantt chart”. You can use ANKO Gantt chart to create a WBS very easily, intuitively without moving from a Gantt chart page. You can register WBS, Schedule management easily without any stress.

Main functions

REGISTER A NEW ISSUE

・・When you click “new issue” in Gantt chart page, you can register “new issue” on the same page-Gantt chart page. You can quickly and efficiently register a new issue by checking a Gantt chart.

REGISTER A SUBTASK

・・When you click the “To register subtask” icon next to the issue name, you can register “subtask” on the same page (Automatically, the parent task number is put in the Parent task Field).

You can register a hierarchical issue like as WBS efficiently, because you can register a subtask immediately while checking the Gantt chart.

CHANGE ISSUE CONTENTS

・・You can change the issue(title, contents, status and the related issue etc) by clicking the issue title. You took time and effort to change the issue continuously in Gantt chart page of Redmine, because you should move to the issues detail page to change, after registering, you have to move to the Gantt chart page once again.

But if you use ANKO Gantt chart, you can change the issue only in Gantt chart page, so you can operate intuitively.

CHANGE START AND DUE DATES by mouse drag and Mass update

・・You can change the date of the Gantt chart with the mouse drag. While dragging the Gantt chart, the color of the Gantt chart is changed to transparent color, so you can easily compare with the original Gantt chart. You can move Gantt chart side to side, or change the width of it.

It is possible to improve work efficiency and to suppress unnecessary log generation by collective Mass update function. After selecting “Mass update”, dragging the Gantt chart by mouse will not change yet, it will show how many changes to the information until now. When clicking “## Update”, Gantt charts is updated all at once.

To open, close Tree-View of issues

・・You can close or open Tree-View of issues by simply clicking the “-” and “+” icons.

・・If you click the “Show All” button, all Issues will open. If you click the number button, Issues in the same hierarchy are displayed.

Display of guidelines

・・It is possible to display guidelines. This makes it easy to identify the title of the ticket, due date and the position of the Gantt chart, etc.

Display and change weekday period number

・・You can check the number of weekdays in the period field. By clicking the period field, you can change the number of periods.

Display workflow

・・We provide a workflow display function that can visually confirm the status of the issue.

You can easily grasp what the next status is without having to click the status select box.

You can also change the status of the issue by clicking the workflow display icon. This will allow you to change the status of issue with a single click.

Setting holidays

・・It shows that it is a holiday with a gray background color. When you move the mouse to the day of the week part, the holiday name is displayed.

SCHEDULED START AND DUE OF DATE INDICATED

・・Redmine Gantt chart cloud show one chart with one issue based on Start and Due dates of issue. For that reason, you cloud not confirm the original plan’s date information after Start and Due dates of issue were corrected.

ANKO Gantt chart can show two charts with one issue. Therefore, you can confirm the estrangement of progress from a schedule in visual way with showing scheduled Start and Due dates at the plan stage.

A thick line shows a Start and Due dates of an actual issue, and a thin line under it shows scheduled Start and Due dates.

SETTING ISSUES WITH PARENT ISSUES OR VERSION BY MOUSE DRAG

・・You can set issues with Parent issues or version by mouse drag, so you can check or build up the hierarchy or structure of issues very easily.

Rich UI

・・You are free to add and display the columns you want to check. It also displays the date.

Adjust width of column

・・Move the mouse over the border of the issue title or other column and drag the mouse to adjust the width of its.

HEADER AUTOMATIC SCROLL

・・When there are many issues, it is necessary to scroll the page vertically, but when scrolling, the header is not displayed on the screen, so the date can not be confirmed.

But using this function, you can solve it. If you scroll the page vertically, the header also automatically scroll and check the date at any time.

Full Screen

・・If you want to expand the Gantt Chart drawing area, click the “Full Screen” button. The sidebar area and the header menu area disappear, and the Gantt chart page displays on the full screen.

Clicking on the “Original Screen” button to return to the original screen easily.

Specification of ANKO Gantt chart

Redmine version	Redmine3.X-5.X
LICENSE	SERVER LICENSE(1 license is necessary per 1 server, no limite with the number of users and period of use.)

Download the manual here.

Price

$ 800 (U.S. $)

Payment method: Bank transfer , credit card by PayPal.

$ 800 is the plug-in unit price , installation of plugin, technical assistance support are not included.

Flow of your purchasee

1 . Please contact us from the e-mail.

2 . We offers you the evaluation version limited period of use. You can evaluate on your server. Please check and whether there is no conflict with other plugins.

3 . After confirming the payment, we will send the product plugin you within 5 days. .

CONTACT US

Ankosoft Inc.

EMAIL : sales@ankosoft.co.jp

We need your Information below.

・company name

・telephone number

・Your Name

・redmine-version:[EX)"Redmine3.4.X"]

・ruby-version:[EX) "ruby 2.5"]

6か月間予定がなければ、JavaScriptで「メリークリスマス」をガントチャートに書けるはず！

2022-12-26T01:26:58+09:00

記事作成の背景

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/25の記事として作成しています。

今回の記事は実用性０で、Redmineでいかに遊ぶかを研究した記事になります。

皆様の業務には全く役に立たない事例ですが、たぶん世界で初の試みになるかと思います。

JavaScriptで「メリークリスマス」をガントチャートに書いた人類初の試みになると思いますので、よろしかったら最後までお付き合いください。

１．開発の背景

そもそものきっかけは「ガントチャートの背景色をJavaScriptで入れてみた」（https://ankosoft.co.jp/blog/734）で、意外と簡単にガントチャートに背景色を入れることに成功でき、何か面白いことができないだろうかと考えました。

「ガントチャートの背景色をJavaScriptで入れてみた」の動作原理は下図のように、チケットタイトルの行と、日付の列をセクセルのセルのように見立てて、行ごとに背景色を塗りました。そして「べったー」と背景色で埋めると日付の元々の縦の罫線が見えなくなるため、縦の罫線の部分だけ余白を入れて背景色を入れました。

上記の図を見ると方眼用紙のようにも見え、悪しき文化であるエクセルのセルを方眼用紙のようにして書類を作成する「Excel方眼紙」のようにも見えてきました。

方眼用紙と言えば、ドット絵、ドット文字が書ける！ということで早速試してみました。

クリスマスなのでJavaScriptで、「メリークリスマス」という文字をガントチャートの背景色で書いてみたというコンセプトが固まりました。

２．必要な準備物

まずは、ドット文字に必要なドット情報が必要です。昔のワープロは24ドット文字ぐらいでしたので、下図のように、174x22ピクセルぐらいあれば文字は書けそうです。

ペイントにガントチャートに書きたい文字を書いて保存をします。

ドット文字に必要なドット情報は、ｘ座標とy座標と色情報です。

下図のようにプログラムでマウスを１ドットごとに移動させて、その時の色情報を記録します。

マウスが移動しながら、色情報を拾っていきます。

需要はないとは思いますが、一応ソースを記載します。

uwscというツールを使いました。Redmineユーザーの方の中でuwscをご存じの方はほぼいらっしゃらないと思いますが、PCの自動化処理で一時結構使われていたツールです。現在はツールの公開が停止しているため新規で入手することは難しいツールになってしまいました。

色情報を16進法のRGB情報に変換をして出力します。

出力例）

0,14,C5CFDF#

0,15,C5CFDF#

0,16,FEFEFE#

0,17,FFFFFF#

0,18,FFFFFF#

その次に準備をするのが、白紙の状態のRedmineのガントチャートです。

174x22ピクセルをガントチャートの背景色としてプロットをするために、横方向に、約6か月分のガントチャートが必要です。（30日＊６か月＝約180日）

また縦方向には22行以上のチケットが必要です。下図のように準備をしましょう。

先ほどプロットをした「ｘ座標とy座標と色情報」を上記の白紙のガントチャートに書きこめば人類史上初のRedmineのガントチャートの背景色で「メリークリスマス」を書き込むことができます。

３．完成図

カラフルなメリークリスマス

行で色を統一したメリークリスマス

フォントを変えて単色のメリークリスマス

カタカナだけではなく、頑張れば漢字での表記もできます。

カラフルなバージョン

単色バージョン

拡大して見ると、ガントチャートの背景色で確かにドット文字的にメッセージを表現していることが分かります。縦と横の比率が１：１ではなく、少し縦長の文字になっています。

罫線を入れるとガントチャートが方眼紙らしくなります。

４．少しだけ技術的な話

下記の表のように全部で９つのパターンでランダムに文字が表示されるように設定しています。

		色
		単色	行ごとにランダム	ドットごとに完全ランダム
文字種	カタカナバージョン@フォント１	1	2	3
	カタカナバージョン@フォント２	4	5	6
	漢字バージョン	7	8	9

View Customize pluginで下図のように設定をしました。

ページを更新する時毎に、色々な「メリークリスマス」がランダムに表示されます。しばしご覧ください。

処理速度はパソコンのCPUに依存をしますが、結構な数のドットを背景色として追加をするので、塗りつぶす面が多い場合はページを更新してから文字が表示されるまで、それなりの時間がかかります。

技術の無駄遣いで全く実用性のない記事でしたが、クリスマスですから、このような遊び心も必要なのではないかと思い記事化をしました。

2022年もあとわずかです。皆様、今年一年間、大変お疲れ様でした。皆様の上に、来る2023年も幸多い年になるようにお祈り申し上げます。

５．おまけ

全く需要はないとは思いますが、自分も試してみたいと言う奇特な方のために、プログラムソースを掲載します。ご興味がある方は是非お試しください。

$(function () {

//https://forest.watch.impress.co.jp/docs/serial/yajiuma/1262538.html

var min = 1;

var max = 3;

var a = Math.floor(Math.random() * (max + 1 - min)) + min;

//https://lab.syncer.jp/Web/JavaScript/Snippet/15/

var min = 1;

var max = 3;

var b = Math.floor(Math.random() * (max + 1 - min)) + min;

myiro3 =

"#" + ("000000" + ((Math.random() * 0xffffff) | 0).toString(16)).slice(-6);

//https://q-az.net/random-color-code/

my1 ="7,19#7,28#7,39#7,72#7,88#7,99#8,19#8,28#8,39#8,72#8,88#8,99#8,107#8,108#8,109#8,110#8,111#8,112#8,113#8,114#8,115#8,116#8,117#8,118#8,119#8,147#8,148#8,149#8,150#8,151#8,152#8,153#8,154#8,155#8,156#8,157#8,158#8,159#8,173#8,174#9,18#9,19#9,28#9,39#9,71#9,72#9,73#9,74#9,75#9,76#9,77#9,78#9,79#9,80#9,81#9,82#9,88#9,99#9,118#9,119#9,125#9,126#9,127#9,128#9,129#9,130#9,131#9,132#9,133#9,134#9,135#9,136#9,137#9,138#9,139#9,140#9,141#9,142#9,158#9,159#9,173#9,174#10,18#10,28#10,39#10,70#10,81#10,82#10,88#10,99#10,117#10,118#10,141#10,157#10,158#10,173#10,174#11,9#11,18#11,28#11,39#11,70#11,81#11,82#11,88#11,99#11,117#11,118#11,140#11,141#11,157#11,158#11,173#11,174#12,9#12,10#12,11#12,17#12,28#12,39#12,69#12,81#12,88#12,99#12,116#12,117#12,139#12,140#12,156#12,157#12,173#12,174#13,10#13,11#13,12#13,17#13,28#13,39#13,68#13,80#13,81#13,88#13,99#13,116#13,138#13,139#13,156#13,173#13,174#14,12#14,13#14,14#14,16#14,28#14,39#14,67#14,80#14,81#14,88#14,99#14,115#14,116#14,129#14,137#14,138#14,155#14,156#14,173#14,174#15,14#15,15#15,16#15,28#15,39#15,46#15,47#15,48#15,49#15,50#15,51#15,52#15,53#15,54#15,55#15,56#15,57#15,58#15,59#15,60#15,61#15,66#15,79#15,80#15,88#15,99#15,114#15,115#15,129#15,130#15,136#15,137#15,154#15,155#15,173#15,174#16,15#16,16#16,17#16,28#16,39#16,65#16,79#16,80#16,88#16,99#16,113#16,114#16,115#16,130#16,131#16,135#16,136#16,153#16,154#16,155#16,173#16,174#17,14#17,16#17,17#17,18#17,38#17,78#17,79#17,98#17,112#17,113#17,115#17,116#17,131#17,132#17,133#17,134#17,135#17,152#17,153#17,155#17,156#17,173#17,174#18,13#18,18#18,19#18,38#18,77#18,78#18,98#18,111#18,112#18,116#18,117#18,132#18,133#18,134#18,151#18,152#18,156#18,157#18,173#18,174#19,12#19,19#19,20#19,21#19,37#19,76#19,77#19,97#19,110#19,111#19,117#19,118#19,133#19,134#19,135#19,150#19,151#19,157#19,158#20,10#20,11#20,20#20,35#20,36#20,75#20,76#20,95#20,96#20,109#20,110#20,118#20,119#20,134#20,135#20,149#20,150#20,158#20,159#21,9#21,10#21,32#21,33#21,34#21,35#21,73#21,74#21,75#21,92#21,93#21,94#21,95#21,107#21,108#21,119#21,120#21,121#21,135#21,136#21,147#21,148#21,159#21,160#21,161#21,173#21,174#22,7#22,8#22,29#22,30#22,31#22,32#22,70#22,71#22,72#22,73#22,89#22,90#22,91#22,92#22,106#22,107#22,120#22,121#22,122#22,136#22,137#22,146#22,147#22,160#22,161#22,162#22,173#22,174#23,5#23,6#23,68#23,69#23,70#23,104#23,105#23,121#23,137#23,144#23,145#23,161#".split("#");

my2 ="6,16#6,17#6,18#6,19#6,28#6,29#6,30#6,31#6,37#6,38#6,39#6,40#6,74#6,75#6,76#6,77#6,91#6,92#6,93#6,94#6,100#6,101#6,102#6,103#6,120#6,121#6,122#6,123#6,162#6,163#6,164#6,165#6,174#6,175#6,176#6,177#6,178#7,15#7,16#7,17#7,18#7,19#7,27#7,28#7,30#7,31#7,37#7,38#7,40#7,41#7,73#7,74#7,77#7,78#7,90#7,91#7,93#7,94#7,100#7,101#7,103#7,104#7,110#7,111#7,112#7,113#7,114#7,115#7,116#7,117#7,118#7,119#7,120#7,123#7,124#7,131#7,132#7,133#7,134#7,135#7,136#7,137#7,138#7,139#7,140#7,141#7,142#7,143#7,144#7,145#7,146#7,152#7,153#7,154#7,155#7,156#7,157#7,158#7,159#7,160#7,161#7,162#7,165#7,166#7,174#7,175#7,177#7,178#8,14#8,15#8,16#8,18#8,19#8,27#8,28#8,31#8,32#8,37#8,38#8,40#8,41#8,73#8,74#8,77#8,78#8,90#8,91#8,94#8,95#8,100#8,101#8,103#8,104#8,109#8,110#8,123#8,124#8,130#8,131#8,132#8,141#8,142#8,143#8,144#8,146#8,147#8,151#8,152#8,165#8,166#8,174#8,175#8,177#8,178#9,7#9,8#9,9#9,10#9,11#9,14#9,15#9,18#9,19#9,27#9,28#9,30#9,31#9,37#9,38#9,40#9,41#9,72#9,73#9,74#9,77#9,78#9,79#9,80#9,81#9,82#9,83#9,84#9,90#9,91#9,93#9,94#9,100#9,101#9,103#9,104#9,109#9,110#9,123#9,124#9,130#9,131#9,147#9,148#9,151#9,152#9,165#9,166#9,174#9,175#9,177#9,178#10,7#10,8#10,10#10,11#10,13#10,14#10,15#10,18#10,19#10,27#10,28#10,30#10,31#10,37#10,38#10,40#10,41#10,71#10,72#10,73#10,83#10,84#10,90#10,91#10,93#10,94#10,100#10,101#10,103#10,104#10,109#10,110#10,120#10,121#10,123#10,124#10,130#10,131#10,139#10,140#10,141#10,142#10,143#10,144#10,147#10,148#10,151#10,152#10,162#10,163#10,165#10,166#10,174#10,175#10,177#10,178#11,7#11,8#11,11#11,12#11,13#11,14#11,17#11,18#11,27#11,28#11,30#11,31#11,37#11,38#11,39#11,40#11,41#11,71#11,72#11,78#11,79#11,83#11,84#11,90#11,91#11,93#11,94#11,100#11,101#11,102#11,103#11,104#11,109#11,110#11,111#11,113#11,114#11,115#11,116#11,117#11,118#11,119#11,120#11,121#11,122#11,123#11,124#11,131#11,132#11,133#11,134#11,135#11,136#11,137#11,138#11,139#11,143#11,144#11,146#11,147#11,151#11,152#11,153#11,155#11,156#11,157#11,158#11,159#11,160#11,161#11,162#11,163#11,164#11,165#11,166#11,174#11,175#11,177#11,178#12,8#12,9#12,10#12,12#12,13#12,14#12,17#12,18#12,27#12,28#12,31#12,32#12,37#12,38#12,40#12,41#12,55#12,56#12,57#12,58#12,59#12,60#12,61#12,62#12,63#12,70#12,71#12,72#12,75#12,76#12,77#12,78#12,79#12,80#12,83#12,84#12,90#12,91#12,94#12,95#12,100#12,101#12,103#12,104#12,111#12,112#12,113#12,119#12,120#12,123#12,124#12,142#12,143#12,144#12,146#12,147#12,153#12,154#12,155#12,161#12,162#12,165#12,166#12,174#12,175#12,177#12,178#13,10#13,11#13,16#13,17#13,27#13,28#13,31#13,32#13,36#13,37#13,40#13,41#13,48#13,49#13,50#13,51#13,52#13,53#13,54#13,55#13,58#13,59#13,60#13,61#13,63#13,64#13,69#13,70#13,71#13,74#13,75#13,76#13,78#13,79#13,80#13,83#13,84#13,90#13,91#13,94#13,95#13,99#13,100#13,103#13,104#13,118#13,119#13,123#13,124#13,133#13,134#13,135#13,136#13,137#13,140#13,141#13,142#13,145#13,146#13,147#13,160#13,161#13,165#13,166#13,174#13,175#13,177#13,178#14,11#14,12#14,13#14,16#14,17#14,27#14,28#14,31#14,32#14,36#14,37#14,40#14,41#14,47#14,48#14,63#14,64#14,69#14,70#14,74#14,75#14,78#14,79#14,82#14,83#14,90#14,91#14,94#14,95#14,99#14,100#14,103#14,104#14,117#14,118#14,122#14,123#14,133#14,134#14,136#14,137#14,139#14,140#14,145#14,146#14,159#14,160#14,164#14,165#14,174#14,175#14,177#14,178#15,10#15,11#15,12#15,13#15,17#15,18#15,19#15,27#15,28#15,31#15,32#15,36#15,37#15,39#15,40#15,41#15,47#15,48#15,63#15,64#15,69#15,70#15,72#15,73#15,74#15,77#15,78#15,82#15,83#15,90#15,91#15,94#15,95#15,99#15,100#15,102#15,103#15,104#15,116#15,117#15,118#15,121#15,122#15,133#15,134#15,137#15,138#15,139#15,140#15,144#15,145#15,158#15,159#15,160#15,163#15,164#15,174#15,175#15,177#15,178#16,9#16,10#16,11#16,13#16,14#16,18#16,19#16,27#16,28#16,31#16,32#16,36#16,37#16,39#16,40#16,48#16,49#16,50#16,51#16,52#16,53#16,54#16,55#16,56#16,57#16,58#16,59#16,60#16,61#16,62#16,63#16,70#16,71#16,72#16,76#16,77#16,81#16,82#16,90#16,91#16,94#16,95#16,99#16,100#16,102#16,103#16,114#16,115#16,116#16,117#16,121#16,122#16,123#16,134#16,135#16,138#16,139#16,144#16,145#16,156#16,157#16,158#16,159#16,163#16,164#16,165#16,174#16,175#16,177#16,178#17,9#17,10#17,13#17,14#17,15#17,19#17,20#17,21#17,28#17,29#17,30#17,31#17,34#17,35#17,36#17,38#17,39#17,40#17,75#17,76#17,80#17,81#17,91#17,92#17,93#17,94#17,97#17,98#17,99#17,101#17,102#17,103#17,113#17,114#17,115#17,123#17,124#17,125#17,135#17,136#17,143#17,144#17,155#17,156#17,157#17,165#17,166#17,167#17,174#17,175#17,176#17,177#17,178#18,6#18,7#18,8#18,9#18,12#18,13#18,15#18,16#18,20#18,21#18,32#18,33#18,34#18,38#18,39#18,73#18,74#18,75#18,79#18,80#18,95#18,96#18,97#18,101#18,102#18,112#18,113#18,124#18,125#18,126#18,135#18,136#18,137#18,141#18,142#18,143#18,154#18,155#18,166#18,167#18,168#19,5#19,6#19,10#19,11#19,12#19,16#19,17#19,18#19,20#19,21#19,30#19,31#19,32#19,33#19,37#19,38#19,39#19,72#19,73#19,74#19,78#19,79#19,80#19,93#19,94#19,95#19,96#19,100#19,101#19,102#19,110#19,111#19,112#19,118#19,119#19,125#19,126#19,136#19,137#19,138#19,141#19,142#19,152#19,153#19,154#19,160#19,161#19,167#19,168#19,174#19,175#19,176#19,177#19,178#20,5#20,6#20,9#20,10#20,17#20,18#20,19#20,20#20,29#20,30#20,36#20,37#20,71#20,72#20,77#20,78#20,92#20,93#20,99#20,100#20,110#20,111#20,116#20,117#20,118#20,119#20,120#20,121#20,126#20,127#20,137#20,138#20,141#20,142#20,152#20,153#20,158#20,159#20,160#20,161#20,162#20,163#20,168#20,169#20,174#20,175#20,177#20,178#21,5#21,6#21,8#21,9#21,29#21,30#21,34#21,35#21,36#21,37#21,71#21,72#21,76#21,77#21,92#21,93#21,97#21,98#21,99#21,100#21,110#21,111#21,115#21,116#21,117#21,120#21,121#21,122#21,126#21,127#21,137#21,138#21,141#21,142#21,152#21,153#21,157#21,158#21,159#21,162#21,163#21,164#21,168#21,169#21,174#21,175#21,177#21,178#22,6#22,7#22,8#22,9#22,29#22,30#22,31#22,32#22,33#22,34#22,35#22,71#22,72#22,74#22,75#22,76#22,92#22,93#22,94#22,95#22,96#22,97#22,98#22,111#22,112#22,113#22,114#22,115#22,121#22,122#22,123#22,124#22,126#22,127#22,138#22,139#22,140#22,141#22,153#22,154#22,155#22,156#22,157#22,163#22,164#22,165#22,166#22,168#22,169#22,175#22,176#22,177#22,178#23,30#23,31#23,32#23,72#23,73#23,74#23,93#23,94#23,95#23,124#23,125#23,126#23,166#23,167#23,168#".split("#");

my3 ="6,8#6,9#6,10#6,14#6,15#6,21#6,22#6,35#6,36#6,52#6,53#6,57#6,58#6,64#6,65#6,94#6,95#6,99#6,100#6,101#6,103#6,104#6,105#6,114#6,115#6,116#6,121#6,122#6,127#6,128#6,135#6,136#6,137#6,148#6,149#6,156#6,157#6,158#6,174#6,175#6,176#6,177#6,178#7,8#7,9#7,14#7,15#7,16#7,17#7,18#7,19#7,20#7,21#7,22#7,23#7,26#7,27#7,28#7,29#7,30#7,31#7,32#7,33#7,34#7,35#7,36#7,43#7,44#7,48#7,49#7,50#7,51#7,52#7,53#7,54#7,55#7,56#7,57#7,58#7,59#7,62#7,63#7,64#7,65#7,66#7,74#7,75#7,76#7,77#7,78#7,90#7,91#7,92#7,93#7,94#7,95#7,99#7,100#7,103#7,104#7,106#7,107#7,114#7,115#7,119#7,120#7,121#7,122#7,123#7,124#7,125#7,126#7,127#7,128#7,129#7,135#7,136#7,139#7,140#7,142#7,143#7,146#7,147#7,148#7,149#7,156#7,157#7,174#7,175#7,177#7,178#8,8#8,9#8,11#8,12#8,14#8,15#8,21#8,22#8,28#8,29#8,33#8,34#8,37#8,38#8,39#8,40#8,41#8,42#8,43#8,44#8,45#8,57#8,58#8,60#8,61#8,62#8,63#8,73#8,74#8,78#8,79#8,96#8,97#8,98#8,99#8,100#8,101#8,102#8,103#8,104#8,105#8,106#8,107#8,108#8,110#8,111#8,112#8,113#8,114#8,115#8,116#8,117#8,118#8,119#8,120#8,121#8,122#8,127#8,128#8,131#8,132#8,133#8,134#8,135#8,136#8,137#8,138#8,139#8,140#8,142#8,143#8,144#8,145#8,146#8,156#8,157#8,167#8,168#8,174#8,175#8,177#8,178#9,5#9,6#9,7#9,8#9,9#9,10#9,11#9,12#9,13#9,14#9,15#9,21#9,22#9,28#9,29#9,30#9,31#9,32#9,33#9,34#9,37#9,38#9,43#9,44#9,53#9,54#9,57#9,58#9,62#9,63#9,73#9,74#9,78#9,79#9,95#9,96#9,99#9,100#9,103#9,104#9,114#9,115#9,119#9,120#9,121#9,122#9,127#9,128#9,132#9,133#9,137#9,138#9,142#9,143#9,155#9,156#9,157#9,158#9,159#9,160#9,161#9,162#9,163#9,164#9,165#9,166#9,167#9,168#9,169#9,174#9,175#9,177#9,178#10,11#10,12#10,14#10,15#10,21#10,22#10,28#10,29#10,33#10,34#10,37#10,38#10,43#10,44#10,47#10,48#10,49#10,50#10,51#10,52#10,53#10,54#10,57#10,58#10,62#10,63#10,73#10,74#10,78#10,79#10,89#10,90#10,91#10,92#10,93#10,94#10,95#10,96#10,99#10,100#10,103#10,104#10,113#10,114#10,119#10,120#10,121#10,122#10,127#10,128#10,133#10,134#10,137#10,138#10,142#10,143#10,155#10,156#10,161#10,162#10,174#10,175#10,177#10,178#11,10#11,11#11,14#11,15#11,21#11,22#11,28#11,29#11,30#11,31#11,32#11,33#11,34#11,37#11,38#11,43#11,44#11,56#11,57#11,62#11,63#11,73#11,74#11,77#11,78#11,97#11,98#11,106#11,107#11,112#11,113#11,116#11,117#11,118#11,119#11,120#11,121#11,122#11,123#11,124#11,125#11,126#11,127#11,128#11,133#11,134#11,137#11,138#11,142#11,143#11,154#11,155#11,161#11,162#11,174#11,175#11,177#11,178#12,10#12,11#12,14#12,15#12,21#12,22#12,28#12,29#12,33#12,34#12,37#12,38#12,43#12,44#12,52#12,53#12,56#12,57#12,60#12,61#12,62#12,63#12,74#12,75#12,76#12,77#12,93#12,94#12,97#12,98#12,99#12,100#12,101#12,102#12,103#12,104#12,105#12,106#12,107#12,108#12,110#12,111#12,112#12,118#12,119#12,133#12,134#12,136#12,137#12,139#12,140#12,142#12,143#12,148#12,149#12,153#12,154#12,161#12,162#12,174#12,175#12,177#12,178#13,9#13,10#13,14#13,15#13,21#13,22#13,28#13,29#13,31#13,32#13,33#13,34#13,37#13,38#13,43#13,44#13,48#13,49#13,50#13,51#13,52#13,53#13,55#13,56#13,60#13,61#13,62#13,63#13,65#13,66#13,74#13,75#13,76#13,90#13,91#13,92#13,93#13,94#13,95#13,97#13,98#13,101#13,102#13,106#13,107#13,113#13,114#13,125#13,126#13,131#13,132#13,133#13,134#13,135#13,136#13,137#13,138#13,139#13,140#13,142#13,143#13,144#13,145#13,146#13,147#13,148#13,149#13,150#13,152#13,153#13,161#13,162#13,166#13,167#13,174#13,175#13,177#13,178#14,8#14,9#14,14#14,15#14,16#14,17#14,18#14,19#14,20#14,21#14,22#14,26#14,27#14,28#14,29#14,30#14,31#14,33#14,34#14,37#14,38#14,39#14,40#14,41#14,42#14,43#14,44#14,54#14,55#14,56#14,57#14,58#14,59#14,60#14,61#14,62#14,63#14,64#14,65#14,66#14,73#14,74#14,75#14,97#14,98#14,101#14,102#14,106#14,107#14,113#14,114#14,115#14,116#14,117#14,118#14,119#14,120#14,121#14,122#14,123#14,124#14,125#14,126#14,127#14,135#14,136#14,142#14,143#14,146#14,147#14,156#14,157#14,158#14,159#14,160#14,161#14,162#14,163#14,164#14,165#14,166#14,167#14,168#14,174#14,175#14,177#14,178#15,7#15,8#15,9#15,10#15,14#15,15#15,16#15,17#15,18#15,19#15,21#15,22#15,27#15,28#15,33#15,34#15,37#15,38#15,43#15,44#15,52#15,53#15,54#15,55#15,57#15,58#15,60#15,61#15,62#15,63#15,72#15,73#15,75#15,76#15,79#15,80#15,81#15,82#15,83#15,84#15,93#15,94#15,97#15,98#15,99#15,100#15,101#15,102#15,103#15,104#15,105#15,106#15,107#15,113#15,114#15,125#15,126#15,135#15,136#15,139#15,140#15,142#15,143#15,146#15,147#15,156#15,157#15,161#15,162#15,174#15,175#15,177#15,178#16,6#16,7#16,8#16,9#16,10#16,11#16,16#16,17#16,18#16,19#16,33#16,34#16,48#16,49#16,50#16,51#16,52#16,53#16,57#16,58#16,60#16,61#16,62#16,63#16,71#16,72#16,76#16,77#16,81#16,82#16,90#16,91#16,92#16,93#16,94#16,95#16,101#16,102#16,113#16,114#16,115#16,116#16,117#16,118#16,119#16,120#16,121#16,122#16,123#16,124#16,125#16,126#16,131#16,132#16,133#16,134#16,135#16,136#16,137#16,138#16,139#16,140#16,142#16,143#16,146#16,147#16,156#16,157#16,161#16,162#16,174#16,175#16,177#16,178#17,5#17,6#17,8#17,9#17,11#17,12#17,16#17,17#17,18#17,19#17,41#17,42#17,57#17,58#17,60#17,61#17,62#17,63#17,70#17,71#17,76#17,77#17,81#17,82#17,101#17,102#17,105#17,106#17,113#17,114#17,125#17,126#17,135#17,136#17,142#17,143#17,146#17,147#17,156#17,157#17,161#17,162#17,174#17,175#17,176#17,177#17,178#18,8#18,9#18,11#18,12#18,15#18,16#18,18#18,19#18,28#18,29#18,30#18,31#18,32#18,33#18,34#18,35#18,36#18,37#18,38#18,39#18,40#18,41#18,42#18,43#18,54#18,55#18,57#18,58#18,60#18,61#18,62#18,63#18,70#18,71#18,77#18,78#18,80#18,81#18,97#18,98#18,99#18,100#18,101#18,102#18,103#18,104#18,105#18,106#18,107#18,113#18,114#18,115#18,116#18,117#18,118#18,119#18,120#18,121#18,122#18,123#18,124#18,125#18,126#18,134#18,135#18,136#18,137#18,142#18,143#18,146#18,147#18,156#18,157#18,161#18,162#18,169#18,170#19,8#19,9#19,15#19,16#19,18#19,19#19,35#19,36#19,48#19,49#19,50#19,51#19,52#19,53#19,54#19,55#19,56#19,57#19,60#19,61#19,62#19,63#19,65#19,66#19,70#19,71#19,78#19,79#19,80#19,81#19,90#19,91#19,92#19,93#19,94#19,95#19,101#19,102#19,113#19,114#19,125#19,126#19,133#19,134#19,135#19,136#19,137#19,138#19,141#19,142#19,146#19,147#19,152#19,153#19,154#19,155#19,156#19,157#19,158#19,159#19,160#19,161#19,162#19,163#19,164#19,165#19,166#19,167#19,168#19,169#19,170#19,171#19,174#19,175#19,176#19,177#19,178#20,8#20,9#20,14#20,15#20,18#20,19#20,35#20,36#20,40#20,41#20,48#20,49#20,52#20,53#20,54#20,55#20,56#20,57#20,59#20,60#20,61#20,62#20,63#20,64#20,65#20,66#20,71#20,72#20,79#20,80#20,90#20,91#20,94#20,95#20,101#20,102#20,104#20,105#20,113#20,114#20,115#20,116#20,117#20,118#20,119#20,120#20,121#20,122#20,123#20,124#20,125#20,126#20,133#20,134#20,135#20,136#20,138#20,139#20,141#20,142#20,146#20,147#20,161#20,162#20,174#20,175#20,177#20,178#21,8#21,9#21,14#21,15#21,18#21,19#21,22#21,23#21,29#21,30#21,31#21,32#21,33#21,34#21,35#21,36#21,37#21,38#21,39#21,40#21,41#21,42#21,48#21,49#21,52#21,53#21,55#21,56#21,71#21,72#21,73#21,77#21,78#21,79#21,80#21,81#21,84#21,85#21,90#21,91#21,94#21,95#21,98#21,99#21,100#21,101#21,102#21,103#21,104#21,105#21,106#21,132#21,133#21,135#21,136#21,141#21,142#21,146#21,147#21,161#21,162#21,174#21,175#21,177#21,178#22,8#22,9#22,13#22,14#22,18#22,19#22,22#22,23#22,35#22,36#22,48#22,49#22,52#22,53#22,55#22,56#22,57#22,73#22,74#22,75#22,76#22,77#22,81#22,82#22,83#22,84#22,90#22,91#22,94#22,95#22,101#22,102#22,115#22,116#22,123#22,124#22,125#22,131#22,132#22,135#22,136#22,140#22,141#22,146#22,147#22,161#22,162#22,175#22,176#22,177#22,178#23,8#23,9#23,12#23,13#23,18#23,19#23,22#23,23#23,24#23,35#23,36#23,43#23,44#23,48#23,49#23,50#23,51#23,52#23,53#23,55#23,56#23,57#23,58#23,59#23,90#23,91#23,92#23,93#23,94#23,95#23,101#23,102#23,106#23,107#23,113#23,114#23,115#23,125#23,126#23,127#23,135#23,136#23,140#23,141#23,146#23,147#23,161#23,162#24,8#24,9#24,10#24,11#24,12#24,19#24,20#24,21#24,22#24,23#24,26#24,27#24,28#24,29#24,30#24,31#24,32#24,33#24,34#24,35#24,36#24,37#24,38#24,39#24,40#24,41#24,42#24,43#24,44#24,45#24,48#24,49#24,52#24,53#24,54#24,55#24,59#24,60#24,61#24,62#24,63#24,64#24,65#24,66#24,90#24,91#24,94#24,95#24,96#24,97#24,98#24,99#24,100#24,101#24,102#24,103#24,104#24,105#24,106#24,107#24,108#24,110#24,111#24,112#24,113#24,127#24,128#24,135#24,136#24,139#24,140#24,146#24,147#24,161#24,162#".split("#");

if (b == 1) {

my = my1;

} else if (b == 2) {

my = my2;

} else {

my = my3;

}

h = 0;

$(".gantt_subjects > form > div").each(function (j, elem) {

myiro1 =

"#" +

("000000" + ((Math.random() * 0xffffff) | 0).toString(16)).slice(-6);

mytop = $(elem).position().top;

for (let i = 0; i < 280; i++) {

myleft = i * 16;

my2 = my[h].split(",");

if (my2[0] == j && my2[1] == i) {

h = h + 1;

//console.log(h +":"+ my2[0]+":"+my2[1])

myiro2 =

"#" +

("000000" + ((Math.random() * 0xffffff) | 0).toString(16)).slice(-6);

mytop = $(elem).position().top;

if (a == 1) {

myiro = myiro1;

} else if (a == 2) {

myiro = myiro2;

} else {

myiro = myiro3;

}

$("#gantt_area > form").prepend(

'<div style="position: absolute;top:' +

mytop +

"px;left:" +

myleft +

"px;width:15px;height:20px;background:" +

myiro +

';" ></div>'

);

}

});

$(`#sidebar`).hide()

});

ガントチャートの背景色をJavaScriptで入れてみた

2022-12-15T00:34:47+09:00

ガントチャートの背景色をJavaScriptで入れてみた

記事作成の背景

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/14の記事が12/14 23:59現在、まだ未登録のため、途切れないでバトンをつなぎたかったのですが、残念ながら日をまたいでしまいました。少し遅れてしまいましたが、「Redmine Advent Calendar 2022」の12/14の記事として作成します。

１．開発の背景

ガントチャートは背景色がなく、無味乾燥な白の背景色で、休日だけ灰色で表示されます。悪くはないのですが、背景色を入れられたらもっと華やかなガントチャートになるかと思い、開発をしました。

２．完成イメージ

下図のようにカラフルな背景色をJavaScriptだけで入れることができます。何となくやる気が出て来る感じです。

３．解決方法

view_customizeで作成したJavaScriptを適用させました。工夫をした点は、ただ単に背景色を塗ってしまうと縦の罫線が消えてしまいます。それで背景色を罫線と罫線の間に碁盤の目のように張りつめています。背景色と背景色の間に左右の余白を入れて、その余白の部分から縦の罫線が見えるようにしています。大したコードではないので、下図のJavaScriptのコードを見てもらえればどのような処理をしているのかはわかるかと思います。

色の定義（どのトラッカーに対してどの色にするのかの指定）も升目の数も決め打ちで定義しています。従って環境が変わると正しく動作はしません。とりあえず「Redmine Advent Calendar 2022」に記事を載せることを優先したため、本来考慮するべき点はソース化していません。

４．今後の展望

色はトラッカーの種別ごとに変えています。トラッカーの種別以外にも担当者別で色を変えるとか、優先度で色を変えるとか、期日が経過したチケットの色を変えるとかアイデアにより色々なバリエーションが考えられます。

また、休日（土日）はすでに背景色があるので、その場合は休日の背景色を優先にすることもプログラム化することは可能です。

ー＞2022/12/15 追記

ーーー追記開始ーーーーー

以外と簡単に休日の場合は休日の背景色を表示することができました。7で割った余りの数によって、土曜日や日曜日を認識して該当する場合は色を付けないようにしました。余り１が何曜日になるかは月によって異なりますが、今回のサンプルでは余り１が土曜日、余り２が日曜日でした。

ソースは下図のとおりです。

ーーー追記ここまでーーーーー

今回のプログラムはとりあえずガントチャートに背景色を入れることだけを目標に技術検証をした結果を公表しており、実用化のためにはガントチャートの拡大率に応じて背景色のサイズを変えたり、敷き詰める背景色の数を自動的に算出したりする機能も必要です。

ただし意外と簡単にガントチャートに背景色をきれいに入れられることが確認できたので、時間がある時により実用的なプログラムを組みたいと思います。

お知らせ

弊社ではRedmineのガントチャートの便利に使える「ANKOガントチャート」を販売をしています。まだご存じではない方は、是非、紹介ページをご確認いただき、無料版の評価版をお使いいただければ幸いです。

ANKOガントチャート紹介ページ：https://ankosoft.co.jp/anko_gantt_chart

wikiを閉じたり展開する機能をJavaScriptで作ってみた

2022-12-04T01:28:14+09:00

wikiを閉じたり展開する機能をJavaScriptで作ってみた

記事作成の背景

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/4の記事が12/4 1:00現在、まだ未登録のため、途切れないでバトンをつなぎたく、昨日に引き続き、「Redmine Advent Calendar 2022」の12/4の記事として作成しています。

１．開発の背景

Redmine 2.2からWikiでテキストの折り畳み機能が搭載されています。下記のような構文でテキストの折り畳みが可能です。

 {{collapse(開く時の文言, 隠す時の文言)

}}

この機能のメリットは重要度が低い文章を非表示状態にして、文章全体の可読性を高めるところにあります。ただし、毎回「{{collapse}}」で囲む必要があり、面倒な点もあります。そこで、JavaScriptでwikiを閉じたり展開する機能を作ってみました。

２．完成イメージ

下図のように説明文、コメント文で、ある一定数以上の文字がある場合、全体の文章の一部だけを表示して、残りは「もっと見る」をクリックすると表示します。また、「折りたたむ」をクリックすると、表示されてる文章を最小化します。JavaScriptで実現しているため、wikiの本文には「{{collapse}}」で囲む必要がありません。また、「{{collapse}}」との共存も可能です。

３．解決方法

view_customizeで作成したJavaScriptを適用させました。

パスのパターン：.*

挿入位置：全ページのヘッダ

種別：JavaScript

 $(function () {

   //最大文字数の定義（これを超えると折り畳みの対象になる）

   var count = 50;

   //各wikiクラスに対して処理をする

   $(".wiki").each(function () {

     var thisText = $(this).text();

     var textLength = thisText.length;

     if (textLength > count) {

       var showText = thisText.substring(0, count);

       var insertText ='<span class="hide">' + $(this).html() + '</span><span class="showText">' + showText + "</span>";

       insertText += '<span class="omit">…</span>';

       insertText += '<a href="" class="more">もっと見る</a>';

       insertText += '<a href="" class="close">折りたたむ</a>';

       $(this).html(insertText);

});

   //初期値の設定

   $(".hide").hide();

   $(".close").hide();

   //もっと見る/折りたたむをクリックした時の動作の定義

   $(".more").click(function () {

     $(this).parent().find(".hide").show();

     $(this).parent().find(".close").show();

     $(this).parent().find(".showText").hide();

     $(this).parent().find(".omit").hide();

     $(this).parent().find(".more").hide();

     return false;

});

   $(".close").click(function () {

     $(this).parent().find(".hide").hide();

     $(this).parent().find(".close").hide();

     $(this).parent().find(".showText").show();

     $(this).parent().find(".omit").show();

     $(this).parent().find(".more").show();

     return false;

});

});

マイページのブロック（ボックス）を閉じたり展開する機能をJavaScriptで作ってみた

2022-12-03T23:38:25+09:00

マイページのブロック（ボックス）を閉じたり展開する機能をJavaScriptで作ってみた

記事作成の背景

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/3の記事が12/3 23:00現在、まだ未登録のため、途切れないでバトンをつなぎたく、昨日に引き続き、「Redmine Advent Calendar 2022」の12/3の記事として作成しています。

１．開発の背景

マイページはブロック（ボックス）で自分が見たい情報を自由にレイアウトして表示させることができ、色々なプロジェクトに散在しているチケットをワンストップで色々な切り口で閲覧できるメリットがあります。その反面、下図のようにかなり大量の情報が表示される傾向にあり、マイページで上下に移動（スクロール）させる必要があり、面倒に感じていました。

マイページのブロック（ボックス）毎に必要に応じて閉じたり展開できれば必要な情報により簡単にアクセスすることができ、開発をしました。

２．完成イメージ

下図のようにマイページのブロック（ボックス）毎に「閉じる」/「展開」ボタンが追加され、該当のブロック（ボックス）を閉じたり展開できます。

これにより、レイアウト変更を伴わずに必要のない情報を最小化して、必要がある情報だけ閲覧できます。

３．解決方法

view_customizeで作成したJavaScriptを適用させました。

パスのパターン： /my/page

挿入位置：全ページのヘッダ

種別：JavaScript

$(function () {

//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

//閉じるを追加

//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

$(".mypage-box > .contextual:nth-child(1)").prepend("<span class='close'>閉じる</span>");

//閉じるをクリックすると展開になる

$(document).on("click", ".close", function(){

$(this).text("展開").removeClass('close').addClass('open')

$(this).parent().parent().find('div:hidden').addClass('hidden')

$(this).parent().parent().find("h3").nextAll().hide()

});

//展開をクリックすると閉じるになる

$(document).on("click", ".open", function(){

$(this).text("閉じる").removeClass('open').addClass('close')

$(this).parent().parent().find("h3").nextAll().show()

$(this).parent().parent().find(".hidden").hide()

});

Redmine4.2の「ウォッチャーの追加」ポップアップウィンドウで「ユーザ」と「グループ」を視覚的に区別できるようにJavaScriptで実装してみた

2022-12-02T00:46:23+09:00

Redmine4.2の「ウォッチャーの追加」ポップアップウィンドウで「ユーザ」と「グループ」を視覚的に区別できるようにJavaScriptで実装してみた

記事作成の背景

ANKOSOFTの山崎です。この記事は「Redmine Advent Calendar 2022」の12/2の記事として作成しています。毎年「Redmine Advent Calendar」が企画されていて、途切れることなく、バトンがつながっていましたが、今年（2022年）は12/1の23:30現在、まだ半分ぐらいが空いていて、何か一つでもと思い、記事の作成をしました。

１．前提状態

Redmine4.2から新しいチケットの作成ページや、チケット詳細ページで「ウォッチャーを検索して追加」や「ウォッチャーの追加」をクリックすると「ウォッチャーの追加」ポップアップウィンドウが表示されます。

「ユーザーの検索」欄にユーザー名やグループ名を入力すると部分一致で検索ができ、非常に便利にウォッチャーの追加が可能になります。

２．課題

2021年7/3に下記のように「りょうま」様のツイートを拝見しました。

確かに、下図のようなUIとなっており、どれがユーザーで、どれがグループなのかを視覚的に区別する方法がありません。

HTMLを調べてみても、ユーザーとグループを区別するクラスの付与は無いことが分かります。

ユーザーのHTMLの例

<input type="checkbox" name="issue[watcher_user_ids][]" value="9">Tancred Isaiah

</label>

グループのHTMLの例

<input type="checkbox" name="issue[watcher_user_ids][]" value="53">Development 1 team

</label>

３．解決方法

一番簡単で確実な方法は、rubyファイルを改変してウォッチャー欄のユーザーとグループを区別することができるようにクラスを追加することです。そのためには、Redmineの本体のソースを改変するか、もしくはプラグインを作成してrubyでviewを改変してクラスを追加する必要があります。かなりハードルは高くなります。

ruby以外の方法ではJavaScriptでの実装が可能です。今回は、JavaScriptで実装をしてみたいと思います。

「ウォッチャーを検索して追加」をクリックすると、下図のようにユーザーとグループがアイコンで区別されて表示されています。「新しいチケット」ページでは取得できないクラス情報が、「ウォッチャーを検索して追加」をクリックして表示されるポップアップウィンドウでは存在しているので、JavaScriptで「ウォッチャーを検索して追加」をクリックして該当ページからクラス情報を取得して、「新しいチケット」ページにクラスを追加する方法を実装したいと思います。

完成形の図です。

１）ユーザーとグループを区別するアイコンを挿入

２）ユーザーとグループの境界にセパレーターを入れて区分

をしました。

JavaScriptのソースは下記のとおりです。

コメントを入れていますので、詳しい説明は割愛します。

$(function () {

if ($(".search_for_watchers > .icon-add-bullet").length == 1) {

$.get($(".icon-add-bullet").attr("href"), function () {

$(".ui-dialog-titlebar-close").click();

//クラスを追加

$("#users_for_watcher label").each(function (i, val) {

$("#watchers_inputs").find("#issue_watcher_user_ids_" + $(val).find("input").val()).addClass($(val).find("span").attr("class"));

});

//改行とタイトルを挿入

$("label:contains(" + $("#users_for_watcher .icon-group").first().parent().text() +")").first()

.before('<label class="floating" style="clear: both;"> グループ名</label><hr>')

$("#watchers_inputs label:first")

.before('<label class="floating" style="clear: both;"> ユーザー名</label><hr>')

});

}

});

４．制限事項

「新しいチケット」を開いた直後の状態で上記のJavaScriptを実行する時だけ、正常に動作します。

下図のように「ウォッチャーを検索して追加」からユーザーを追加するとアイコンやセパレーターは正しく表示しません。

５．おまけ：「ウォッチャーを検索して追加」のUIの改善

いくつかのパターンを実施

５．１．ユーザーとグループの間に水平線を挿入

$(function () {

// 監視ターゲットの取得

const target = document.getElementById("ajax-modal");

// オブザーバーの作成

const observer = new MutationObserver(records => {

$("#users_for_watcher .icon-group").first().parent().before("<hr>");

});

// 監視の開始

observer.observe(target, {

childList: true

});

５．２．ユーザーとグループの間に水平線を挿入し、ユーザーとグループで背景色を変える

$(function () {

// 監視ターゲットの取得

const target = document.getElementById("ajax-modal");

// オブザーバーの作成

const observer = new MutationObserver(records => {

$("#users_for_watcher .icon-group").first().parent().before("<hr>");

$("#users_for_watcher .icon-group").parent().css("background-color", "gainsboro");

$("#users_for_watcher .icon-user").parent().css("background-color", "aliceblue");

});

// 監視の開始

observer.observe(target, {

childList: true

});

})

５．３．水平線は入れず、ユーザーとグループで背景色を変える

$(function () {

// 監視ターゲットの取得

const target = document.getElementById("ajax-modal");

// オブザーバーの作成

const observer = new MutationObserver(records => {

$("#users_for_watcher .icon-group").parent().css("background-color", "gainsboro");

$("#users_for_watcher .icon-user").parent().css("background-color", "aliceblue");

});

// 監視の開始

observer.observe(target, {

childList: true

});

５．４．「ユーザーの検索」欄に文字列を入力すると検索がされますが、その際にも背景色が維持されます。

2022年12月2日午前1時に執筆をしました。ワールドカップで日本は無事にリーグ突破ができるのか？できないのか？午前4時から始まるとのことで残念ながら生中継は見れそうもないので、録画版で応援をしたいと思います。

少し早いですが、良いクリスマスを！Redmineの愛用者の皆様にメリークリスマス！

Redmine 4.0.0 新機能のご紹介

2022-06-21T11:56:39+09:00

Redmine 4.0.0 新機能のご紹介資料です。

2018 年 12 月 9 日にリリースされた「Redmine4.0.0」バージョンでは全部で 215 箇所の変更がありましたが、代表的な 29 項目に対して説明いたします。

「資料のダウンロード」

Redmine4.0.0 新機能のご紹介(1)

概要

Redmineの公式ホームページである「http://www.redmine.org/」の「ロードマップ」でRedmineの各バージョン別の機能を調べることができます。
2018年12月9日にリリースされた「Redmine4.0.0」バージョンでは全部で215箇所の変更がありました。
本書では代表的な29項目に対して説明いたします。

カテゴリ別の変更された項目の内訳は下記の表の通りです。

カテゴリー別新機能一覧です。

1.アーカイブプロジェクトへアクセス時、「アーカイブ解除」リンク (#29993)

Option to unarchive the project when admins visit an archived project/Administration

システム管理者がアーカイブされたプロジェクトへアクセスすると「アーカイブ解除」リンクが表示されます。システム管理者ではない権限では、「アーカイブ解除」リンクが表示されません。この機能により、管理者は簡単にプロジェクトのアーカイブを解除できます。

2.添付ファイルの向きを自動修正(#28616)

Handle image orientation of attachments and thumbnails/Attachments

Firefox以外のブラウザでは下図のように添付ファイルが表示をされますが、Firefoxでは下図のように添付ファイルが正しい向きで表示されます。

3.添付ファイルダウンロード用のURLの表記方法変更(#27822)

Remove filename from attachment preview links/Attachments

以前のバージョンでは、添付ファイルダウンロード用のURLの表記方法が「/attachments/2/down.jpg」のように「/attachments/:id/:filename」形式で表記されていました。この方法だと、添付ファイル名が「down.jpg」から「down_new.jpg」のように変更されると、「/attachments/2/down.jpg」ではアクセスできず、「/attachments/2/ down_new.jpg」でないとアクセスができませんでした。添付ファイル名が変更されると、添付ファイルへのアクセスができなく不便がありました。4.0.0バージョンからは「/attachments/:id/」となり、添付ファイル名の変更があっても同じURLでアクセスすることができます。

4.wikiでの添付ファイル一括削除(#16410)

Bulk delete wiki attachments/Attachments

wiki編集ページで、添付ファイルがある場合、「添付ファイルの編集」メニューがあり、クリックをすると、下図のように、添付ファイルを削除するチェックボタンが表示されます。この画面から添付ファイルを削除することができます。

5.カレンダーでコンテキストメニューの表示(#28067)

Add context menu for issues in calendar/Calendar

カレンダーページで下図のようにコンテキストメニューが表示されます。以前のバージョンではカレンダーページはviewの機能しかありませんでしたが、4.0.0バージョンからはカレンダーページからチケットの編集が可能になります。

6.ガントチャートの表題欄の幅がリサイズ可能(#20481)

Gantt: right and left resizable panel/Gantt

下図のように、ガントチャートの表題欄の幅をマウスドラッグでリサイズが可能になりました。

7.ガントチャートでコンテキストメニューの表示(#10485)

Add new context menu in Gantt view for each issue/Gantt

ガントチャートページで下図のようにコンテキストメニューが表示されます。以前のバージョンではガントチャートページはviewの機能しかありませんでしたが、4.0.0バージョンからはガントチャートページからチケットの編集が可能になります。

8.CSVエクスポート時「エンコーディング」選択機能(#26279)

Allow switching the encoding to UTF-8 when exporting to CSV/Issues

以前のバージョンでは、CSVエクスポート時「エンコーディング」を選択できませんでしたが、4.0.0バージョンからCSVエクスポート時「エンコーディング」を選択できるようになりました。

9.「重複しているチケットを連動して終了」オプションの追加(#26192)

Option to disable automatic closing of duplicate issues/Issues

4.0.0バージョンから、「管理」->「設定」->「チケットトラッキング」に「重複しているチケットを連動して終了」オプションが追加されました。
以前のバージョンでは重複しているチケットに関係を指定した場合、片方のチケットを終了すると、重複している他のチケットも自動的に終了されました。
4.0.0バージョンから「重複しているチケットを連動して終了」オプションをオフにすると、チケットに関係を指定した場合で、片方のチケットを終了しても、重複している他のチケットは自動的に終了しないように設定できます。

10.カテゴリ選択時に担当者自動挿入機能(#15919)

Set default category assignee immediately upon category selection/Issues

プロジェクトの「設定」タブの「チケットのカテゴリ」でデフォルト担当者を指定します。チケット作成時に、「カテゴリ」を選択すると、自動的にカテゴリで指定したデフォルト担当者が担当者欄に入力されます。

本書はRedmineの情報を提供する目的で作成されております。本書の作成にあたり、正確な記述に努めましたが、本書に対して何らかの保証をするものではなく、本書の内容を元に運用に影響がでる場合の責任は負いかねますので、ご了承ください。
本書の内容は2018年12月11日現在のものであり、内容は事前予告なく変更される場合があります。

Redmine 3.4.0 新機能のご紹介

2022-06-21T11:55:22+09:00

Redmine 3.4.0 新機能のご紹介資料です。

2017年7月2日にリリース予定の「Redmine3.4.0」バージョンでは全部で201箇所の変更があり、代表的な31項目に対して説明いたします。詳細は下記の資料をダウンロードしてください。

「資料のダウンロード」

Redmine 3.3.0 新機能のご紹介

2022-06-21T11:53:46+09:00

Redmine 3.3.0 新機能のご紹介資料です。

2016年6月19日にリリースされた「Redmine3.3.0」バージョンでは全部で105箇所の変更がありましたが、代表的な16項目に対して説明いたします。詳細は下記の資料をダウンロードしてください。

「資料のダウンロード」

Redmine 3.2.0 新機能のご紹介

2022-06-21T11:52:38+09:00

Redmine 3.2.0 新機能のご紹介資料です。

2015年12月6日にリリースされた「Redmine3.2.0」バージョンでは全部で85箇所の変更がありましたが、代表的な20項目に対して説明いたします。詳細は下記の資料をダウンロードしてください。

「資料のダウンロード」

라이언즈소프트

Redmine 6.x バージョンに対応した「プロジェクトツリービュー」をリリースしました。

Redmine 6.x バージョンに対応した「ユーザーダッシュボード」をリリースしました。

Redmine 6.x バージョンに対応した「チケット拡張」をリリースしました。

Redmine 6.x バージョンに対応した「ワークフロー別担当者」をリリースしました。

Redmine 6.x バージョンに対応した「ANKOガントチャート」をリリースしました。

Introduction of ANKO Gantt chart

About ANKO Gantt chart

Easily add or edit schedules using Anko Gantt Chart for real-time schedule and progress management.

Real-time tracking of project progress and delay

A Gantt chart that anyone can use right away

UX designed for readability

Holiday Designation

Installation and Support Environment

By using ANKO Gantt chart, You can improve the efficiency of the work.

Main functions

REGISTER A NEW ISSUE

REGISTER A SUBTASK

CHANGE ISSUE CONTENTS

CHANGE START AND DUE DATES by mouse drag and Mass update

To open, close Tree-View of issues

Display of guidelines

Display and change weekday period number

Display workflow

Setting holidays

SCHEDULED START AND DUE OF DATE INDICATED

SETTING ISSUES WITH PARENT ISSUES OR VERSION BY MOUSE DRAG

Rich UI

Adjust width of column

HEADER AUTOMATIC SCROLL

Full Screen

Specification of ANKO Gantt chart

Price

Flow of your purchasee

CONTACT US

6か月間予定がなければ、JavaScriptで「メリークリスマス」をガントチャートに書けるはず！

ガントチャートの背景色をJavaScriptで入れてみた

wikiを閉じたり展開する機能をJavaScriptで作ってみた

マイページのブロック（ボックス）を閉じたり展開する機能をJavaScriptで作ってみた

Redmine4.2の「ウォッチャーの追加」ポップアップウィンドウで「ユーザ」と「グループ」を視覚的に区別できるようにJavaScriptで実装してみた

Redmine 4.0.0 新機能のご紹介

Redmine4.0.0 新機能のご紹介(1)

概要

1.アーカイブプロジェクトへアクセス時、「アーカイブ解除」リンク (#29993)

2.添付ファイルの向きを自動修正(#28616)

3.添付ファイルダウンロード用のURLの表記方法変更(#27822)

4.wikiでの添付ファイル一括削除(#16410)

5.カレンダーでコンテキストメニューの表示(#28067)

6.ガントチャートの表題欄の幅がリサイズ可能(#20481)

7.ガントチャートでコンテキストメニューの表示(#10485)

8.CSVエクスポート時「エンコーディング」選択機能(#26279)

9.「重複しているチケットを連動して終了」オプションの追加(#26192)

10.カテゴリ選択時に担当者自動挿入機能(#15919)

Redmine 3.4.0 新機能のご紹介

Redmine 3.3.0 新機能のご紹介

Redmine 3.2.0 新機能のご紹介

Easily add or edit schedules using Anko Gantt Chart
for real-time schedule and progress management.