マルチストップウォッチの個人開発

　３月下旬に、複数のストップウォッチアプリを１つの画面で同時に操作できることをテーマにアプリ制作を開始した。このアプリは現時点でwebアプリとしてvercelを使って公開している。制作にはtypescriptを使用しており、フレームワークとしてはreactを使用した。webアプリ開発を始めて半年程度であり、間違った理解や表現があるかもしれない。そこはごめんなさい。

複数ストップウォッチアプリを作ろう

　このアプリは、私の所属する陸上部のマネージャーが選手のタイム計測をしているのを見て思いついた。私は長距離種目を専攻しており、練習やレースでは400mのトラックを何周も走る。それをマネージャーさんが１周ずつラップを取ってくれるのだが、１度に多くの人やグループのタイムやラップを測る事が多い。
　何個もストップウォッチを机の上に並べながらタイムを測ってるのを見て画面上でわかりやすく操作できるものを作ったらどうだろうかと感じたのがこのアプリを作るきっかけである。あとはシンプルに勉強したプログラミングで実際にものを作りてぇーと思って題材を探してたのもある。

実装したい機能(第１段階)

初めに最低限実装したい機能を考えた。以下の4つである。

①ストップウォッチを好きなだけ追加、削除する

②各ストップウォッチで個別にタイムとラップを取る

③ラップの履歴を各ストップウォッチごとに確認する

④すでに動いているストップウォッチのタイム、ラップを記録した別のストップウォッチを複製する

⑤各ストップウォッチに名前をつける

④については途中まで同じタイムで走っていて、途中から離れて別々に走っている人達のタイムを測るのに使えると考えた。

マルチストップウォッチversion1

　はてなブログさんという方がreactで作成したラップ付きストップウォッチを公開していたのでそれを元に作成を開始した。
　参考にしたはてなブログさんの記事のurlは以下に添付する。

　chat gptと協力しながら前述した機能を付け加えていく。自分なりに表示やバランスも調整してとりあえず完成させた。

　画面は上の表示画面1つのみであり、はじめの状態はストップウォッチが6個ならんでいる状態。上の画像では横に3つのストップウォッチが並んでいるが、画面を小さくすると横に2つ、更に小さくすると1つというように表示が変わっていく設計。
　右上に表示されている追加・削除ボタンを押すと文字通りストップウォッチの数を増やしたり減らしたり出来る。各ストップウォッチにある右上の＋ボタンを押すとそのストップウォッチを複製する。

LAPのタイム表示(00'00"000のやつ)を押すとそのストップウォッチのラップ履歴が表示、右上の履歴ボタンを押すと全てのストップウォッチのラップ履歴をまとめて表示する。↓

version1を使用してもらう

　とりあえず作ったのでマネージャーさんや先輩にみせて使ってもらった。感想とか改善点とかの前に、まずアプリを開いて使ってもらえたことがとにかく嬉しい。このアプリは自分の息子のようなものってくらいに愛着が湧いてることに気づいた。

自分で使ったり使ってもらったりして改善点がいくつも見つかった。その1部を挙げる

①スマホで見にくい
　開発はパソコンで行っており、とりあえずパソコンで動けば良いやと考えて開発した。スマホでは1列で表示され、1つの画面には最大2つのストップウォッチしか表示できず、スワイプしないと他のストップウォッチを見れなかった。これはチョー見にくい。パソコン想定は甘かった。スマホで使えないと意味ないと実感。

②ラップタイムの表示
　version1ではストップウォッチには前回のラップタイムと、その上にスプリットタイム（前回ラップが押された時間）の2つを固定で表示している。
　しかし前回のラップから今までのタイムの表示がない。これがないと今の1周が今、何秒かかっているのかが直感的にわからない。（これは説明できることがないのでむずい）

version2

 この2つの課題を実際に使って指摘もらったので、これを改善し、また、昨日も大幅に増やしたversion2を作成した。これが現在5月時点の最新の状態なのだがかなり満足行くできとなっている。評判も良い。

　本当はここでversion2の説明も書くつもりだったが疲れてしまった。明日ちゃんと書きたい。現在の状態がversion2であるので下のurl絡みてみてください!ちょっと画像も貼っておきます。