【ルービックキューブのタイマーを作る】第8回 グラフ化してみる回

第8回となる今回は、取得したタイムのデータをグラフ化してみます。グラフ化にはChart.jsを使います。 目次1 Chart.js2 実装2.1 resources/views/graph.blade.php2.2 resources/js/graph.js2.3 resources/scss/app.scss3 確認 […]
第8回となる今回は、取得したタイムのデータをグラフ化してみます。グラフ化にはChart.jsを使います。 目次1 Chart.js2 実装2.1 resources/views/graph.blade.php2.2 resources/js/graph.js2.3 resources/scss/app.scss3 確認 […]
第7回目の今回は、保存したデータを表示してみる回です。とりあえず、今回は、登録した全件を取得して表示するということを目標にやってみようと思う。 目次1 実装1.1 public/js/database.js1.2 resources/js/list.js1.3 resources/views/list.blade.ph […]
第6回です。今回は前回のテストを踏まえて、実際に記録を保存する機能を作成してみる。 目次1 ざっくりとした見通し2 実装2.1 public/js/database.js2.2 resources/js/timer.js2.2.1 64行目 スクランブルの再表示処理を追加2.2.2 117行目 timerStore処理 […]
もうシリーズも今回で5回目。今回は、テスト的にIndexedDBを使ってみようと思う。個人的に使ったことがないので。テスト回なのでソースコードは微妙なところが多々ありますが、お許しください。 目次1 IndexedDBとは2 基本の使い方は?3 配列をそのままつっこんでみる4 やっぱり1件ずつデータ登録したい気がする5 […]
今回はスクランブル情報をAPI経由で取得できるようにしてみる。 目次1 API化について1.1 app/Http/Controllers/CubesApiController.php1.2 routes/api.php1.3 ブラウザでアクセスしてみる2 仕様2.1 GET /api/scramble2.2 POST […]
今回はスクランブルを表示してみる。 目次1 スクランブルとは?2 スクランブル表示の記号は?2.1 回転面の記号2.2 「’」は逆回転2.3 「2」は180度回転3 仕様3.1 同じ面の記号を連続しない3.2 前々回と前回が向かい合う面の場合、前々回と同じ回転方向にはならない3.3 ある一定回数回すことを目 […]
お気に入りを発見したら、更新されるページです。 目次1 日本語で使いたいフォント1.1 Noto Sans Japanese1.2 M PLUS 1p1.3 M PLUS Rounded 1c1.4 Kaisei Decol1.5 Potta One1.6 Kiwi Maru1.7 Klee One1.8 Yusei […]
今回は本アプリの急所のタイマーを作っていく。 目次1 簡単な仕様説明2 長押し機能2.1 index.blade.php2.2 timer.js2.3 スペースキーを長押ししてみる2.4 解説2.4.1 init関数でキーが押された時と、キーが離された時に、イベントが発生するように設定2.4.2 ステータス管理を細かく […]
Chromeで、WEBの挙動なんかを短い動画として保存したいなと思って、5個くらい拡張機能を試してみたがいまいちで、たどり着いたのが、「Screenshot & Screen Video Record by Screeny」でした。 Chromeの拡張機能なので、ブラウザ上でさっと撮影できます。便利! インスト […]
なにはともあれ、ざっくりとした見た目をまずは作ってみる。見た目がざっくりでも出来ると、開発のテンションがあがりますよね。 とはいえ、見た目に関しては大して説明するところもないので共有になります。 作成したもの こちらです。 細かい調整はおいといて、Flexboxベースでこのような配置にしてみました。いい感じです。 共有 […]