Softex CelwareTech Blog
学習アプリ公開事例

KochSprint モールス道場

モールス信号学習アプリ

モールス信号の聞き取り練習、タイムアタック、ワードチャレンジを備えたブラウザ学習アプリです。

概要

Web Audio APIによる正確なモールス音再生、モバイルでも使いやすい入力UI、実績バッジ、ランキング向けUIを備えた学習アプリです。

Vanilla JSで複数ページを構成し、共通UIやデプロイ手順を整理しながら継続開発できる形にしています。

音声と視覚フィードバックを同期させ、音が出せない環境でも学習しやすいUIを目指しています。

使用技術

Vanilla JSWeb Audio APISupabaseVercelCSS

実装・設計のポイント

  • AudioContextによる正確な音声スケジューリング
  • スマホ向けタップ入力グリッド
  • 実績バッジとゲスト・ログイン両対応
  • 音と同期する全画面フラッシュ
  • 共通UIモジュール化による重複削減

関連する技術記事

同様の業務アプリ開発について

現場ごとの入力項目、帳票レイアウト、保存先フォルダ、承認フローに合わせた GAS・Webアプリ・Excel VBAの業務改善ツール開発に対応しています。

相談する