初めてのwebアプリ作ってみた
普段はExcelVBAで生きている人です。
html、css、JavaScriptで、わからないなりにいろいろいじってみた記録です。
エクサタイマー
「エクササイズタイマー」
略して「エクサタイマー」として、自分用のサービスを作ってみました。
デスクワーク、創作活動、youtube鑑賞など、座りっぱなしになりがちなすべての人に捧げる「定期的に運動していこうねタイマー」です。
何のために作ったのか
健康のためには、「座ったまま過ごす時間が30分以上続く場合は、立ち上がって軽いウォーキングや体操を3分以上行うこと」が望ましいそうです。
しかし、私のように没頭するタイプの人間はそんなこと言っていられません。
定期的に運動をしやすい環境を作るための仕組みとして、指定時間経過で体操動画が出るようなタイマーを作るのはどやねんという発想に至りました。
使うと...どうなる？
タイマーが終了すると、下部の再生リストにセットされている動画がランダムで表示されます。
動画リストは、任意のyoutubeアドレスに書き換えてもよし、デフォルト動画のまま使っても良し。
なお、youtubeアドレスに時間指定が含まれている場合にはまだ対応できていません。
これもあって、現状ではアドレスを入力した後は「動画表示確認」ボタンでお試しすることを推奨します。
スマートフォンでの通知音再生等に対応しておらず、現状はPC向けです。
作る時に考えたこと ～こだわりという名の言い訳～
キングジムで販売している「ビジュアルバータイマー」を参考に、残り時間はバーと文字で示す形式にしました。
あまり長い時間を指定しないでほしいという意図から、タイマーの時間調整ボタンは1分・5分・15分の3種類としました。
細かすぎる必要性もないと判断し、秒単位の時間調整も取り入れていません。
今すぐ運動したい！と思うときは、「動画表示確認」ボタンで動画だけ表示すればよいでしょうという寸法です。
タイマー完了後に表示する動画のリストは気分で変更できるよう複数用意しています。
動画のランダム表示や複数リスト対応は、飽きっぽい自分のための仕様です＼(^o^)／
入力したURLはローカルストレージに入るので、次回も同じリストが使える（はず）です。
通知音を再生するため、勉強も兼ねてNetlifyを使用して公開してみました。
今後の展望
- UI・UXは伸びしろたっぷりな気がしています。仕組みだけ思いついて勢いで作るタイプなので、デザインを詰め切れていない感じが漏れ出ています。
- 再生リストに何の動画が入っているのかパッと見で判断できないのが気になります。リストの名称変更ｙ、URLから動画タイトルを取得して表示するなど追加機能として設けたいところ。
- デスクトップ通知等含めPC向けな仕様で、スマートフォン対応までは到達できていません。どっちでも使えるようにしたいのぅ...というところです。