このページは福井県立大学の田中求之が2006年1月まで運用していた Mac のサーバ運用に関する会議室 「Web Scripter's Meeting」の記録です。情報が古くなっている可能性がありますのでご注意ください。

フォームで作業時間を合計する機能

発言者:カズカズ
( Date Tuesday, May 16, 2000 19:38:26 )


社内イントラネットで作業時間を集計する(簡単な)実験を
しています。(MacPerlで)

各担当者に、ブラウザで
フォームAに「2:45」
フォームBに「1:45」
入力してもらい、フォーム送信してもらうのですが、
送信前に、合計を計算する機能をつけたいとおもって
います。(合計フィールドを作るのを前提)

例:集計ボタンを押せば、
「2:45」+「1:45」=「4:30」

と合計を出させ、合計フィールドにデータを取得した上で、
フォーム送信したいのです。

簡単に実現する方法はないでしょうか?
(JavaScriptとかも調べたのですがわかりませんでした。)

カズカズ さんからのコメント
( Tuesday, May 16, 2000 20:23:09 )

(訂正です)
「フォームA」でなく「フィールドA」
「フォームB」でなく「フィールドB」

でした。

申訳ございません。

いその@とし研 さんからのコメント
( Thursday, May 18, 2000 15:55:24 )

> 送信前に、合計を計算する機能をつけたいとおもって

送信前に計算させるなら、ブラウザ側の処理ですから JavaScript しかないでしょう。
わりと簡単なスクリプトで済むと思いますが....

JavaScript に関してどのくらいの経験をお持ちなのでしょうか?

カズカズ さんからのコメント
( Thursday, May 18, 2000 19:46:18 )

(コメントありがとうございます)

JavaScriptは初心者です。
プレンティスホール社の入門書等をよんでいます。(Scriptを読んだり
してますが、「経験」とまでは言えそうなレベルではありません。)


(1)MathオブジェクトのメソッドやDateオブジェクトのメソッドあたり
を中心に読んでみたのですが、糸口がつかめませんでした。

(2)特に、Dateオブジェクトの説明で「1970年1月1日からの時刻云々」
という記述を前にして、「では一般の時間計算はどうするの??」「出来
ないのかしら?」というところで、思考が停止しています。

よろしく、お願いします。

しあわせのツボ さんからのコメント
( Thursday, May 18, 2000 20:05:18 )

この程度のものなら、何も時刻計算を使わなくても
「何分」に変換してから加算して、最後に60で割ってやれば
いいのではと思いますが。
ただ、私もJSは得意ではないので、それっぽいサンプルまでは
作れましたが、変数どうしを数値として演算させる方法がわからず
立ち往生してしまいました。(汗)

# Perlで「合計はhh時間mm分でした」とメッセージを返すだけなら簡単に書けるのに(^^;

カズカズ さんからのコメント
( Thursday, May 18, 2000 20:28:19 )

(コメントありがとうございます)

フィールドの時間の入力形式として「hh:mm」(半角数字とコロン)の形
式での計算を、突き詰めてみたいという気持ちがどこかにありました。

(JavaScriptのバージョンにもよるようですが<調査中>)JSに正規表現
オブジェクトというものがあるようで、「\d+」(\dで一桁の数字!?)
にマッチングさせるやり方で、解決できたらと思っています。

他方、平行して、しあわせのツボ様の、解決ルートも検討させていただきます。

(JavaScriptでは正規表現は無理、という誤解が災いしたようです。JSと正規
表現について、調べてみます。週末になってしまうケド。)

いその@とし研 さんからのコメント
( Thursday, May 18, 2000 23:17:49 )

> フィールドの時間の入力形式として「hh:mm」(半角数字とコロン)の形
> 式での計算を、突き詰めてみたいという気持ちがどこかにありました。

ユーザが期待通りに入力してくれるとは限らないので、分と秒は別のフィール
ドの方がよいのではないでしょうか?
# テンキーで数字を入れて、タブで次のフィールドへ移動すればよいのですか
 ら、コロン入力するより便利かもしれませんよ

いその@とし研 さんからのコメント
( Thursday, May 18, 2000 23:19:30 )

あっ、時と分ですね!

カズカズ さんからのコメント
( Friday, May 19, 2000 05:24:15 )

