こんにちは、松原です。
今は「案件相談窓口」として、お客様からご相談いただいた案件の見積やスケジューリングに必要な作業工数の算出を担当しています。元コーダーで、たまにコーディングもします。

在宅ワーク期間にはじめたルービックキューブにド嵌りして、この度「自動でキューブの展開図を描画するプログラムを作ってみよう！」という連載企画をスタートすることになりました。私の好きなキューブとWebを融合して何かやってみたい！と考えたときに、この機能の実装を思いつきました。このようなアプリは既にあるのですが、自分で作ってみることで、キューブへの理解も愛情もより深まるハズ。これから数回に分けてその制作過程をお伝えしていきたいと思います。今回はその第２回目、HTMLとJavaScriptを使って制作をスタートしていきます。
第１回では、ルービックキューブ（スピードキューブ）をはじめたきっかけや、キューブの面を崩す「スクランブル」の方法。これから制作するプログラムの構想についてお話ししました。

ちなみに今、ルービックキューブの第３次ブームが到来しているそうですよ！

立体パズル「ルービックキューブ」が、今年で発売40周年を迎えた。
（中略）
メガハウス:40周年の節目ですから、様々なイベントを企画していたのですが、新型コロナのために、イベント開催もままならなくなりました。ところが、Stay Homeとなった、4～5月にかけて出荷量は昨年同期の2・5倍に跳ね上がりました。

※Yahooニュース2020年 8月21日の記事より引用

確かに、YouTubeを見ていても、有名芸能人がキューブに挑戦している動画をよく見かけます。私自身もスピードキューブに嵌ってから3ヵ月、1秒でもよいタイムが出せるように毎日ルービックキューブの動画を見ながら、手探りで練習を続けています。一人でやっていても十分楽しいですが、共感できる人がたくさんいると張り合いが出ますね！

さて本題に戻ります。

キューブを6面揃える前の準備として、まずはキューブをスクランブルする（面をバラバラに崩す）必要があります。尚、適当にキューブを崩すこともできますが、競技では公平を期すために指定された形に崩したキューブが使用されます。キューブには回転記号というものがあり、その回転記号にあわせてキューブを回せば、指定された形にキューブをスクランブルことができるのです。

これから制作する「ランダムでスクランブルを表示して、自動でキューブの展開図を描画するプログラム」は、崩れたキューブをいかに早く揃えるかを競うスピードキューブを練習するときにも使えます。

完成イメージ図に第２回で制作する部分を記しました。

それでは早速「スクランブルのランダム表示と更新ボタン」の部分を作っていきたいと思います。
 

制作スタート！

まずはスクランブルをどうやって作るかが問題です。ここでひとつの疑問が生まれます。
「スクランブルの回転記号って、数とか並び順にルールがあるのかな？」
とりあえず世界キューブ協会 （WCA）のサイトで覗いてみると、運よくそのまま使えそうなスクランブルのデータがありました！使えるものはどんどん使っていきましょう。

私が見つけたのはWCAの競技結果のデータベースで、これまでの大会で使用されたスクランブルのデータがSQLファイルとTSVファイルで提供されていました。今回はTSVファイル（Tab Separated Value＝タブで区切られた形式）を使って制作を進めていきます。

TSV形式のファイル。
2014年以降、すべての公式大会のスクランブルが記録されているよう

なんかファイル重いなぁ。と思ったら、全部で1,193,647行もありました（汗）しかもよく見てると、中には見慣れない回転記号も。実は、私もキューブに嵌っていろいろ調べていく中で知ったことなのですが、スピードキューブの競技には、3x3x3以外にも、2x2x2、4x4x4、5x5x5…さらには片手部門、目隠し部門などが存在するのです！
競技ごとにIDは振られていますが、このTSVファイルには、すべての競技のスクランブルがまとめて入っていました。
 

ファイル形式の変換

まずはこのTSVファイルをJavaScriptで扱える形式（JSON）に変換します。
「tsv json 変換」で検索すると、JavaScriptのコードを公開している方がいたので、早速その方法で試してみましたが上手くいかず。なんだなんだ？と思っていたら、データが重すぎて、処理にめちゃくちゃ時間がかかっているようでした。

他の変換方法がないか模索していると、CSVやTSVファイルを変換できる「d3-dsv」というライブラリがあることがわかりました。このライブラリを読み込めば、TSVをJSONと同じように扱うことが出来ます。処理速度も良好なので、今回はこちらを使うことにしました。
 

データの解析とフィルタリング

次に、その中から3x3x3のスクランブルデータのみを抽出します。
日本ルービック協会（JRCA）のサイトを確認すると、3x3x3の競技名略称が「333」だということがわかったので、TSVファイルの中から「eventId」が「333」のデータのみをフィルターして、新しい配列を作りました。

ここが「333」のデータだけ抽出します
 

ランダム表示＆ボタンで更新

次に、フィルターしたスクランブルをランダムで表示して、ボタンで更新できるようにします。ここは特に問題なく、すんなりいけました。

ということで「スクランブルのランダム表示と更新ボタン」出来ましたーーー！

実際の動き
 

See the Pen crambles.js by M Matsubara (@matsume) on CodePen.

HTMLとJavaScriptのコード（scramble.js）
ローカルのTSVを読み込んでいるので、CodePenではスクランブルは表示されません。
 

今回のまとめ

キューブのスクランブルデータのように、ネット上では様々なデータが公開されています。そのまま使えるデータもあれば、今回のように少し加工する必要があるものもあります。
実際の案件でも、「Web APIでJSONデータを取得して、サイトに表示したい」というような内容の相談が増えてきました。これからまだまだ需要が伸びそうな分野ですが、今回の制作では、そのようなデータの解析や取り扱いについてとても勉強になりました。

今後の課題としては、TSVファイルが重くてGitのリポジトリにも上げられず、置き場に悩んでます。ローカルで動かす分には問題ないのですが、最終的には実物をお見せできればと思っているので、引き続き検討していきたいと思います。

前回の37.97から、0.48秒の記録更新です！微々たるものですが、少しでもタイムが縮まると本当に嬉しいもので、そうなると「もっとよいタイムを出したい！」という一心で、よりキューブに夢中になってしまうのです。まだまだこの無限ループから抜け出せそうにありません。

※「average of 5」は、連続した5回のソルブ（6面を完成させる一連の動作）の中で、最も早いタイムと最も遅いタイムの2回を除いた、3回のタイムの平均値です。