kyainuma / vs_magic

VSCodeショートカットキー練習サービス

https://vsmagic.herokuapp.com/

• リリース14日で1,000PV突破！

サービス概要

VSCodeのショートカットキーを覚えられない人の為に、ゲーム感覚でショートカットキーを覚えられるサービス

ポートフォリオコンテスト「editch」にてオーディエンス賞獲得！

プログラミングスクール合同ポートフォリオコンテスト「editch」に出場し、オーディエンス賞、審査員賞、スポンサー賞を受賞しました！

editch YouTube Live映像

関連記事

3連覇達成 ポートフォリオコンテスト「editch vol.3」レポート | RUNTEQ - 公式ブログ｜RUNTEQ

機能一覧

TimeAttack機能

TimeAttack結果ツイート機能

TimeAttack ランキング機能

Lesson機能

使用技術

バックエンド

• Ruby 2.7.2
• Rails 6.0.3.4
• RSpec

フロントエンド

• HTML
• SCSS
• JavaScript

インフラストラクチャー

• heroku
• MYSQL
• Nginx
• Puma

ER図

ER図

vs_magic's Issues

タイムアタックゲーム実装

• ショートカットキーの中からランダムで10問抽出
• 10問正解時のタイム判定
• 単品キーで正解で同時押しのあとのキーが不正解の場合に不正解
• modifier_key と競合するブラウザのショートカットキー対策
• 入力コマンド表示
  • keyDown時に表示、keyUpで非表示を切り替える
  • 正解キーが押された瞬間に表示、離されたら非表示
  • 不正解キーはフラッシュ表示
• プログレスバー実装

Rubocop/RSpec/BetterErrors 導入

• rubocopの導入と設定
• rspecの導入と設定
• better_errorsの導入と設定

Model 作成

各モデルの作成

ランキング機能

Gameのベース動作実装

heroku有料対応

ユーザー登録

Windows対応

スマホ対応

ショートカットテーブル修正

• ER図修正
• ショートカットテーブル修正
• バリデーション追加
• gifをDB保存
• OS判断を親クラスにメソッド化
• README修正

パスワードリセット

マイページ

Emmet実装

SNS共有

GA導入

タイムアタックゲームの解答判定をコマンドに変更

• 現在は非表示の要素と一致したら正解としているが、コマンド入力で正解判定とする
• 正解のコマンドはshortcut_keyモデルのanswerカラムから取得
• 正解時のコマンドのみ入力を受付、エディタが実際に動くようにする

Rails _6.0.3.4_ new . --skip-turbolinks --skip-test --database=mysql

タイムアタックとユーザーの紐付け・データ保存

テスト機能実装

アプリ名・デザイン修正

問い合わせ機能

日本語化

管理画面追加

テスト追加

TOPページ作成

Slimに変更