プロジェクト【ルービックキューブのタイマーを作る】の最終回となります。ここまで閲覧して頂いた方、本当にありがとうございます。今回はコレ！ スクランブルに合わせて、展開図のカラーリングを変化させようという作業です。 一旦かるく現在の仕様を・・・ 作業前の仕様を確認しておく。 スクランブル文字列(F’ R2 B […]
第8回となる今回は、取得したタイムのデータをグラフ化してみます。グラフ化にはChart.jsを使います。 Chart.js Chart.jsは、JavaScriptでグラフを描画するライブラリです。「線グラフ」「棒グラフ」等の基本グラフだけでなく、「レーダーチャート」「円グラフ」「バブルチャート」など、様々なグラフを作 […]
第7回目の今回は、保存したデータを表示してみる回です。とりあえず、今回は、登録した全件を取得して表示するということを目標にやってみようと思う。 実装 ※ルーティングやCSSの紹介は省略します。興味がある方は、ページ下部にあるソースコードから直接見てください。 public/js/database.js 全件取得する処理 […]
第6回です。今回は前回のテストを踏まえて、実際に記録を保存する機能を作成してみる。 ざっくりとした見通し ちょっとまだどう組み込むかは決めていないのですが、IndexedDBと直接連絡し合う部分は、timer機能とは分離して実装しようと思います。 実装 なんやかんや数日試行錯誤して、たどり着いた結果がコレです。 pub […]
もうシリーズも今回で5回目。今回は、テスト的にIndexedDBを使ってみようと思う。個人的に使ったことがないので。テスト回なのでソースコードは微妙なところが多々ありますが、お許しください。 IndexedDBとは IndexedDBは、ブラウザ内にデータを保存する機能。永続的保存です。CookieやlocalStor […]
今回はスクランブル情報をAPI経由で取得できるようにしてみる。 API化について LaravelのAPI化は難しくない。今回の場合は、認証なども無くてよいので、さらに簡単である。Controllerを用意して、返却したいデータ配列をreturnしてあげれば、あら不思議。 下記に、簡単な例を示す。 app/Http/Co […]
今回はスクランブルを表示してみる。 スクランブルとは？ ルービックキューブを遊ぶ前に、まずバラバラにする。その作業をスクランブルと言う。アプリ上で表示予定の↓この部分が、スクランブルの表示です。 スクランブル表示があると、毎回スクランブル作業に困ることがないし、手癖と関係なくランダムに作業出来る。また、タイムを保存する […]
今回は本アプリの急所のタイマーを作っていく。 簡単な仕様説明 まずタイマーの操作については、スペースキーを長押しして、キーを離したらタイマースタートという動作をさせたい。誤動作を防止するために、0.6から0.7秒くらい長押ししていないとスタートしないようにしたい。 タイマーがスタートしたら、次にスペースキーを押した時に […]
なにはともあれ、ざっくりとした見た目をまずは作ってみる。見た目がざっくりでも出来ると、開発のテンションがあがりますよね。 とはいえ、見た目に関しては大して説明するところもないので共有になります。 作成したもの こちらです。 細かい調整はおいといて、Flexboxベースでこのような配置にしてみました。いい感じです。 共有 […]
最近ルービックキューブを練習しております管理人です。 ルービックキューブでタイムを計るために使われる競技用のタイマーも存在するが、練習で使うにはWEBやスマホのアプリが便利。 すでに完成されたサービスはたくさんあるが、どうせなら自分で作ったものを使って練習するかと思って作成することに。今回作るのはWEBアプリです。 ち […]
