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

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

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

![Alt text](https://gyazo.com/50efceff23bbbb7ad42965c6b0ada215/raw)

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

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

```JS: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秒間隔で繰り返す。

```JS: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);  //カウントを開始
  };
```
**プログレスバー**
メッセージは、時間ではなく、割合で表示させる仕様にしました。

```JS: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点。
![Screenshot from Gyazo](https://gyazo.com/989e83867dc01ecf6a29974aabcb3fd7/raw)
`Composer`をインストールします。
[Download Composer(Composer)](https://getcomposer.org/download/)から、以下をコピーし、ターミナルに貼り付けて実行。
![Screenshot from Gyazo](https://gyazo.com/b100a0b95de1d6264c4641bfc907c4f2/raw)
次に、インストールしたcomposerを移動します。
[Getting Started(Composer)](https://getcomposer.org/doc/00-intro.md#globally)から、以下をコピーし、ターミナルに貼り付けて実行。
![Screenshot from Gyazo](https://gyazo.com/1bbc99031654919831becfecb5bf7e49/raw)
※もし、`Permission Denied`エラーが出るなら、以下で移動できるそうです。

```:ターミナル
$ sudo mv composer.phar /usr/local/bin/composer
```
**※ インストール完了確認**
Composerのバージョンが帰ってこればok。

```:ターミナル
$ Composer -V
```

**3. herokuのインストール**
上記の準備が終わったら、`I'm ready to start`から、Mac用のコマンドをターミナルにコピペし、herokuをインストールする。
![Screenshot from Gyazo](https://gyazo.com/5ddcacb49fd0ef7af6767b4192c44642/raw)
![Screenshot from Gyazo](https://gyazo.com/244c4774b1a005a1820e31a934e9c683/raw)

はい、エラー！

↓を参考にさせて頂き、解決しました。ありがとうございました。
[Qiita 初心者向け　MacでOperation not permittedの解決方法](https://qiita.com/iwaseasahi/items/9d2e29b02df5cce7285d)

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

```:ターミナル
$ 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   //ブラウザで開く
```