JavaScript学習のアウトプットとして、タイマーアプリを作成しました。
プログラミング学習を始めて、3ヶ月目での初めてのアプリ実装です。
アプリの目的
- テーマは、会議の生産性向上。
- ミーティング中に、常に、アジェンダとその日のゴールを表示することで、話がブレることなく、スムーズな進行を促す。
- タイマーや進捗率を表示させることで、議論の収束を図る。
機能
- 議題、ゴール、予定時間を入力後、meetingタブをクリックすると、タイマー画面が表示される。
- タイマーをスタート(▶︎)させると、ストップウォッチ、進捗率、進捗に応じたメッセージが表示される。
コード
タブの切り替え
同一のHTMLファイル内に作成し、タブのクリックアクションで切り替え。
//タブの切り替え
$(".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秒間隔で繰り返す。
//カウント方法を定義
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); //カウントを開始
};
プログレスバー
メッセージは、時間ではなく、割合で表示させる仕様にしました。
//プログレスバーの進捗割合計算
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アプリに変身させると良いとのこと。
<?php include_once("index.html"); ?>
{}
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 //ブラウザで開く