【JS】初めてのタイマーアプリ作成

JavaScript学習のアウトプットとして、タイマーアプリを作成しました。
プログラミング学習を始めて、3ヶ月目での初めてのアプリ実装です。

アプリの目的

• テーマは、会議の生産性向上。
• ミーティング中に、常に、アジェンダとその日のゴールを表示することで、話がブレることなく、スムーズな進行を促す。
• タイマーや進捗率を表示させることで、議論の収束を図る。

機能

• 議題、ゴール、予定時間を入力後、meetingタブをクリックすると、タイマー画面が表示される。
• タイマーをスタート(▶︎)させると、ストップウォッチ、進捗率、進捗に応じたメッセージが表示される。

コード

タブの切り替え
同一のHTMLファイル内に作成し、タブのクリックアクションで切り替え。

main.js

//タブの切り替え
$(".tab").on("click", function() {
  $("#counter").html("00：00：00");
  count_reset();
  $("#time").text("0 ％");
  if ($(".formTab").hasClass("activeTab")) {
    if($("#mtgTime").val() === "") {
      alert('時間が入力されていません。半角数字で入力して下さい。');
      $(".mtgTab").removeClass("activeTab");
      $(".formTab").addClass("activeTab");
      $("#mtgTime").focus();
      return false;
    }
  }
  $(".tab").removeClass("activeTab");
  $(this).addClass("activeTab");

  //コンテンツの切り替え
  $(".activeContent").removeClass("activeContent");
  let index = $(".tab").index(this);
  $(".content").eq(index).addClass("activeContent");
});

タイマー機能
カウント方法を定義し、カウントアップの処理を1秒間隔で繰り返す。

main.js

//カウント方法を定義
function count_up() {
  sec +=1;    
  if (sec > 59) {
    sec =0;
    min +=1;
  }
  if (min > 59) {
    min = 0;
    hour += 1;
  }
  sec_num = ('0'+sec).slice(-2);
  min_num = ('0' + min).slice(-2);
  hour_num = ('0'+ hour).slice(-2);

  $("#counter").html(hour_num + "：" + min_num + "：" + sec_num);
  percentage();
};

//スタート動作を定義
function count_start() {
  sec = 0;
  min = 0;
  hour = 0;

  $("#counter").html('00：00：00'); 
  $("#start").val("||");     //ボタンの表示変更
  timerFlag = 1;                //動作中にする
  timerActive = setInterval(count_up, 1000);  //カウントを開始
  };

プログレスバー
メッセージは、時間ではなく、割合で表示させる仕様にしました。

main.js

//プログレスバーの進捗割合計算
function percentage() {
  currentTime = (sec/60 + min + hour*60 ) //カウント時間[min]を取得
  let percent = Math.round(100 - currentTime / $("#meetingTime").html() *100);
  $("#bar").attr("value", percent);
  $("#time").text(percent+" ％");

//進捗率に合わせたメッセージ表示
  if (percent > 50) {
    $("#message").html("ミーティング開始！<br>⚠️Agenda、ゴールの共有⚠️");
  } else if ( percent <= 50 && percent > 30) {
    $("#message").html("半分経過しました。<br>⚠️ゴールの再確認⚠️");
  } else if ( percent <= 30 && percent > 20) {
    $("#message").html("70%経過しました。<br>⚠️議論の収束を図ましょう⚠️");
  } else if ( percent <= 20 && percent > 10) {
    $("#message").html("80%経過しました。<br>⚠️アクション項目の整理⚠️");
  } else if ( percent <= 10 && percent > 0) {
    $("#message").html("90%経過しました。<br>⚠️優先度、スケジュールの決定⚠️");
  } else {
    $("#message").html("タイムアップ！！<br>⚠️AI作成者を決めましょう⚠️<br>お疲れ様でした🤗");
  }
};

デプロイ(Heroku)

1. herokuにアプリとして認識してもらう準備
HTML/CSS/JSの構成では、アプリとして認識されず、デプロイ時にエラーになる。
そこで、以下を作成し、簡易的にphpアプリに変身させると良いとのこと。

index.php

<?php include_once("index.html"); ?>

package.json

{}

2. 各種インストール
herokuでのphpアプリのデプロイに必要なのは以下の3点。

Composerをインストールします。
Download Composer(Composer)から、以下をコピーし、ターミナルに貼り付けて実行。

次に、インストールしたcomposerを移動します。
Getting Started(Composer)から、以下をコピーし、ターミナルに貼り付けて実行。

※もし、Permission Deniedエラーが出るなら、以下で移動できるそうです。

ターミナル

$ sudo mv composer.phar /usr/local/bin/composer

※ インストール完了確認
Composerのバージョンが帰ってこればok。

ターミナル

$ Composer -V

3. herokuのインストール
上記の準備が終わったら、I'm ready to startから、Mac用のコマンドをターミナルにコピペし、herokuをインストールする。

はい、エラー！

↓を参考にさせて頂き、解決しました。ありがとうございました。
Qiita 初心者向け　MacでOperation not permittedの解決方法

以上で、デプロイの準備が終わったハズなので、念のため確認。

ターミナル

$ php -v
$ composer -v
$ git --version

4. herokuにログイン
ターミナルからherokuにログインします。

ターミナル

$ heroku login

//以下が帰ってくるので、Enterを押す
heroku: Press any key to open up the browser to login or q to exit:

すると、ブラウザにログイン画面が出るので、Log Inしておく。

5. デプロイ
ローカルが最新になっているかを確認の上、デプロイします。

ターミナル

$ cd アプリのディレクトリ
$ heroku create

すると、Creating app... done,の後の ⬢ 〜をアプリ名として、herokuにフォルダが作成される。

続いて、以下のコマンドでデプロイ完了！！

ターミナル

$ git push heroku master
$ heroku ps:scale web=1
$ heroku open   //ブラウザで開く