【リハビリJS学習】瞑想アプリを作る①

Posted at 2024-06-15

はじめに

前回の記事でいいねやフォロワーさんが増えて、妙に緊張している・・・
学習＆Qiitaの再開のため、下記の記事からプロジェクトを選んでやってみようと思います！
関心のあるものなら取り組めそうなので、瞑想アプリを作ります。

瞑想は前から好きで動画やアプリを見ながら取り組んでいたりします。メンタルケアにも良さそうです。
（余談ですが、Netflixのヘッドスペースシリーズが好きです。クセのない声で聞きやすいです🧘‍♀️）

ではYouTubeの動画を見ながらすすめていきます。

1. 初期ファイル構築

githubからベースとなるファイルをCloneします。画像や音楽などの素材ファイルが入っていました。

2. 格納されていたindex.html、CSSファイル、README.md、app.jsを削除する

また、SCSSを使えるようにしたく、下記のサイトを参考にgulpの導入にチャレンジしてみました。

3. 新たにindex.htmlを作成して、`<html>`タグや`<head>`などを記述する

<title>に適当なタイトルをつける。

4. 必要なコンテンツをマークアップ

<div class="app">
  <div class="time-select"></div>
  <div class="player-container"></div>
  <div class="sound-picker"></div>
</div>

5. CSSでスタイルをあて、全体的なレイアウトを作成

SCSSを使います。
リセットは動画を参考にします。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.time-select,
.sound-picker,
.player-container {
  height: 80%;
  flex: 1;
}
.time-select {
  background-color: lightblue;
}
.sound-picker {
  background-color: lightgreen;
}
.player-container {
  background-color: lightcoral;
}

見た目はこんな感じです。

6. tile-selectに必要なボタンを追加

瞑想の長さを選択できるボタンです。

<div class="time-select">
    <button>2 Minutes</button>
    <button>5 Minutes</button>
    <button>10 Minutes</button>
</div>

jsで使用できるようにデータ属性を追加し、秒数を入れます。

<div class="time-select">
    <button data-time="120">2 Minutes</button>
    <button data-time="300">5 Minutes</button>
    <button data-time="600">10 Minutes</button>
</div>

7. player-containerにオーディオトラックを追加

<div class="player-container">
    <audio class="song">
      <source src="./sounds/rain.mp3">
    </audio>
    <img src="./svg/play.svg" alt="play" class="play">
</div>

imgタグの下にsvg/track-outline.svgのコードをコピペし、クラス名track-outlineをつける。
その下にsvg/moving-outline.svgのコードをコピペし、クラス名moving-outlineをつける。

 <div class="player-container">
    <audio class="song">
      <source src="./sounds/rain.mp3">
    </audio>
    <img src="./svg/play.svg" alt="play" class="play">
    <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
    </svg>
    <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
    </svg>
  </div>