「超ストップウォッチ」　

前回マルチストップウォッチのversion1を作った。↓

このversion1から大きく改善した「超ストップウォッチ」を紹介。
これは現在の状態でまだ発展途中ではあるがかなり良いアプリになってきてる。陸上のタイム・ラップ計測を中心に幅広く使ってもらえると思う。

↓超ストップウォッチのサイト

このアプリのテーマを改めて

僕の所属する陸上部では、練習やレースで複数のグループ、人のタイムとラップを計測している。マネージャーさんが測ってくれているが、何人かで複数のストップウォッチを使って測定している。
陸上してる人なら分かると思うけど、あのSEIKOのTHE ストップウォッチってやつ。時々ストップウォッチとか人手が足りなくなる。

そこで、画面上にストップウォッチを好きなだけ増やしたり、それを1人で自由に操作したりできるアプリを作ろうと考えた。

機能紹介

モード選択

まずはホーム画面。6つのモードを用意した。
各モードの違いは表示の仕方、各ストップウォッチのコンパクトさ、タイムの測り方などである。
このモードをホーム画面から選択。

ストップウォッチの表示

次の画像はいろんなモードの画面の状態。
まず注目してほしいのはストップウォッチの並び方の違い。
2列、3列、4列までストップウォッチの並べ方を全てのモードで指定できる！
これによりスマホなどの小さい画面でも多くのストップウォッチが視認可能。もちろんスワイプして下のストップウォッチを確認することも出来る。

同時スタート

続けて上の画像から。
一番左の画面の機能は全てのストップウォッチが同時スタートする機能。これはversion1にはなかった機能。レースとかでみんなが一斉にスタートするときに使えるんじゃないか。

複製機能

左から2番目は緑の枠で囲まれてるストップウォッチがありますよね。
これはストップウォッチの複製という機能。
これは、前のストップウォッチのタイムとかラップの記憶を持った同じストップウォッチを増やすという意味。
一つの集団やグループのラップタイムを測っている場合、その集団がバラバラになることがある。バラバラになった複数の集団や個人をこの複製を使って測れば良い。途中までは同じタイム。途中から別のタイムでラップ履歴を作ることが可能。
右上の+ボタンを押すことで複製される

ラップ履歴

ラップ履歴の確認は必須の機能。
これは1つのストップウォッチの履歴表示と全てのストップウォッチの履歴表示の2パターンを用意した。
1地番左の画像が単一のストップウォッチのラップ履歴。これはちょいわかりにくいけど各ストップウォッチのラップタイムの部分を押したら表示される。
左から2,3番目の画像は全部のストップウォッチまとめた履歴。これは履歴ボタンが下にあるのでそれ押したら表示される。

名前指定

それぞれのストップウォッチに名前を与えることができる。ストップウォッチの上のinput欄に名前を入力すればラップ履歴の表示にもその名前が反映される。

おまけ

これはパソコンでしか使えないが、ストップウォッチの位置替え機能も搭載！
そのストップウォッチをドラッグして置きたい場所にマウスを移動させればそこにそのストップウォッチを入れ込むことが出来る。

今後の方針

リアルタイム通信化

今動かしているストップウォッチの画面を別のデバイスにリアルタイムで共有できるようにしたい。
まずはそのストップウォッチ閲覧のみで良いと思う。別のデバイスから同時に操作はできないものの、今のラップ履歴とか動いてる状態を見れるってこと。

これができれば配信されてない別の会場のレースの動きとか選手のタイムなどがこの画面を見ることで想像できる。
「この1周70秒か」とか「この1周速い！」とか。陸上好きな人は思い入れのある選手、大会ならラップタイム見るだけでも楽しめるよね。
映像の撮影、配信は禁止されてる大会は多いけどこれは規約に違反使用がない気がするし。

やり方は操作する人が閲覧用のurlを用意できる仕組みにして、それを共有してそれに入ってもらうって形。
理想は閲覧用と操作者用の２つのurlを作れるようにして、操作も複数のデバイスから同時にリアルタイムで行えるようにしたい。が、リアルタイムで操作？同期？みたいなのはまだ良くわからんから一旦後回し。

使ってもらうために

まずは使ってもらったり知ってもらったりしないと、せっかく作っても話しにならないよね。
現状は部活内では少しだけ使ってもらってる。マネージャーさんにも見てもらって改善点を教えてもらった。普段は僕の部活にはマネージャーさんが多いから普通にSEIKOのストップウォッチを使ってる。このアプリの出番はなさそう。マネージャーさんがいない合宿とかで人数が少ないときには使ってもらえた。

これを部活外でも多くの人に知ってもらいたい。これをどうしたものか。
時々Xとかで宣伝するが、僕はあんまりネットが得意でないので手応えがない。
とりあえずは足で稼ぐしかないと思ってる。陸上には大会がいっぱいあるので、そこに集まっているマネージャーさんとかに宣伝してみようかなと。どうやったら怪しくなくせるかが考えどころ。印象良くこのアプリの魅力を伝えたり、アクセスさせられるか実行するのは割と楽しそう。ちょいとワクワク。

他に方法があれば何でも教えてほしい。突飛な発想でも嬉しい。

とりあえず興味ある人は使ってみてほしい

アプリ開発について

最後にちょっとこのアプリの開発についても話す。
僕はアプリ開発を勉強し始めて約半年。
html,css,javascriptから初めた。このアプリはtypescriptとreactというフレームワークを作った。
1番初めに示した記事に参考にしたものを記載したのでそれも見てほしい。

ほぼ始めて制作するアプリだったのでとても苦労した。
1番苦労した部分は、画面の大きさの違いがあってもストップウォッチのデザインが崩れないようにすること。
初めはストップウォッチの中の文字、枠、数字それぞれに対して大きさを指定していた。外のストップウォッチの枠が小さくなったら中の要素がはみ出すなどの問題が生じた。
この解決を何度か試みたが、解決されないまま開発が進んでいった。最終的には外の要素に対する大きさとして中の要素を指定することで表記の崩れを防ぐことができた。

今書きながら思ったが具体的になにをしたかちゃんと理解できてないし、言語化できないなと実感。ちゃんと言語化出来るようにしよう。

以上でこの記事は終わり。是非興味があったら使ってみてほしい。