Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!! ~part1~

最近調べものをしていたところ、こんな記事を発見!!
forest.watch.impress.co.jp

"面白いツールだな"、と思った一方、"VBAだと実行ファイル必要になるよな。事前にPCに入れておくの面倒だな。会社だとセキュリティうるさいし。"と思ってしまいました。
それで、"じゃあWebアプリならどうだ?敷居が低いかな?"と思い立ち作ることにしました!!(結構安直ww)

Webアプリ作成初心者の自分が果たして出来るかな?と思ったのですが案外簡単にできました!!(デザインはしょぼしょぼだけど。。。)
下記にソースコードは格納。
https://github.com/Elsammit/MeetingTimer

作成した画面はこんな感じ。
レイアウトがしょぼい。。。まぁ機能としてはいいかな?
f:id:Elsammit:20200519223408j:plain

では、実際の処理について!!
とは言ってもそんなに難しいことしてないww。スタートボタン押したら1秒毎に処理が走って金額出してるだけだし。
タイマ処理部分については下記を参考に作成。
www.shurey.com

では、
 ①月給入力処理
 ②タイマーのスタート・リセットボタン押下時の金額算出
の順で書きますね。

①月給入力処理
入力を上下ボタンで切り替えられるようにtypeをnumberに設定。
後はStyleで右詰かつ入力サイズを指定。

で改行をしながら部長~社員までを記載。

<label for="Manager">部長</label>
<input name="Manager_salary" type="number" value="0" min="0" step="5" style="text-align: right; width:100px;"/>
<label>万円 &nbsp;&nbsp;</label>
<input name="Manager_Num" type="number" value="0" min="0" step="1" style="text-align: right; width:35px;" />
<label>人</label><br>
<label for="GL">課長</label>
<input name="GL_salary" type="number" value="0" min="0" step="5" style="text-align: right; width:100px;" />
<label>万円  &nbsp;&nbsp;</label>
<input name="GL_Num" type="number" value="0" min="0" step="1" style="text-align: right; width:35px;" />
<label>人</label><br>
<label for="Chief">係長</label>
<input name="Chief_salary" type="number" value="0" min="0" step="5" style="text-align: right; width:100px;" />
<label>万円  &nbsp;&nbsp;</label>
<input name="Chief_Num" type="number" value="0" min="0" step="1" style="text-align: right; width:35px;" >
<label>人</label><br>
<label for="Employee">社員</label>
<input name="Employee_salary" type="number" value="0" min="0" step="5" style="text-align: right; width:100px;" />
<label>万円  &nbsp;&nbsp;</label>
<input name="Employee_Num" type="number" value="0" min="0" step="1" style="text-align: right; width:35px; " >
<label>人</label><br>

②タイマーのスタート・リセットボタン押下時の金額算出
下記でボタン押下時にonClickに記載した関数をコール。
※関数はjavascriptにて定義している。

<input name="counter" type="text" value="00:00:00"></input>
<input name="start" type="button" value="スタート" onClick="start_count()" />
<input name="reset" type="button" value="リセット" onClick="reset_form()" />

javascriptは、js配下に格納されており、start_count()、reset_form()はそれぞれ、

function start_count(){
    if(sw_status == 0){
        result_Message();
        money = calc_money();
        document.form_sw.start.value = "ストップ";
        sw_status = 1;
        timerID = setInterval("count_up()",1000);
    }else{
        result_Message();
        document.form_sw.start.value = "スタート";
        sw_status = 0;
        clearInterval(timerID);
    }
}

function reset_form(){
    if(sw_status == 1){
        start_count();
    }
    timer = 0;
    money = 0;
    result_Message();
    document.form_sw.counter.value=count_format(0); // タイマのクリア.
    document.form_sw.Meeting_Money.value=0;         // 発生金額のクリア.
}

となっている。
スタートボタンを押下するとストップボタンに切り替わるように条件分岐させた。
また、setInterval("count_up()",1000);で1秒(1000ミリ秒)でcount_up()関数がコールされる。

最後に、moneyってなんだ?ということになるが、
各役職の月給に対して、1秒毎の金額に変換し人数分掛け合わせ、
最後に全体を足し合わせている。
ここで、今回は1か月の仕事時間を、
出勤日数:20日/月、1日の仕事時間:8時間
とした。
残業しなければこんなもんかな?

簡単に作れたけど、機能としては十分なので結構満足!!
だけど、どうせなので、、、
 ・レイアウトをきれいに作成
 ・計測結果をDBに保存しておいて後で見返せるようにする
 ・スケジュールと連携する
とか実施していきたいな。と