運動不足を解消！筋トレガチャアプリを作りました

全リモートワーカーの困りごと

それは筋トレが続かないことだッ！

改善策

なかやまきんに君の筋トレ動画にランダムで遷移するアプリを作りました。
「する！」を押下すると、自宅でできる筋トレ動画27種類のどれかに遷移します。

■ URL：https://matt-note.github.io/kintore-gacha/
■ GitHub：https://github.com/matt-note/kintore-gacha

着想

旅ガチャやホテルガチャといったサービスが出てきたことで、○○ガチャおもしろいなーと思い、「筋トレのガチャがあったら面白いのではないか。健康向上に役立つのではないか」と思い、制作に着手しました。

制作

制作、、といっても、あらかじめJSONにURLを定義しておいて、ランダムにそのリンクを生成するだけのショボいクソアプリです。

工夫した点① JSONをファイルにせず、べた書きにした

普段JavaScriptを書いていないので、ローカルのJSONファイル取得にfetch API使うかーと思っていたのですが、そもそも使ったことないし、ネットワークアクセスの時間が発生するし、エラーハンドリングもしなきゃだし、、と思っていたところ、「べた書きで全部解決するやん」と思い浮かび、この作りとして工数削減に寄与しました。

工夫した点② 背景画像をランダムで表示するようにした

背景画像をランダムで表示しようとしたのですが、普通にこれをやろうとすると、ブラウザのキャッシュから取得してしまうため、毎回アクセスするたびに毎回異なる背景画像を設定することができませんでした。
この解決策は下記のように背景画像をクエリ文字列付きで取得するようにすることでした。クエリ文字列は以前のものと違うのなら何でも良いので、アクセス時刻をクエリ文字列に設定する作りとしました。

let randomIndex = Math.floor(Math.random() * BG_IMAGES.length);
document.body.style.backgroundImage = "url(" + DIR_PREFIX + BG_IMAGES[randomIndex] + "?" + new Date().toISOString() + ")";

終わりに

皆様の筋トレ時間が3分でも増えたなら望外の喜びです。最初は筋トレ動画も全部見ようとせず、適当なところで辞めるのを何回か続けていくというのでも良い気がします。では、最後に皆様の健康を願いまして、、、パワー！

これで筋トレが続～～かないッ！

平日は仕事で疲れてるし、休日は休みたいしで、筋トレもしたいけど続きませんでしたッ！ ヤーッ！！

参考

• 動画: ザ・きんにくTV 【The Muscle TV】
• フォント: しょかきうたげ（無料版）
• 画像: マッスルプラス