Guitar Scale Sketch

いま反復練習したいスケール、運指に最適化された綺麗で見やすい指板図がさっと手に入る

Guitar Scale Sketchは、ギターの指板図を人に渡したり自分用に保存したい人向けの指板図作成ツールです。

指板の幅をきめてドットを打つだけで指板図を素早く作成できます。

作った指板図はブラウザから印刷したり、URLをシェアして共有できます。

こんな問題を解決します

• ネットや書籍に掲載されている指板図でもいいけど、実は自分がいま練習したい運指には情報が多すぎる/少なすぎる
• 自分で綺麗な指板図を作るのが手間
  • Guitar Scale Sketchを使うことによって、指板の図を書き、抑えるポジションに印を付け、色を選択し、作った指板図を印刷用にレイアウトする、といった手間がなくなります。

サービスURL

https://guitar-scale-sketch.com/

使用技術

• Ruby 3.3.1
• Ruby on Rails 7.1.3
• jsbundling-rails
  • esbuild
• Hotwire
  • turbo-rails
  • stimulus-rails
• bootstrap 5.2.3
• Slim
• Konva 9.2.0
• PostgreSQL

ソーシャルログイン

• OmniAuth Google OAuth2
• OmniAuth - Rails CSRF Protection

テスティングフレームワーク

• RSpec 6.1.3

Linter/Formatter

• ESLint
• Prettier
• Rubocop
• Slim-Lint

CI / CD

• GitHub Actions

インフラ

• Fly.io

インストールと起動

$ git clone https://github.com/sadanora/guitar_scale_sketch.git
$ cd guitar_scale_sketch
$ bin/setup
$ bin/dev

環境変数の設定

環境変数名	説明
GOOGLE_CLIENT_ID	GoogleクライアントID
GOOGLE_CLIENT_SECRET	Googleクライアントシークレット

Linter / Formatter

rubocop

$ bundle exec rubocop

slim-lint

$ bundle exec slim-lint app/views -c config/slim_lint.yml

eslint

yarn eslint ./app/javascript

prettier

$ yarn prettier --check ./app/javascript

上記をまとめて実行

$ bin/lint

テスト

$ bin/rails spec