「瞑想アプリ」の基本構造

(Sample)

今回は、「呼吸ガイド付きの瞑想アプリ」の実装について、コード全体の意味と各機能の役割を解説していきます。呼吸法を可視化するだけで、ユーザーの心の安定に大きく役立つアプリになります。

動作するデモ機能付きのHTMLだけで作れるので、プログラミング初学者にもぴったり！

どんなアプリ？

「吸う」「止める」「吐く」「止める」という呼吸サイクルを、丸い円の大きさと色で表現します。さらに、各フェーズの長さをスライダーで自由に調整できるようになっています。

全体の構成まとめ

HTML構造を読み解く

コア部分

<div class="circle" id="circle">吸ってください</div>

これは、アニメーションの主役となる丸い円で、テキストも中に入っています。

時間設定スライダー

<input type="range" id="inhaleTime" value="4" min="1" max="20" />

• 吸う、止める、吐く、止める、の4ステップをそれぞれ調整可能。
• スライダーの値はリアルタイムにラベルに反映されます。

CSSでアニメーションを演出

.circle クラスの主な特徴

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transition: transform var(--duration, 4s) ease-in-out;
}

• 円の大きさを変えるには transform: scale() を使用
• 色の変化も background-color を rgba() で透明度付きにして制御

例えるなら「風船が膨らんだり縮んだりしているイメージ」です！

JavaScriptで呼吸サイクルを制御

呼吸の流れを配列で管理

const instructions = [
  "吸ってください",
  "止めてください",
  "吐いてください",
  "止めてください",
];

instructionIndex をインクリメントしながら、順番にテキストとアニメーションを切り替えています。

呼吸フェーズに応じた動き

switch (instructionIndex) {
  case 0: // 吸う
    circle.style.transform = "scale(3)";
    circle.style.backgroundColor = "rgba(76, 175, 80, 0.3)";
    break;
  case 2: // 吐く
    circle.style.transform = "scale(1)";
    circle.style.backgroundColor = "rgba(76, 175, 80, 1)";
    break;
}

• 吸うときは scale(3) → 円が大きくなる
• 吐くときは scale(1) → 円が元に戻る
• 色の透明度で呼吸フェーズを視覚的に補助

タイマー制御がポイント！

setInterval と setTimeout を組み合わせることで、「動く」「止まる」の繰り返しが可能になっています。

setTimeout(() => {
  intervalId = setInterval(updateInstruction, time * 1000);
  instructionIndex = (instructionIndex + 1) % instructions.length;
  updateInstruction();
}, time * 1000);

なぜ setTimeout を使ってるの？

「止める」フェーズではタイマーを一旦止める必要があるため、一時停止→再開の制御に使われています。

スライダーのカスタマイズ（UI向上）

function updateSliderColor(slider) {
  const value = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
  slider.style.background = `linear-gradient(to right, #007bff 0%, #007bff ${value}%, #ddd ${value}%, #ddd 100%)`;
}

• スライダーの背景色を動的に更新することで、直感的に「今どこ？」が分かる仕掛けになっています。

応用アイデア（もっと良くするには？）

今後の学習ステップ

このアプリで習得できたことはたくさんあります！

• setInterval と setTimeout を使った繰り返しと一時停止
• スライダーの値連動UI（input[type=range] のカスタマイズ）
• transform: scale() や transition による動きのあるUI演出
• イベント駆動型のプログラミングの考え方

次のステップとしてはこんなことにも挑戦してみましょう！

• 音声ガイドやBGMの導入
• requestAnimationFrame を使ったより滑らかな呼吸波形の表現
• PWA（Progressive Web App）としてスマホ対応・オフライン化

瞑想アプリは「誰でも触れる・役に立つ・作っていて楽しい」3拍子揃ったプロジェクトです。ぜひ自分だけのアレンジを加えて、世界に一つだけのアプリを作ってみてくださいね！質問もいつでもどうぞ！