暗算得意ですか？
脳トレとしてちょっとトライするぐらいであればいいんですが、四六時中頭をフル回転させると、脳味噌疲労困憊状態になって、思考停止してしまいますよね。
僕の場合は、脳に栄養を与えようと、その後は甘い物パレードが始まってしまいます。
すると体重が気になってきて、運動しなけりゃ・・・、そして運動するとまた疲れて身体疲労困憊状態に・・・
また甘い物・・・
なんじゃこのローテーション・・・
そんな暗算を手早く行えるように楽する為のスニペットを今回は作ったのでご紹介。
名前は「NumCul」（ナムカル）で「Numberic Culcurater」です。
ビジネスアプリは数字だらけ
ビジネス系のWEBサービスを作っていると、取り貯めたログデータや各種の数値データから、レポート画面を作成するような場面が多々あります。
tableタグに、たくさん羅列された数字データと、それを視覚化するためのグラフ表示は、GooGleAnalyticsのような画面を容易に想像できると思います。
数字管理といえば、MicrosoftのExcelを筆頭にGoogleSpreadSheetなど、ようするにエクセルインターフェイスが非常に使いやすいことは、仕事でパソコンを使う人であれば、誰でも理解していると思います。
上場企業などのホームページを見ると、IR情報としての、業績数値を表示しているページが公開されていますが、ここもtableデータと数値マトリクス表のオンパレードです。
WEBページでも自動計算したい
こうした数字マトリクスを見ていると、無意識にtableのセルをカーソルで選択している自分がいることに気が付きました。
エクセルの場合は、選択されているセルが複数あると、その数値の合計値を画面下に表示してくれている為、わざわざ自分でその場で計算しなくても簡易合計値として利用できます。
これをWEBページでもできないかと考えて見たところ、tableセルをクリックした時に、セルを選択して、複数選択されたセルの合計値を表示するだけのシステムを考えてみました。
ソース
/**
* NumCul
*/
;NumCul = (function(){
// 実行済みの場合は、処理追加をしない。
if(typeof NumCul !== "undefined"){return;}
// イベントライブラリ
var $$event = function(target, mode, func){
//other Browser
if (typeof target.addEventListener !== "undefined"){
target.addEventListener(mode, func, false);
}
else if(typeof target.attachEvent !== "undefined"){
target.attachEvent('on' + mode, function(){func.call(target , window.event)});
}
};
// check-onload
var $$ = function(){
switch(document.readyState){
case "complete":
this.loaded();
break;
case "interactive":
$$event(window , "DOMContentLoaded" , (function(e){this.loaded(e)}).bind(this));
break;
default:
$$event(window , "load" , (function(e){this.loaded(e)}).bind(this));
break;
}
};
// proc-loaded
$$.prototype.loaded = function(){
// set stylesheet
var style = document.createElement("style");
style.rel = "stylesheet";
style.innerHTML = "*[data-numcul='1']{background-color:#FCC;}";
document.getElementsByTagName("head")[0].appendChild(style);
// window-click
$$event(window , "click" , (function(e){this.clickWindow(e)}).bind(this));
// $$event(window , "mouseup" , (function(e){this.culcElements(e)}).bind(this));
};
// click-window : only table-cell
$$.prototype.clickWindow = function(e){
var target = e.target;
// check element
if(target.tagName !== "TD"){return;}
// toggle element -del
if(target.getAttribute("data-numcul") === "1"){
target.removeAttribute("data-numcul");
}
// toggle element -add
else{
// set element
target.setAttribute("data-numcul" , "1");
// // get-value
// var value = target.textContent;
}
this.culcElements();
};
$$.prototype.culcElements = function(){
var targets = document.querySelectorAll("*[data-numcul='1']");
var num = 0;
for(var i=0; i<targets.length; i++){
num += this.changeNumeric(targets[i].textContent);
}
console.log(num);
};
$$.prototype.changeNumeric = function(str){
str = str.replace(/,/g,"");
return Number(str);
};
return new $$;
})();
数値がマトリクスで書かれているWEBページで、デバッグコンソール画面を開いて、上記ソースコードをコピペしてEnterボタンを押してみましょう。
（ブラウザはGoogleChromeブラウザで検証しています。それ以外では検証していません・・・）
我が古巣の株式会社ショーケース・ティービーの財務情報ページを参考に説明します。
https://www.showcase-tv.com/ir/finance/finance/
(2019.3.25現在)※ページが変わっていたらごめんなさい・・・
enterを押したら数字が書いてあるtableタグのセルをクリックすると、セルの色が変わります。
その際にコンソールウィンドウに、現在選択されているセルの合計値が表示されます。
簡易なツールですが、便利に使える可能性がある要素が入っている感じがしないですか？
問題点と今後の発展予測
数字が入っていないセルを選択するとNaNとなり、全ての合計値計算がエラー（NaN）という結果になってしまいます。
企業の財務情報ページをいくつか見ていると、数字でマイナスの場合に"△"を使っている企業もあり、こうした文字列置換対策は行う必要があります・・・が、今の段階では行っていません。
また、table内のtdタグに書かれた数字のみを対象にしていますが、tdタグ内に別のタグで構成されているようなサイトでは、利用することができません。
（正常に動かないと思います）
こうした判定などが色々なサイトに対応できると、GoogleChromeの機能拡張として配布することを想定しています。
きっと、WEBページから情報を取得しているような仕事をしている人にとっては神ツールになる可能性がありますね。
機能化して欲しい要望などあれば、お問い合わせくださいませ。
0 件のコメント:
コメントを投稿