記事作成の背景

 

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で下図のように設定をしました。