最近、筋トレのモチベが高いので、影織の、影織による、影織のための筋トレWebアプリを作ってみた。
Fitness Tracker
Fitness Tracker
何故作ろうと思ったか
朝起きたらまず筋トレするのが私の日課です。
いつも見てるのがこの方の動画。とってもシンプルでわかりやすく、そして結構効くのでおすすめ。
前田のまいにちセルフケア ! by GronG
【前田のまいにちセルフケア！by GronG】 当チャンネルでは、コンディショニング（心身をよい状態に整えること）の専門家がストレッチやエクササイズなどのセルフケア方法をわかりやすくお伝えし、みなさまの健康的な生活習慣に貢献できるよう情報を発信しています。 心身をよい状態に保つことは、現代生活において大切な要素です。 是非、毎日のセルフケアに動画をご活用ください。 ■出演者：前田 修平 (GronG 専属トレーナー） ■保有資格：NASM-PES、鍼灸師 ■前田のまいにちセルフケア by GronG 【公式Instagram】 https://www.instagram.com/selfcare_maeda 【公式X】 https://x.com/MaedaSelfcare ■お仕事の依頼、問い合わせはこちら selfcare_maeda@ultimatelife.co.jp
ですが日々「今日はどの部位を鍛えようかな...」と考えて、動画を探すのがちょっと面倒だったんですよね。
そんなことをいちいち考えなくても、今日はこのメニュー！ってすぐできるようにしたい。
ということでこのアプリを作りました。
機能
朝のワークアウト
スロートレーニング系の動画（上半身・下半身・腹筋）をローテーション。
順繰りにやれば、バランスよく鍛えられるってわけ٩( 'ω' )و
午後のワークアウト
高負荷のワークアウトを入れてます。
30秒ワークアウト + 10秒休憩を4セット。
2024/2/11現在追加しているメニューは以下の通りです。
・バーピー
・ロープランクトゥハイプランク
・マウンテンクライマー
・プランク（これは休憩なしで150秒連続でやるようにしてます）
・ヒンズープッシュアップ
もうちょっと下半身強化できるワーク追加してもいいかもね。
スタートボタンを押すと、カウントダウンがスタートします。
1サイクル完了後、リセットボタンを押すと、次のワークが出ます。
1つやって物足りない時は、さらにどうぞ。
カレンダー
月間カレンダーで達成度をチェック。
朝または午後だけやったら◯、両方やったら◎がつきます。
カレンダーのデータは当月分のみ見られます。
前月以前のデータ保存機能はつけていません。
データ保存について
ローカルストレージという、ブラウザにデータを溜める仕組みを使って達成度やメニューを管理しています。
そのため、データはお使いの端末にのみ保存されます。
勝手に見たり抜き取ったりできないので、安心してお使いください。
工夫したこと
ローテーション機能
サボった日（Finishボタンを押さなかった日）は、ローテーションが進まず、翌日に同じトレーニングが表示されるようにしました。
PWA化
PWAとは"Progressive web
apps"の略、つまり中身はWebサイトなのですが、アプリライクに表示できます。
https://fitness.kageori.com/
にスマホからアクセスして、ホーム画面に追加してみてください。アプリっぽく追加されます。
本当は通知機能を入れたいがためにPWA化したのですが、今の実装構成だとどうしても実現できなくて泣く泣く諦めました。
通知させたい方はスマホのリマインダを使ってもろて...
通知について/エンジニア向け補足（折りたたんでます）
OneSignalというサービスを使って実装しようとしていました。
REST APIが公開されているので、これを使えば通知できそう、というところまではわかったものの、そのAPIキーをうまいこと隠蔽する方法が見つからずに詰んでしまったのです。
このページはGitlab Pagesで静的サイトとして公開しているので、GitLab
CI/CD変数を使えば恐らく良さそうなのですが、使い方がわからなかったので...
有識者コメントいつでも待ってます(* ᴗ ᴗ)⁾⁾
アイコン
推しがアイコンにいる。もうそれだけで嬉しいでしょ。
ダンベル持ってきたの？んんんんかわいいねぇぇぇぇ
まとめ
よければ使ってみーてね！(๑╹ω╹๑ )
Fitness Tracker
Fitness Tracker
0 コメント