3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

コロナ太りの俺必見!自分にあったペースで数を読み上げてくれるパーソナルトレーナーアプリを作ったよ。

Posted at

Siriに頼んでみたんですけど運動アプリが起動するだけで数を数えてくれませんでした( ノД`) なのでこんな感じのを作ります。
0523-pushups-illust.png

#腕立て伏せメトロノーム(実際に使えるので是非お試しください)

Push-ups Metronome v1.0
0523-Pushups-01.PNG

#つくった理由はパーソナルトレーナーっぽいサポートが効果ありそうだったから。
在宅ワークや外出自粛でぶにぶにしてきたので腕立て伏せでもしようかな、と思ったんですがあれって後半に辛くなってくると動きが遅くなっていくんですよね。でもきっと一定のスピードでやったほうがいいんだろうなぁ。パーソナルトレーナーとかついてたらそんな感じのイメージだもん。

キツイ状態の自分の秒数読み上げなぞアテになりませんので、機械に数えてもらいます。でもピッピッという電子音だと「あとどのくらい続くの…」と思って挫けやすそうなのでちゃんと数をしゃべってもらいます。画面を見るのは運動によっては難しいので音声でやります。

#ライバルはフィットネス動画と運動アプリだけど、それらより運動を継続できそう。
●フィットネス動画
そんな「イチッ! ニッ!」って早すぎ! もっとゆっくり「いーちっ! にーぃ!」くらいからお願いしますよ…。自分にちょうどよい負荷の回数から始めないと続かないですよ。でも今の負荷に慣れたら早くしたり回数を増やしたいんですよね。

●運動アプリ
「Maelz Sports」というスマホアプリが良さそうだったのでインストールしてみたんですが、自分用の専用メニューを構築する操作が細かくて使いこなせませんでした。あと電子音のときはテンポを変えられるのですが、音声読み上げだと1秒固定でした。残念。

#つくりかたは公開されてるスクリプトをニコイチしてWeb Speech APIで発話させる。
CodePenで公開されている「SimpleMetronome」をベースにして、メトロノームアイコンとして「Pure CSS Metronome (no svg)」を移植しました。その際、Pugで書かれていたので無印HTMLに変換しました。

読み上げ部分はSpeak.jsを使ってみようと思っていましたが音声が鳴らず、断念。代わりにブラウザのネイティブAPIであるWeb Speech APIを試したところ成功しました。カウントの仕方は元ネタ既存の変数だとあくまで経過時間しかなく、読み上げたい回数ではなかったため、独自のカウンタを追加して対応しました。

そもそもの元ネタが音楽用のメトロノームでBPM(beat per minutes)という単位がわかりにくかったので、腕立て伏せの「何秒に1回やる」といった利用者が理解しやすいように修正しました。そしてデフォルト値として自分がもっとも利用する回数、秒数を設定しました。

#改良するならこんなふうに
●BPMの変換のところが手計算して手入力なので、最低限の入力だけで自動計算するようにしたいです。

●1秒以内に腕立て伏せをやろうとすると「さんじゅうきゅう」のように読み上げ時間が1秒以上になってしまい、段々ずれてきます。「よんじゅう」と読んだあとは「いち」「に」と一の位だけを読んで、次に十の位が変わったときに「ごじゅう」と読むようにしたらいいかな。

●読み上げカウンタの初期化を忘れていたので、続けて開始ボタンを押すと前回の続きの数字を読み上げてしまうので直したいです('A`)

●ストレッチ系のフィットネスにもデフォルト値を変えるだけで流用できると思うので作りたいです。

#環境

Type Library
JS jQuery
JS FitText
CSS SCSS
API Web Speech API

#コード

CodePenにて公開してます。
https://codepen.io/stsin0527/pen/abJJjqR

#つくった感想。知らないコードを読み解くのが楽しい。
公開されているコードをニコイチ、というと簡単そうなんですが、まあそんなわけはなく。元ネタで音を出しているコードはどこだ? AudioContextかな。これってなんだ? どこで音を指定してるんだ? と調べていく作業は楽しかったです。基礎教育なく放り込まれている感じなのですが、必要性に迫られたものを調べていくのはモチベーションが高いので、必要性のわからない授業をぼーっと聞くよりは性に合ってるかな、と思います。

━-━-━-━-━-━-━-━-━-━-━-━-━━-━-━-━-━-━-━-━-━
2021年4月からプロトアウト(プロトタイプ+アウトプット)スタジオに参加して、技術を学んだり自身を深掘りして卒業制作=クラウドファンディングのテーマを決めたりしています。

金融系SEという安定稼働を最優先にガチガチに設計書を作ってバグは許さぬ、という世界で十数年やってきました。自分の性格としても独創的なアイディア出しは苦手で、決まったことを正確に効率的にこなすことが得意です。

そんな私が無事クラウドファンディングに辿り着いて成功できるのか、見守っていただけましたら幸いです。

〇情報発信
・自身とテーマ深掘り的な記事 → note
・開発中のつぶやき → Twitter

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?