【ルービックキューブのタイマーを作る】第0回 つくりたいものを考える回
最近ルービックキューブを練習しております管理人です。
ルービックキューブでタイムを計るために使われる競技用のタイマーも存在するが、練習で使うにはWEBやスマホのアプリが便利。
すでに完成されたサービスはたくさんあるが、どうせなら自分で作ったものを使って練習するかと思って作成することに。今回作るのはWEBアプリです。
ちなみに現在のタイムは？
安定して1分を切るくらいのタイムです。まだ速くはないですが、温かい目で見守ってください。
既存のタイマーを学ぼう
参考
YouTube動画でよく見かけたタイマーを例に、基本機能を学んでいく。
csTimer – Professional Rubik’s Cube Speedsolving/Training Timer
ブラウザからアクセスしてすぐに使えるタイマー。管理人が理解できていない細かいオプションも多数。
DCTimer Lite
iOSアプリ。手軽に記録が出来て、平均やベストタイムなどの記録もつけてくれる。グラフで自分の成長が見てるのも良い。今回作成するのはWEBアプリですが、参考程度に。
機能
基本機能としては、以下のような感じ。
- タイマー機能
- 記録を保存する機能
- 保存した記録の表示機能
- スクランブル表示機能
機能の詳細を考えていく。
機能詳細
タイマー機能
基本としては、スタートすると、ストップウォッチのように表示が動き、ストップすると表示が停止する。スタート時の誤動作を少なくするために、スタンバイ状態を作る。csTimerさんの場合で言えば、スペースキーを0.5秒くらい長押しするとスタンバイ状態になって、キーを離すとタイマーがスタートする。最低限欲しい機能はこれ。
ルービックキューブ特有の機能としては、タイマーを停止した時に、ペナルティを付与することが出来る。公式ルールで「+2秒ペナルティ」や「失格(DNF)」の条件が決められており、そういった場合には、「+2秒ペナルティ」や「失格(DNF)」として記録を保存することが出来るようだ。今回は「+2秒ペナルティ」や「失格(DNF)」は一旦無視することにする。
記録を保存する機能
データを保存する機能は必須。情報としては、日時、タイム、スクランブルが基本情報だ。
スクランブルというのは、スタートする準備としてキューブをバラバラの状態にしなければならないが、バラバラにする行為をスクランブルと言う。このあとの「スクランブル表示機能」で登場するが、アプリ自体にスクランブルを表示する機能があり、次の測定はこの状態からスタートしてくださいねという指示をしてくれる。このスクランブルも記録として保存しておくことで、あとから振り返ることも出来るし、もう一度過去と同じ配置で練習したりすることが出来る。
さて、csTimerさんはCookieやSessionを削除してもデータは保存されていた。となると、IPアドレスをキーにしてRDSなどに保存しているのかなと思ったが、VPNでIPアドレスを変更してもデータは変化がなかった。ということはローカルストレージ的なものを利用しているのだろうと思って見てみると、おそらくIndexedDBが使われていることが分かった。
lacalStorageだとせいぜい5MB程度のデータ上限があると思うので、1万件程度のデータなら良いかもしれないが、10万以上のデータではもうツラいかもしれないと思っていたら、IndexedDBでした。IndexedDBを使用したことがなかったので、今回できればトライしてみたい！IndexedDBは膨大なデータ量を保存可能。IndexedDB Limit Testさんでテストしてみたが、数GB保存しても問題なかった。（これは各PC環境によって変化すると思われる）
あと、間違って保存してしまったデータを削除するインターフェースも欲しい。記事内ではやらないかもしれない。
保存した記録の表示機能
ao5(average of 5),ao12(average of 12)と言った平均表示、単発の最高記録、1日にどのくらい練習したかが見れる機能などが欲しい。しかしながら、これらは、暇な時に作成すれば良いかなーと個人的に思うので、今回はグラフ表示をメインとして表示機能を作ってみることにする。
JSライブラリを使うことにはなるが、morris.jsかChart.jsあたりを使おうと思う。そこまで複雑な機能は不要。
スクランブル表示機能
スクランブルとは、キューブをバラバラにする作業の事を指し、キューブの回転記号を用いて「U2 B D2 B’ R2 F2 U2 R2 B’ R2 D2 U2 L B’ D R’ U2 B F D’」このような文字列で表示される。
これは、毎回自分でやるとランダム性にかけるので、ぜひ欲しい機能。条件としては、N回目の回転がN-1回目の回転と同じ向きでないこと。そして、N-2回目とN-1回目の回転が向かい合う面であった場合、N回目がN-2回目と同じ向きでないこと。これらをルールとして、一定回数分回転させる適当な文字列を作成する簡易的なものとする。
この際、バラバラになっているかどうかの判定等は、今回は行わないものとする。
まとめ
ざっくりと、上記のような機能を次回から作成していこうと思います。はやく完成させて自分で使いたいですね。それと、タイムも更新したい！それでは。
