RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

やってよかった効率化「グラフを画像からcssへ」

こんにちは。デザイン戦略部のあおきです。

画像で作っていたグラフをhtmlやcss、jQueryを使って作業を効率化したお話をします。
4,5年前のことになりますが、いまだに「やってよかったな」と思っています。

はじまり

対象となったページは、ラクーンホールディングス(当時はラクーン)のIR情報にあった「業績ハイライト」と「財務ハイライト」のページです。
当時は年に1回更新作業があり、イラレを使ってすべてのグラフを画像で作成していました。

なぜ画像から作り替えようと思ったのか

たくさんの数のグラフを作る必要があったため、年1回の作業とはいえちょっとしたやりづらさを感じていました。

感じていたやりづらさ

どうしてもわずらわしさしかなかったため、効率化も図れるし、htmlやcssで作ってしまおう!と思い立ちました。

やったこと

おおまかな手順

だいぶ前のことなので技術的なお話は割愛します。

  1. まずは画像をもとにhtmlとcssを使ってグラフを作成
  2. JSTLを使って必要な部分のみの修正で済むように作り替える
  3. 作成したコードとにらめっこしながら、jQueryを書いていく
  4. 数値を変えてみて、ちゃんと機能するか確認

1、2

この二つの工程は好きな作業だったこともあり、そこまで苦労しませんでした。
画像を眺めながら構造を考え、htmlを書き、cssで色付けをして行きます。
そのあとJSTLの c:setc:forTokens を使い、該当のファイルの上のほうに修正箇所をまとめ、最小限の作業で済むようにしました。

3、4

簡単なjQueryしか書いたことがなかったため、この工程がとても大変でした。
「効率化」も目的に入っているため、数値を変えたくらいでjQueryの記述を修正する必要が出てきては意味がありません。
数値の変更のみでグラフの高さや点の位置、ラインの角度なども正しく変更されるにはどうしたらいいか悩みながらの作成でした。
折れ線グラフを作っていた時にサイン・コサイン・タンジェントの考え方が出てきて、数学苦手だったのでできそうな方に泣きついたりもしながらどうにかこうにか完成させた記憶があります。

折れ線グラフの計算部分のコード

var lineSet = function() {
                var setObj = $(".highlight-graf-wrap.graf-point dl");
                setObj.each(function() {
                    var count = $(this).index()-2;
                    var point = parseInt($(this).children("dd").css("padding-bottom"));
                    var point1 = parseInt($(this).next().children("dd").css("padding-bottom"));
                    var lineW = $(this).width();
                    var lineH = point - point1;
                    var lineWset = Math.sqrt(Math.pow(lineW,2) +  Math.pow(Math.abs(lineH),2)); //線の長さ
                    var lineRotat = Math.round(Math.atan2(lineH, lineW)/Math.PI*180); //線の角度
                    $(this).find(".highlight-graf-line").css({"transform":"rotate(" + lineRotat + "deg)","width":Math.round(lineWset)});
                });
            };

運用してみて

やりづらさは解消されたか

画像で作成していた時に感じていたやりづらさは解消されました。

デメリットはないか

画像と違ってコードが理解できていないと応用が難しいため、イレギュラーがあった場合の対応が少しややこしくはなりました。
とはいえイレギュラーなことはそこまで発生しない部分だったのでメリットのほうが大きいと考えています。

伝えたいこと

更新頻度はたかが年1、されど年1。
少しずつでも作業が効率化していけば、ほかの改修に注力できます。
これが月に1回だったり週に1回だったり、頻度が増せばなおさらです。
みなさんも「もっと効率よくできるのでは…?」と思うことがあれば、できる範囲での効率化を検討してみてください。

余談

当時「株式の状況」も対象で、円グラフをどうにかこうにか作り替えたのですが、数値によってはうまく表示されない不完全なものでした。
昨年末に新しく入ったコーダー仲間に修正をお願いしたところ、canvasを使ってばっちり修正してくれました!

古いブラウザが切り捨てられ、新しい技術も使えるようになってきているので、ハイライトのグラフたちももっとシンプルに作り変えられるはず…
時間ができたときに調査してみようと思います。

一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc