【JavaScript実践】瞑想アプリの作り方を勉強したよ

JavaScriptの使い方を学ぶために以下の動画を使って瞑想アプリの作り方を勉強したよというのと、動画を参考に作成したアプリに少しだけ追加したコードの記録です。

参考動画: Build A Meditation App With Javascript HTML & CSS!
https://www.youtube.com/watch?v=oMBXdZzYqEk

やったこと

動画の説明欄「Materials used in this video:」のURLから使用する素材をダウンロード→動画の説明に従って作成しました。

エディタは動画内で使用していたVisual Studio Codeをインストールして使用しました。

感想

動画は全編英語。ですが講師の話し方が聞き取りやすいので、動画内にある通りてこてこ文字を打ち込んでいけばさくさく進めました。たった45分の動画なのも嬉しい。

SVGを扱うのは初めてだったのでへぇ~便利~と唸りながら楽しく学習しました。

個人的に修正したこと

動画に従ってアプリを作成したあと、気になった部分があったので以下の修正のためコードを追加・修正しました。

  • タイマー表記を「2:0」から「2:00」に修正
  • 分数を設定した際にカウントダウンをリセット
  • 背景動画を常に全体に表示
  • 少しだけレスポンシブ対応

タイマー表記を「2:0」から「2:00」に修正

タイマーの秒数が一桁の場合、「2:0」という表示になってしまっていたので、よく見る「2:00」に修正するために「app.js」の以下の二か所を修正しました。(0を追加したあと、String.prototype.slice()で下2文字を取り出す)

//Select sound
timeSelect.forEach(option => {
    option.addEventListener('click', function() {
        fakeDuration = this.getAttribute("data-time");
    //以下を修正
        timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${("0" +
        Math.floor(fakeDuration % 60)).slice(-2)}`;
    });
});
//We can animaited the circle
    song.ontimeupdate = () =>{
        let currentTime = song.currentTime;
        let elapsed = fakeDuration - currentTime;
    //以下1行を修正
        let seconds = ("0" + Math.floor(elapsed % 60)).slice(-2);
        let minutes = Math.floor(elapsed / 60);
        //省略
        }

参考:javascriptで数字を2桁で表示する方法
https://qiita.com/stivan622/items/d6e32475174c94648c6a

分数を設定した際にカウントダウンをリセット

作成したアプリはタイマーの分数を変更しても、変更前のカウントダウンが残っていました。

例えば10分でタイマーを再生し、→9:50でタイマー停止→分数変更(例えば2分を設定)すると画面上の数字は「2:00」と表示されました。しかし、そこからふたたび再生を押すと「1:50」からカウントダウンが始まってしまいます。これを「2:00」からカウントダウンできるよう 「app.js」を修正しました。

//Select sound
timeSelect.forEach(option => {
    option.addEventListener('click', function() {
        fakeDuration = this.getAttribute("data-time");
        timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${("0" +
        Math.floor(fakeDuration % 60)).slice(-2)}`;
    //以下を追加
        song.currentTime = 0;
    });
});

背景動画を常に全体に表示

作成したアプリでは背景の動画を「width: 100%」で設定していました。

そのため、ブラウザのサイズを縦長に変更すると動画の下に空白ができてしまっていました。

個人的に見栄えが良くなかったため 「index.html」「style.css」「app.js」をそれぞれ修正しました。

        <div class="vid-container">
           <!--  idを追加 -->
            <video id="mainVideo" loop>
                <source src="./video/rain.mp4" type="video/mp4" />
            </video>
        </div>
/* 以下のwidth指定を削除 */
video{
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: -10;
}
/* ブラウザを開いた時のサイズ指定を追加 */
.mainVideo {
    height: 100vh;
    width: auto;
}
   //以下を追加 
   //landscape or portrait
    window.addEventListener('resize', () =>{
        let viewHeight = window.innerHeight;
        let viewWidth = window.innerWidth;
        let windowSize = viewHeight/viewWidth;
        const mainVideo = document.getElementById("mainVideo").style;
        if (windowSize < 0.55){
            mainVideo.width = "100%";
            mainVideo.height = "auto";
        } else {
            mainVideo.width = "auto";
            mainVideo.height = "100vh"; 
        }
    });
    

具体的には、ブラウザサイズの変更時にブラウザの縦(viewHeight)と横(viewWidth)のサイズとその比率(windowSize)を取得し、その比率が0.55より小さいときは横幅100%、それ0.55以上の場合は縦幅100vhにHTMLを書き換えています。

別の方法も試したのですが、

・縦幅100vhで指定→その状態でブラウザを小さくすると動画の上部だけが表示され、雨が水たまりに落ちる部分が見えなくなってしまった。

・背景画像のCSS指定(background-size: cover;)の要領でできないかと思った→背景画像には動画を指定できない。

・mediaのorientationでブラウザの状態(縦長・横長)を判別して振り分けようとした→ブラウザサイズによって微妙に空白ができてしまう

という紆余曲折を経てJavaScriptで調整しました。が、ただ先程見つけた下のページが正解だったかも……次の機会に下の方法で試してみます……。

画面全体に背景動画を流す
https://coco-factory.jp/ugokuweb/move01/6-3-1/

少しだけレスポンシブ対応

ブラウザサイズを変更した際にボタンの表示が重なってしまっていたので、ブラウザ幅が570px以下の場合はFlexBoxを縦並びにして表示が重ならないように修正しました。

@media screen and (max-width: 570px) {
   .app {
       flex-direction: column;
   }
   .time-select,
   .sound-picker,
   .player-container{
       width: 80%;
   }
   .time-display{
       bottom: 0;
   }
}

あまり見栄えは良くないけれど一応最低限のレスポンシブ対応です。

おわり。

GitHub超入門備忘録

なんか難しそう……という理由で避けてきたGithubを少しずつ使えるようになるべくアカウント登録して触った際に参考にさせていただいたサイトの備忘録です。分かりやすいページを作成してくれてありがとうございます。

学習前のレベル:GitHubってなんか怖い

現在のレベル:なんとかpushとcloneができるようになった。ブランチについてもなんとなくわかったような気がする、かも……。

1.Gitインストール/初期設定・GitHubアカウント登録

[初心者向け]GitとGitHubの使い方を徹底解説
https://qiita.com/renesisu727/items/248cb9468a402c622003

「Gitの歴史と環境構築~Githubへの登録」でGithubアカウント登録完了後、「Gitの初期設定」を実施しました。

「GitHubへの公開鍵認証(SSH接続)について」で頭と操作が混乱してしまったのでSSH接続部分は実施できませんでした……後で読み直したいです。読み直します。

Gitインストールの際に設問がたくさんのあるのですが、英語ばかりで(というかこれ以降の手順も英語だらけ……)、ひいひい言いながら調べつつ基本デフォルト設定のまま進めました。前途多難。

2.GitHub上での操作

GitHub Docs
https://docs.github.com/en/get-started/quickstart/hello-world

Gitの初期設定完了後どうしたものかと途方に暮れているとGitHubのログイン画面に以下の表示が出ていました。

公式のガイドのようです。これはありがたい……と「Read the guide」へ進み、翻訳を使いつつ「Hello World」を実施。これで何とかリポジトリやブランチがどういったものか具体的に見えてきました。

3.コマンドを打って動かしてみる①(add→commit→push)

【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践~とりあえず一緒に動かしてみようぜ!~
https://qiita.com/nnahito/items/565f8755e70c51532459

こちらのページは最初から最後まで実施しました。init→add→commit→remote add origin→pushコマンドの流れがとても分かりやすい説明で助かりました、ありがとうございました。

ターミナルでコマンドを打つ部分は先にインストールしたGit Bash上で入力しました。

3.コマンドを打って動かしてみる②(clone, pull)

【超入門】初心者のためのGitとGitHubの使い方
https://tech-blog.rakus.co.jp/entry/20200529/git

前半は確認済みの内容だったのでこちらでは「2. GitとGitHubを使ったチーム開発の超入門」の「2-1. リポジトリをクローンする」と「2-6. リモートリポジトリからプルする」について学びました。

このページもとてもやさしい説明で安心して進めることができました。


おかげさまでGitコマンドとGithubについてなんとなくの概要を掴めました。

コマンドを実行するディレクトリを誤ってエラー(fatal : pathspec ‘test.txt’ did not match any files)が出てあたふたしたりしましたが、そんなレベルでも読み進められるページが多くて本当にありがたいかぎりです、本当に……。

これからの予定:読み飛ばしてしまったSSH接続やGitHub Docsの用語集、Gitコマンドやオプションを学びつつ、GitHubを活用していきたいです。

あとは色々調べているときに以下の脱出ゲームを見つけたので勉強もかねてやってみたいなと思います、メモ。

あるリポジトリからの脱出
https://github.com/kokuyouwind/escape-from-the-repository

おわり。