読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #2-2【アジェンダごとのカウント】

ちょー久しぶりですが、AngularJSの「タイムキーパーを作ってみよう」の#2-2です。
アジェンダごとに時間をカウントできるようにするのですが、ちょっとやっかいだったので、今回は友人の力を借りて解決しました。

設計の見直し

前回(AngularJSを使ってタイムキーパーを作ってみよう #2-1【デジタル時計の時刻表示】 - Web Design Note)までの実装で、各アジェンダ合計時間をデジタル表示でカウントできるようにしました。

See the Pen mywxjW by tnk-mitsuru (@tnk-mitsuru) on CodePen.

これを、アジェンダごとの時間でカウントしようとしたとき、ちんぷんかんぷんで詰んだでたわけですが、
JavaScriptでどう書くかを考える前に、どんな設計にすべきかを整理しました。

要件 今の実装 修正後の実装
「会議時間」に出力したい値 追加した時間の合計値 最初の議題の時間
次の議題に移るタイミング なし 「次の議題」ボタンを押した時
次の議題の時間を取得する なし 配列内の値を順々に参照していく

一つ一つ見ていきましょう。

「会議時間」に「最初の議題の時間」を入れる

会議時間のHTMLはこのようになっています。

<p>会議時間 {{clockDisplay(countTime)}}</p>

で、このcountTimeには、今、JavaScriptで$scope.sumTime()、つまり、会議の合計時間(の関数)が入っているので、これを$scope.agendas[0].time、つまり、最初のアジェンダの時間を入れます。

これが、

$scope.countTime = $scope.sumTime();

こうなります。

$scope.countTime = $scope.agendas[0].time;

「次の議題」ボタンを押すと、次の議題に移る

まず、HTMLに「次の議題」ボタンを追加します。

<button ng-click="nextAgenda()" ng-disabled="sumZero">次の議題</button>

新たに、nextAgenda()という関数が必要なので、JavaScriptに追記します。

$scope.nextAgenda = function() {
	// 「次の議題」を押した時の処理
};

この中身に、次の議題の時間を取得する記述を書きます。

配列内の値を順々に参照し、次の議題の時間を取得する

まず、$scope.currentAgendaという新しい変数を用意します。
これは、現在のアジェンダの配列番号を格納するための変数です。今回の修正では、会議時間に出力するのが「最初」の議題の時間になるので、初期値は0になりますね(配列なので、1番目が0)。

$scope.currentAgenda = 0;

そして、「次の議題」ボタンを押した時に、この値に+1されるようにします。

$scope.nextAgenda = function() {
	$scope.currentAgenda = $scope.currentAgenda+1;
};

そして、この変数はアジェンダの順番を示す数値なので、$scope.countTimeで議題の時間を取得するには、次のように記述します。

$scope.countTime = $scope.agendas[$scope.currentAgenda].time

ただし、議題の数には限りがあるので、次の議題がある場合、ない場合をif分で書きます。
最終的にはこのようになりました。

$scope.currentAgenda = 0;
$scope.nextAgenda = function() {// 「次の議題」を押した時の処理
	$scope.countStop();
	$scope.currentAgenda = $scope.currentAgenda + 1;
	if ($scope.currentAgenda < $scope.agendas.length) {
		$scope.countTime = $scope.agendas[$scope.currentAgenda].time;
	} else {
	 	alert('議題は以上です!');
		$scope.currentAgenda = $scope.currentAgenda-1;
	}
};

その他微改修

今回も、微修正加えました。

  • カウントを0で止めず、マイナス表示に対応
  • 入力値の合計を60倍する方法から、入力値を直接60倍にすることで、秒単位に変換

実際に動くものがこちらです。

See the Pen XbRMqx by tnk-mitsuru (@tnk-mitsuru) on CodePen.

だいぶ、タイムキーパーっぽくなりましたね!