(またまたコメントありがとうございます)

(1)フィールドを「時」と「分」に分けるルート(インターフェース
での工夫)も検討します。

(2)ただ、最初私も、フィールドを細かくする案を検討しましたが、
どうも、「そもそも、普通のユーザは『タブ』で、フィールド移動
すること自体、面倒に感じるようだ」「フィールド移動のつもりで
『リターン』キーを使いかねない」「利用者全員(25人程度)に『移動は
タブで』と指導するのも、効果が(多少)疑問」といった、検討の結果
oneフィールドで「hh:mm」形式の方がベターかなと考えました。

(3)(最初の質問以来、いろいろ教えていただき、感激してます。)

しあわせのツボ さんからのコメント
( Friday, May 19, 2000 10:23:42 )

hh:mmは
tmp = field.split(":");
で解決してました。(tmpは配列、fieldはform.field1.value)
ご参考までに。
ただ、
totalhour += tmp[0];
とすると、数値として演算されず文字列として連結されてしまいました。

カズカズ さんからのコメント
( Friday, May 19, 2000 12:36:28 )

(適時に、リアクションできるだけの知識がない自分がくやしいです)

上記コメント大変参考になります。
今後、

(1)もう一度JSを勉強します(手許の書籍はJS1.1なので最新のものを
買い足します。)

(2)フォームオブジェクトや文字列オブジェクトにフォーカスして、解
決策を考えます。(文字列を数値変換とか)

(3)正規表現オブジェクトからの解決策も考えます(Perlっぽくて)。


いその@とし研 さんからのコメント
( Friday, May 19, 2000 12:49:30 )

例えば以下のサイトなどを見れば、本は買わなくても良いかも?

→  一撃必殺JavaScript日本語リファレンス

カズカズ さんからのコメント
( Friday, May 19, 2000 13:31:47 )

そのとおりですね。

正規表現のサンプル

JavaScriptのバージョンごとのリファレンス(英文)

とかまでありますね。参考にします。

miyake さんからのコメント
( Friday, May 19, 2000 20:31:19 )

私なら入力は、できる限り簡単に、、、という事で
「フィールドA」「フィールドB」には、時分を区切りなく入れちゃいます。
下二桁は必ず分ですし、二桁以上は時間ですから、
で
parseint(フィールドA/100) + ":" + (フィールドA % 100)
のような式で「hh:mm」にします。
↓こんな感じ


<html><head><title></title>

<script language="JavaScript">
<!-- //

 function calc() {
a = document.form1.fieldA.value;
b = document.form1.fieldB.value;
c = (parseInt(a / 100) * 60 + (a % 100)) +  (parseInt(b / 100) * 60 + (b % 100));

if ((a % 100) < 10) {
a1 = parseInt(a / 100) + ":0" + (a % 100);
} else {
a1 = parseInt(a / 100) + ":" + (a % 100);
}

if ((b % 100) < 10) {
b1 = parseInt(b / 100) + ":0" + (b % 100);
} else {
b1 = parseInt(b / 100) + ":" + (b % 100);
}

if ((c % 60) < 10) {
c1 = parseInt(c / 60) + ":0" + (c % 60);
} else {
c1 = parseInt(c / 60) + ":" + (c % 60);
}

document.form2.fieldA.value = a1;
document.form2.fieldB.value = b1;
document.form2.fieldC.value = c1;
}

// -->
</script>

</head>
<body>

<form name="form1">
fieldA<input type="text" name="fieldA" value="">
<br>
fieldB<input type="text" name="fieldB" value="">
<br>
<INPUT TYPE=BUTTON VALUE="計算" onClick="calc()">
</form>
<br><br>
<form name="form2">
fieldA<input type="text" name="fieldA" value="">
<br>
fieldB<input type="text" name="fieldB" value="">
<br>
fieldC<input type="text" name="fieldC" value="">
<br>
<INPUT TYPE=BUTTON VALUE="登録">
</form>

</body></html>

注意!! 分だけの入力には対応してません。

カズカズ さんからのコメント
( Friday, May 19, 2000 20:50:47 )

コメントありがとうございます。

勉強する気持ち、モリモリです。
いままでずっと、ROMでしたが、此処は、本当によい会議室ですね。